From d43bf62501ff1820ee9fb5c3ee9c5b18b3663bf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 15 Jul 2024 18:32:22 +0300 Subject: [PATCH] Theming | Add button & fixes #16015, fixes #16016, fixes #16028, fixes #16029 --- src/app/components/button/button.css | 101 --- src/app/components/button/button.interface.ts | 2 +- src/app/components/button/button.ts | 49 +- src/app/components/button/style.ts | 105 --- .../components/button/style/buttonstyle.ts | 640 ++++++++++++++++++ src/app/components/buttongroup/buttongroup.ts | 13 +- .../buttongroup/style/buttongroupstyle.ts | 103 +++ src/app/showcase/doc/button/badgedoc.ts | 2 +- src/app/showcase/doc/button/iconsonlydoc.ts | 18 +- src/app/showcase/doc/button/outlineddoc.ts | 6 +- src/app/showcase/doc/button/raiseddoc.ts | 6 +- src/app/showcase/doc/button/raisedtextdoc.ts | 6 +- src/app/showcase/doc/button/roundeddoc.ts | 6 +- src/app/showcase/doc/button/severitydoc.ts | 6 +- src/app/showcase/doc/button/textdoc.ts | 6 +- 15 files changed, 810 insertions(+), 259 deletions(-) delete mode 100644 src/app/components/button/button.css delete mode 100644 src/app/components/button/style.ts create mode 100644 src/app/components/button/style/buttonstyle.ts create mode 100644 src/app/components/buttongroup/style/buttongroupstyle.ts diff --git a/src/app/components/button/button.css b/src/app/components/button/button.css deleted file mode 100644 index d379bb163c5..00000000000 --- a/src/app/components/button/button.css +++ /dev/null @@ -1,101 +0,0 @@ - -@layer primeng { - .p-button { - margin: 0; - display: inline-flex; - cursor: pointer; - user-select: none; - align-items: center; - vertical-align: bottom; - text-align: center; - overflow: hidden; - position: relative; - } - - .p-button-label { - flex: 1 1 auto; - } - - .p-button-icon-right { - order: 1; - } - - .p-button:disabled { - cursor: default; - pointer-events: none; - } - - .p-button-icon-only { - justify-content: center; - } - - .p-button-icon-only:after { - content: 'p'; - visibility: hidden; - clip: rect(0 0 0 0); - width: 0; - } - - .p-button-vertical { - flex-direction: column; - } - - .p-button-icon-bottom { - order: 2; - } - - .p-button-group .p-button { - margin: 0; - } - - .p-button-group .p-button:focus, - .p-button-group p-button:focus .p-button, - .p-buttonset .p-button:focus, - .p-buttonset .p-button:focus, - .p-buttonset p-button:focus .p-button, - .p-buttonset .p-button:focus{ - position: relative; - z-index: 1; - } - - .p-button-group .p-button:not(:last-child), - .p-button-group .p-button:not(:last-child):hover, - .p-button-group p-button:not(:last-child) .p-button, - .p-button-group p-button:not(:last-child) .p-button:hover, - .p-buttonset .p-button:not(:last-child), - .p-buttonset .p-button:not(:last-child):hover, - .p-buttonset p-button:not(:last-child) .p-button, - .p-buttonset p-button:not(:last-child) .p-button:hover { - border-right: 0 none; - } - - .p-button-group .p-button:not(:first-of-type):not(:last-of-type), - .p-button-group p-button:not(:first-of-type):not(:last-of-type) .p-button, - .p-buttonset .p-button:not(:first-of-type):not(:last-of-type), - .p-buttonset p-button:not(:first-of-type):not(:last-of-type) .p-button { - border-radius: 0; - } - - - .p-button-group .p-button:first-of-type:not(:only-of-type), - .p-button-group p-button:first-of-type:not(:only-of-type) .p-button, - .p-buttonset .p-button:first-of-type:not(:only-of-type), - .p-buttonset p-button:first-of-type:not(:only-of-type) .p-button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .p-button-group .p-button:last-of-type:not(:only-of-type), - .p-button-group p-button:last-of-type:not(:only-of-type) .p-button, - .p-buttonset .p-button:last-of-type:not(:only-of-type), - .p-buttonset p-button:last-of-type:not(:only-of-type) .p-button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - - p-button[iconpos='right'] spinnericon { - order: 1; - } -} - diff --git a/src/app/components/button/button.interface.ts b/src/app/components/button/button.interface.ts index 098d3c19274..51fedcb593a 100644 --- a/src/app/components/button/button.interface.ts +++ b/src/app/components/button/button.interface.ts @@ -53,7 +53,7 @@ export interface ButtonProps { style?: { [klass: string]: any } | null | undefined; styleClass?: string | undefined; badgeClass?: string | undefined; + badgeSeverity?: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined; ariaLabel?: string | undefined; autofocus?: boolean | undefined; } - diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts index e56d3c176b3..32d5c98382a 100755 --- a/src/app/components/button/button.ts +++ b/src/app/components/button/button.ts @@ -18,6 +18,7 @@ import { TemplateRef, ViewEncapsulation, booleanAttribute, + inject, numberAttribute } from '@angular/core'; import { PrimeTemplate, SharedModule } from 'primeng/api'; @@ -26,6 +27,9 @@ import { SpinnerIcon } from 'primeng/icons/spinner'; import { RippleModule } from 'primeng/ripple'; import { ObjectUtils } from 'primeng/utils'; import { AutoFocusModule } from 'primeng/autofocus'; +import { BaseComponent } from 'primeng/basecomponent'; +import { ButtonStyle } from './style/buttonstyle'; +import { BadgeModule } from 'primeng/badge'; type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom'; @@ -45,9 +49,10 @@ const INTERNAL_BUTTON_CLASSES = { selector: '[pButton]', host: { class: 'p-element' - } + }, + providers: [ButtonStyle] }) -export class ButtonDirective implements AfterViewInit, OnDestroy { +export class ButtonDirective extends BaseComponent implements AfterViewInit, OnDestroy { /** * Position of the icon. * @group Props @@ -124,7 +129,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy { * Defines the style of the button. * @group Props */ - @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined; + @Input() severity: 'success' | 'info' | 'warn' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined; /** * Add a shadow to indicate elevation. * @group Props @@ -184,12 +189,10 @@ export class ButtonDirective implements AfterViewInit, OnDestroy { `; - constructor( - public el: ElementRef, - @Inject(DOCUMENT) private document: Document - ) {} + _componentStyle = inject(ButtonStyle); ngAfterViewInit() { + super.ngAfterViewInit(); DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' ')); this.createIcon(); @@ -197,7 +200,9 @@ export class ButtonDirective implements AfterViewInit, OnDestroy { this.initialized = true; } + ngOnChanges(simpleChanges: SimpleChanges) { + super.ngOnChanges(simpleChanges); const { buttonProps } = simpleChanges; if (buttonProps) { @@ -208,6 +213,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy { } } } + getStyleClass(): string[] { const styleClass: string[] = [INTERNAL_BUTTON_CLASSES.button, INTERNAL_BUTTON_CLASSES.component]; @@ -351,6 +357,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy { ngOnDestroy() { this.initialized = false; + super.ngOnDestroy(); } } /** @@ -390,7 +397,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy { {{ label }} - {{ badge }} + `, changeDetection: ChangeDetectionStrategy.OnPush, @@ -398,9 +405,10 @@ export class ButtonDirective implements AfterViewInit, OnDestroy { host: { class: 'p-element', '[class.p-disabled]': 'disabled' || 'loading' - } + }, + providers: [ButtonStyle] }) -export class Button implements AfterContentInit { +export class Button extends BaseComponent implements AfterContentInit { /** * Type of the button. * @group Props @@ -465,7 +473,7 @@ export class Button implements AfterContentInit { * Defines the style of the button. * @group Props */ - @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined; + @Input() severity: 'success' | 'info' | 'warn' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined; /** * Add a border class without a background initially. * @group Props @@ -499,8 +507,15 @@ export class Button implements AfterContentInit { /** * Style class of the badge. * @group Props + * @deprecated use badgeSeverity instead. */ @Input() badgeClass: string | undefined; + /** + * Severity type of the badge. + * @group Props + * @defaultValue secondary + */ + @Input() badgeSeverity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined = 'secondary'; /** * Used to define a string that autocomplete attribute the current element. * @group Props @@ -558,9 +573,10 @@ export class Button implements AfterContentInit { } } - constructor(public el: ElementRef) {} + _componentStyle = inject(ButtonStyle); ngOnChanges(simpleChanges: SimpleChanges) { + super.ngOnChanges(simpleChanges); const { buttonProps } = simpleChanges; if (buttonProps) { @@ -631,17 +647,10 @@ export class Button implements AfterContentInit { } }); } - - badgeStyleClass() { - return { - 'p-badge p-component': true, - 'p-badge-no-gutter': this.badge && String(this.badge).length === 1 - }; - } } @NgModule({ - imports: [CommonModule, RippleModule, SharedModule, AutoFocusModule, SpinnerIcon], + imports: [CommonModule, RippleModule, SharedModule, AutoFocusModule, SpinnerIcon, BadgeModule], exports: [ButtonDirective, Button, SharedModule], declarations: [ButtonDirective, Button] }) diff --git a/src/app/components/button/style.ts b/src/app/components/button/style.ts deleted file mode 100644 index 843788a38e4..00000000000 --- a/src/app/components/button/style.ts +++ /dev/null @@ -1,105 +0,0 @@ -exports.style = 'hello world'; -exports.theme = ({ dt }) => ` -@layer primeng { - .p-button { - margin: 0; - display: inline-flex; - cursor: pointer; - user-select: none; - align-items: center; - vertical-align: bottom; - text-align: center; - overflow: hidden; - position: relative; - color: ${dt('button.primary.color')} !important; - background: ${dt('button.primary.background')} !important; - } - - .p-button-label { - flex: 1 1 auto; - } - - .p-button-icon-right { - order: 1; - } - - .p-button:disabled { - cursor: default; - pointer-events: none; - } - - .p-button-icon-only { - justify-content: center; - } - - .p-button-icon-only:after { - content: 'p'; - visibility: hidden; - clip: rect(0 0 0 0); - width: 0; - } - - .p-button-vertical { - flex-direction: column; - } - - .p-button-icon-bottom { - order: 2; - } - - .p-button-group .p-button { - margin: 0; - } - - .p-button-group .p-button:focus, - .p-button-group p-button:focus .p-button, - .p-buttonset .p-button:focus, - .p-buttonset .p-button:focus, - .p-buttonset p-button:focus .p-button, - .p-buttonset .p-button:focus{ - position: relative; - z-index: 1; - } - - .p-button-group .p-button:not(:last-child), - .p-button-group .p-button:not(:last-child):hover, - .p-button-group p-button:not(:last-child) .p-button, - .p-button-group p-button:not(:last-child) .p-button:hover, - .p-buttonset .p-button:not(:last-child), - .p-buttonset .p-button:not(:last-child):hover, - .p-buttonset p-button:not(:last-child) .p-button, - .p-buttonset p-button:not(:last-child) .p-button:hover { - border-right: 0 none; - } - - .p-button-group .p-button:not(:first-of-type):not(:last-of-type), - .p-button-group p-button:not(:first-of-type):not(:last-of-type) .p-button, - .p-buttonset .p-button:not(:first-of-type):not(:last-of-type), - .p-buttonset p-button:not(:first-of-type):not(:last-of-type) .p-button { - border-radius: 0; - } - - - .p-button-group .p-button:first-of-type:not(:only-of-type), - .p-button-group p-button:first-of-type:not(:only-of-type) .p-button, - .p-buttonset .p-button:first-of-type:not(:only-of-type), - .p-buttonset p-button:first-of-type:not(:only-of-type) .p-button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .p-button-group .p-button:last-of-type:not(:only-of-type), - .p-button-group p-button:last-of-type:not(:only-of-type) .p-button, - .p-buttonset .p-button:last-of-type:not(:only-of-type), - .p-buttonset p-button:last-of-type:not(:only-of-type) .p-button { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - - p-button[iconpos='right'] spinnericon { - order: 1; - } -} - -`; diff --git a/src/app/components/button/style/buttonstyle.ts b/src/app/components/button/style/buttonstyle.ts new file mode 100644 index 00000000000..7a67202e638 --- /dev/null +++ b/src/app/components/button/style/buttonstyle.ts @@ -0,0 +1,640 @@ +import { Injectable } from '@angular/core'; +import { BaseStyle } from 'primeng/base'; + +const theme = ({ dt }) => ` +.p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + color: ${dt('button.primary.color')}; + background: ${dt('button.primary.background')}; + border: 1px solid ${dt('button.primary.border.color')}; + padding: ${dt('button.padding.y')} ${dt('button.padding.x')}; + font-size: 1rem; + font-family: inherit; + font-feature-settings: inherit; + transition: background ${dt('button.transition.duration')}, color ${dt('button.transition.duration')}, border-color ${dt('button.transition.duration')}, + outline-color ${dt('button.transition.duration')}, box-shadow ${dt('button.transition.duration')}; + border-radius: ${dt('button.border.radius')}; + outline-color: transparent; + gap: ${dt('button.gap')}; +} + +.p-button:disabled { + cursor: default; +} + +.p-button-icon-right { + order: 1; +} + +.p-button-icon-bottom { + order: 2; +} + +.p-button-icon-only { + width: ${dt('button.icon.only.width')}; + padding-left: 0; + padding-right: 0; + gap: 0; +} + +.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: ${dt('button.icon.only.width')}; +} + +.p-button-icon-only .p-button-label { + visibility: hidden; + width: 0; +} + +.p-button-sm { + font-size: ${dt('button.sm.font.size')}; + padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')}; +} + +.p-button-sm .p-button-icon { + font-size: ${dt('button.sm.font.size')}; +} + +.p-button-lg { + font-size: ${dt('button.lg.font.size')}; + padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')}; +} + +.p-button-lg .p-button-icon { + font-size: ${dt('button.lg.font.size')}; +} + +.p-button-vertical { + flex-direction: column; +} + +.p-button-label { + font-weight: ${dt('button.label.font.weight')}; +} + +.p-button-fluid { + width: 100%; +} + +.p-button-fluid.p-button-icon-only { + width: ${dt('button.icon.only.width')}; +} + +.p-button:not(:disabled):hover { + background: ${dt('button.primary.hover.background')}; + border: 1px solid ${dt('button.primary.hover.border.color')}; + color: ${dt('button.primary.hover.color')}; +} + +.p-button:not(:disabled):active { + background: ${dt('button.primary.active.background')}; + border: 1px solid ${dt('button.primary.active.border.color')}; + color: ${dt('button.primary.active.color')}; +} + +.p-button:focus-visible { + box-shadow: ${dt('button.primary.focus.ring.shadow')}; + outline: ${dt('button.focus.ring.width')} ${dt('button.focus.ring.style')} ${dt('button.primary.focus.ring.color')}; + outline-offset: ${dt('button.focus.ring.offset')}; +} + +.p-button .p-badge { + min-width: ${dt('button.badge.size')}; + height: ${dt('button.badge.size')}; + line-height: ${dt('button.badge.size')}; +} + +.p-button-raised { + box-shadow: ${dt('button.raised.shadow')}; +} + +.p-button-rounded { + border-radius: ${dt('button.rounded.border.radius')}; +} + +.p-button-secondary { + background: ${dt('button.secondary.background')}; + border: 1px solid ${dt('button.secondary.border.color')}; + color: ${dt('button.secondary.color')}; +} + +.p-button-secondary:not(:disabled):hover { + background: ${dt('button.secondary.hover.background')}; + border: 1px solid ${dt('button.secondary.hover.border.color')}; + color: ${dt('button.secondary.hover.color')}; +} + +.p-button-secondary:not(:disabled):active { + background: ${dt('button.secondary.active.background')}; + border: 1px solid ${dt('button.secondary.active.border.color')}; + color: ${dt('button.secondary.active.color')}; +} + +.p-button-secondary:focus-visible { + outline-color: ${dt('button.secondary.focus.ring.color')}; + box-shadow: ${dt('button.secondary.focus.ring.shadow')}; +} + +.p-button-success { + background: ${dt('button.success.background')}; + border: 1px solid ${dt('button.success.border.color')}; + color: ${dt('button.success.color')}; +} + +.p-button-success:not(:disabled):hover { + background: ${dt('button.success.hover.background')}; + border: 1px solid ${dt('button.success.hover.border.color')}; + color: ${dt('button.success.hover.color')}; +} + +.p-button-success:not(:disabled):active { + background: ${dt('button.success.active.background')}; + border: 1px solid ${dt('button.success.active.border.color')}; + color: ${dt('button.success.active.color')}; +} + +.p-button-success:focus-visible { + outline-color: ${dt('button.success.focus.ring.color')}; + box-shadow: ${dt('button.success.focus.ring.shadow')}; +} + +.p-button-info { + background: ${dt('button.info.background')}; + border: 1px solid ${dt('button.info.border.color')}; + color: ${dt('button.info.color')}; +} + +.p-button-info:not(:disabled):hover { + background: ${dt('button.info.hover.background')}; + border: 1px solid ${dt('button.info.hover.border.color')}; + color: ${dt('button.info.hover.color')}; +} + +.p-button-info:not(:disabled):active { + background: ${dt('button.info.active.background')}; + border: 1px solid ${dt('button.info.active.border.color')}; + color: ${dt('button.info.active.color')}; +} + +.p-button-info:focus-visible { + outline-color: ${dt('button.info.focus.ring.color')}; + box-shadow: ${dt('button.info.focus.ring.shadow')}; +} + +.p-button-warn { + background: ${dt('button.warn.background')}; + border: 1px solid ${dt('button.warn.border.color')}; + color: ${dt('button.warn.color')}; +} + +.p-button-warn:not(:disabled):hover { + background: ${dt('button.warn.hover.background')}; + border: 1px solid ${dt('button.warn.hover.border.color')}; + color: ${dt('button.warn.hover.color')}; +} + +.p-button-warn:not(:disabled):active { + background: ${dt('button.warn.active.background')}; + border: 1px solid ${dt('button.warn.active.border.color')}; + color: ${dt('button.warn.active.color')}; +} + +.p-button-warn:focus-visible { + outline-color: ${dt('button.warn.focus.ring.color')}; + box-shadow: ${dt('button.warn.focus.ring.shadow')}; +} + +.p-button-help { + background: ${dt('button.help.background')}; + border: 1px solid ${dt('button.help.border.color')}; + color: ${dt('button.help.color')}; +} + +.p-button-help:not(:disabled):hover { + background: ${dt('button.help.hover.background')}; + border: 1px solid ${dt('button.help.hover.border.color')}; + color: ${dt('button.help.hover.color')}; +} + +.p-button-help:not(:disabled):active { + background: ${dt('button.help.active.background')}; + border: 1px solid ${dt('button.help.active.border.color')}; + color: ${dt('button.help.active.color')}; +} + +.p-button-help:focus-visible { + outline-color: ${dt('button.help.focus.ring.color')}; + box-shadow: ${dt('button.help.focus.ring.shadow')}; +} + +.p-button-danger { + background: ${dt('button.danger.background')}; + border: 1px solid ${dt('button.danger.border.color')}; + color: ${dt('button.danger.color')}; +} + +.p-button-danger:not(:disabled):hover { + background: ${dt('button.danger.hover.background')}; + border: 1px solid ${dt('button.danger.hover.border.color')}; + color: ${dt('button.danger.hover.color')}; +} + +.p-button-danger:not(:disabled):active { + background: ${dt('button.danger.active.background')}; + border: 1px solid ${dt('button.danger.active.border.color')}; + color: ${dt('button.danger.active.color')}; +} + +.p-button-danger:focus-visible { + outline-color: ${dt('button.danger.focus.ring.color')}; + box-shadow: ${dt('button.danger.focus.ring.shadow')}; +} + +.p-button-contrast { + background: ${dt('button.contrast.background')}; + border: 1px solid ${dt('button.contrast.border.color')}; + color: ${dt('button.contrast.color')}; +} + +.p-button-contrast:not(:disabled):hover { + background: ${dt('button.contrast.hover.background')}; + border: 1px solid ${dt('button.contrast.hover.border.color')}; + color: ${dt('button.contrast.hover.color')}; +} + +.p-button-contrast:not(:disabled):active { + background: ${dt('button.contrast.active.background')}; + border: 1px solid ${dt('button.contrast.active.border.color')}; + color: ${dt('button.contrast.active.color')}; +} + +.p-button-contrast:focus-visible { + outline-color: ${dt('button.contrast.focus.ring.color')}; + box-shadow: ${dt('button.contrast.focus.ring.shadow')}; +} + +.p-button-outlined { + background: transparent; + border-color: ${dt('button.outlined.primary.border.color')}; + color: ${dt('button.outlined.primary.color')}; +} + +.p-button-outlined:not(:disabled):hover { + background: ${dt('button.outlined.primary.hover.background')}; + border-color: ${dt('button.outlined.primary.border.color')}; + color: ${dt('button.outlined.primary.color')}; +} + +.p-button-outlined:not(:disabled):active { + background: ${dt('button.outlined.primary.active.background')}; + border-color: ${dt('button.outlined.primary.border.color')}; + color: ${dt('button.outlined.primary.color')}; +} + +.p-button-outlined.p-button-secondary { + border-color: ${dt('button.outlined.secondary.border.color')}; + color: ${dt('button.outlined.secondary.color')}; +} + +.p-button-outlined.p-button-secondary:not(:disabled):hover { + background: ${dt('button.outlined.secondary.hover.background')}; + border-color: ${dt('button.outlined.secondary.border.color')}; + color: ${dt('button.outlined.secondary.color')}; +} + +.p-button-outlined.p-button-secondary:not(:disabled):active { + background: ${dt('button.outlined.secondary.active.background')}; + border-color: ${dt('button.outlined.secondary.border.color')}; + color: ${dt('button.outlined.secondary.color')}; +} + +.p-button-outlined.p-button-success { + border-color: ${dt('button.outlined.success.border.color')}; + color: ${dt('button.outlined.success.color')}; +} + +.p-button-outlined.p-button-success:not(:disabled):hover { + background: ${dt('button.outlined.success.hover.background')}; + border-color: ${dt('button.outlined.success.border.color')}; + color: ${dt('button.outlined.success.color')}; +} + +.p-button-outlined.p-button-success:not(:disabled):active { + background: ${dt('button.outlined.success.active.background')}; + border-color: ${dt('button.outlined.success.border.color')}; + color: ${dt('button.outlined.success.color')}; +} + +.p-button-outlined.p-button-info { + border-color: ${dt('button.outlined.info.border.color')}; + color: ${dt('button.outlined.info.color')}; +} + +.p-button-outlined.p-button-info:not(:disabled):hover { + background: ${dt('button.outlined.info.hover.background')}; + border-color: ${dt('button.outlined.info.border.color')}; + color: ${dt('button.outlined.info.color')}; +} + +.p-button-outlined.p-button-info:not(:disabled):active { + background: ${dt('button.outlined.info.active.background')}; + border-color: ${dt('button.outlined.info.border.color')}; + color: ${dt('button.outlined.info.color')}; +} + +.p-button-outlined.p-button-warn { + border-color: ${dt('button.outlined.warn.border.color')}; + color: ${dt('button.outlined.warn.color')}; +} + +.p-button-outlined.p-button-warn:not(:disabled):hover { + background: ${dt('button.outlined.warn.hover.background')}; + border-color: ${dt('button.outlined.warn.border.color')}; + color: ${dt('button.outlined.warn.color')}; +} + +.p-button-outlined.p-button-warn:not(:disabled):active { + background: ${dt('button.outlined.warn.active.background')}; + border-color: ${dt('button.outlined.warn.border.color')}; + color: ${dt('button.outlined.warn.color')}; +} + +.p-button-outlined.p-button-help { + border-color: ${dt('button.outlined.help.border.color')}; + color: ${dt('button.outlined.help.color')}; +} + +.p-button-outlined.p-button-help:not(:disabled):hover { + background: ${dt('button.outlined.help.hover.background')}; + border-color: ${dt('button.outlined.help.border.color')}; + color: ${dt('button.outlined.help.color')}; +} + +.p-button-outlined.p-button-help:not(:disabled):active { + background: ${dt('button.outlined.help.active.background')}; + border-color: ${dt('button.outlined.help.border.color')}; + color: ${dt('button.outlined.help.color')}; +} + +.p-button-outlined.p-button-danger { + border-color: ${dt('button.outlined.danger.border.color')}; + color: ${dt('button.outlined.danger.color')}; +} + +.p-button-outlined.p-button-danger:not(:disabled):hover { + background: ${dt('button.outlined.danger.hover.background')}; + border-color: ${dt('button.outlined.danger.border.color')}; + color: ${dt('button.outlined.danger.color')}; +} + +.p-button-outlined.p-button-danger:not(:disabled):active { + background: ${dt('button.outlined.danger.active.background')}; + border-color: ${dt('button.outlined.danger.border.color')}; + color: ${dt('button.outlined.danger.color')}; +} + +.p-button-outlined.p-button-contrast { + border-color: ${dt('button.outlined.contrast.border.color')}; + color: ${dt('button.outlined.contrast.color')}; +} + +.p-button-outlined.p-button-contrast:not(:disabled):hover { + background: ${dt('button.outlined.contrast.hover.background')}; + border-color: ${dt('button.outlined.contrast.border.color')}; + color: ${dt('button.outlined.contrast.color')}; +} + +.p-button-outlined.p-button-contrast:not(:disabled):active { + background: ${dt('button.outlined.contrast.active.background')}; + border-color: ${dt('button.outlined.contrast.border.color')}; + color: ${dt('button.outlined.contrast.color')}; +} + +.p-button-outlined.p-button-plain { + border-color: ${dt('button.outlined.plain.border.color')}; + color: ${dt('button.outlined.plain.color')}; +} + +.p-button-outlined.p-button-plain:not(:disabled):hover { + background: ${dt('button.outlined.plain.hover.background')}; + border-color: ${dt('button.outlined.plain.border.color')}; + color: ${dt('button.outlined.plain.color')}; +} + +.p-button-outlined.p-button-plain:not(:disabled):active { + background: ${dt('button.outlined.plain.active.background')}; + border-color: ${dt('button.outlined.plain.border.color')}; + color: ${dt('button.outlined.plain.color')}; +} + +.p-button-text { + background: transparent; + border-color: transparent; + color: ${dt('button.text.primary.color')}; +} + +.p-button-text:not(:disabled):hover { + background: ${dt('button.text.primary.hover.background')}; + border-color: transparent; + color: ${dt('button.text.primary.color')}; +} + +.p-button-text:not(:disabled):active { + background: ${dt('button.text.primary.active.background')}; + border-color: transparent; + color: ${dt('button.text.primary.color')}; +} + +.p-button-text.p-button-secondary { + background: transparent; + border-color: transparent; + color: ${dt('button.text.secondary.color')}; +} + +.p-button-text.p-button-secondary:not(:disabled):hover { + background: ${dt('button.text.secondary.hover.background')}; + border-color: transparent; + color: ${dt('button.text.secondary.color')}; +} + +.p-button-text.p-button-secondary:not(:disabled):active { + background: ${dt('button.text.secondary.active.background')}; + border-color: transparent; + color: ${dt('button.text.secondary.color')}; +} + +.p-button-text.p-button-success { + background: transparent; + border-color: transparent; + color: ${dt('button.text.success.color')}; +} + +.p-button-text.p-button-success:not(:disabled):hover { + background: ${dt('button.text.success.hover.background')}; + border-color: transparent; + color: ${dt('button.text.success.color')}; +} + +.p-button-text.p-button-success:not(:disabled):active { + background: ${dt('button.text.success.active.background')}; + border-color: transparent; + color: ${dt('button.text.success.color')}; +} + +.p-button-text.p-button-info { + background: transparent; + border-color: transparent; + color: ${dt('button.text.info.color')}; +} + +.p-button-text.p-button-info:not(:disabled):hover { + background: ${dt('button.text.info.hover.background')}; + border-color: transparent; + color: ${dt('button.text.info.color')}; +} + +.p-button-text.p-button-info:not(:disabled):active { + background: ${dt('button.text.info.active.background')}; + border-color: transparent; + color: ${dt('button.text.info.color')}; +} + +.p-button-text.p-button-warn { + background: transparent; + border-color: transparent; + color: ${dt('button.text.warn.color')}; +} + +.p-button-text.p-button-warn:not(:disabled):hover { + background: ${dt('button.text.warn.hover.background')}; + border-color: transparent; + color: ${dt('button.text.warn.color')}; +} + +.p-button-text.p-button-warn:not(:disabled):active { + background: ${dt('button.text.warn.active.background')}; + border-color: transparent; + color: ${dt('button.text.warn.color')}; +} + +.p-button-text.p-button-help { + background: transparent; + border-color: transparent; + color: ${dt('button.text.help.color')}; +} + +.p-button-text.p-button-help:not(:disabled):hover { + background: ${dt('button.text.help.hover.background')}; + border-color: transparent; + color: ${dt('button.text.help.color')}; +} + +.p-button-text.p-button-help:not(:disabled):active { + background: ${dt('button.text.help.active.background')}; + border-color: transparent; + color: ${dt('button.text.help.color')}; +} + +.p-button-text.p-button-danger { + background: transparent; + border-color: transparent; + color: ${dt('button.text.danger.color')}; +} + +.p-button-text.p-button-danger:not(:disabled):hover { + background: ${dt('button.text.danger.hover.background')}; + border-color: transparent; + color: ${dt('button.text.danger.color')}; +} + +.p-button-text.p-button-danger:not(:disabled):active { + background: ${dt('button.text.danger.active.background')}; + border-color: transparent; + color: ${dt('button.text.danger.color')}; +} + +.p-button-text.p-button-plain { + background: transparent; + border-color: transparent; + color: ${dt('button.text.plain.color')}; +} + +.p-button-text.p-button-plain:not(:disabled):hover { + background: ${dt('button.text.plain.hover.background')}; + border-color: transparent; + color: ${dt('button.text.plain.color')}; +} + +.p-button-text.p-button-plain:not(:disabled):active { + background: ${dt('button.text.plain.active.background')}; + border-color: transparent; + color: ${dt('button.text.plain.color')}; +} + +.p-button-link { + background: transparent; + border-color: transparent; + color: ${dt('button.link.color')}; +} + +.p-button-link:not(:disabled):hover { + background: transparent; + border-color: transparent; + color: ${dt('button.link.hover.color')}; +} + +.p-button-link:not(:disabled):hover .p-button-label { + text-decoration: underline; +} + +.p-button-link:not(:disabled):active { + background: transparent; + border-color: transparent; + color: ${dt('button.link.active.color')}; +} +`; + +const classes = { + root: ({ instance, props }) => [ + 'p-button p-component', + { + 'p-button-icon-only': instance.hasIcon && !props.label && !props.badge, + 'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label, + 'p-button-loading': props.loading, + 'p-button-link': props.link, + [`p-button-${props.severity}`]: props.severity, + 'p-button-raised': props.raised, + 'p-button-rounded': props.rounded, + 'p-button-text': props.text, + 'p-button-outlined': props.outlined, + 'p-button-sm': props.size === 'small', + 'p-button-lg': props.size === 'large', + 'p-button-plain': props.plain, + 'p-button-fluid': props.fluid + } + ], + loadingIcon: 'p-button-loading-icon', + icon: ({ props }) => [ + 'p-button-icon', + { + [`p-button-icon-${props.iconPos}`]: props.label + } + ], + label: 'p-button-label' +}; + +@Injectable() +export class ButtonStyle extends BaseStyle { + name = 'button'; + + theme = theme; + + classes = classes; +} diff --git a/src/app/components/buttongroup/buttongroup.ts b/src/app/components/buttongroup/buttongroup.ts index 24928036d1c..a83ad0881c9 100755 --- a/src/app/components/buttongroup/buttongroup.ts +++ b/src/app/components/buttongroup/buttongroup.ts @@ -1,17 +1,22 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, NgModule, ViewEncapsulation } from '@angular/core'; +import { BaseComponent } from 'primeng/basecomponent'; +import { ButtonGroupStyle } from './style/buttongroupstyle'; @Component({ selector: 'p-buttonGroup', template: ` - + `, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + providers: [ButtonGroupStyle] }) -export class ButtonGroup {} +export class ButtonGroup extends BaseComponent { + _componentStyle = inject(ButtonGroupStyle); +} @NgModule({ imports: [CommonModule], diff --git a/src/app/components/buttongroup/style/buttongroupstyle.ts b/src/app/components/buttongroup/style/buttongroupstyle.ts new file mode 100644 index 00000000000..d9848ab25d3 --- /dev/null +++ b/src/app/components/buttongroup/style/buttongroupstyle.ts @@ -0,0 +1,103 @@ +import { Injectable } from '@angular/core'; +import { BaseStyle } from 'primeng/base'; + +const theme = ({ dt }) => ` +.p-buttongroup .p-button { + margin: 0; +} + +.p-buttongroup .p-button:not(:last-child), +.p-buttongroup .p-button:not(:last-child):hover { + border-right: 0 none; +} + +.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; +} + +.p-buttongroup .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.p-buttongroup .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.p-buttongroup .p-button:focus { + position: relative; + z-index: 1; +} + +.p-buttongroup { + display:flex; +} + +.p-buttongroup > .p-button { + flex: 1; +} + +/* For PrimeNG */ + +.p-buttongroup .p-button:focus, +.p-buttongroup p-button:focus .p-button, +.p-buttonset .p-button:focus, +.p-buttonset .p-button:focus, +.p-buttonset p-button:focus .p-button, +.p-buttonset .p-button:focus { + position: relative; + z-index: 1; +} + +.p-buttongroup .p-button:not(:last-child), +.p-buttongroup .p-button:not(:last-child):hover, +.p-buttongroup p-button:not(:last-child) .p-button, +.p-buttongroup p-button:not(:last-child) .p-button:hover, +.p-buttonset .p-button:not(:last-child), +.p-buttonset .p-button:not(:last-child):hover, +.p-buttonset p-button:not(:last-child) .p-button, +.p-buttonset p-button:not(:last-child) .p-button:hover { + border-right: 0 none; +} + +.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type), +.p-buttongroup p-button:not(:first-of-type):not(:last-of-type) .p-button, +.p-buttonset .p-button:not(:first-of-type):not(:last-of-type), +.p-buttonset p-button:not(:first-of-type):not(:last-of-type) .p-button { + border-radius: 0; +} + +.p-buttongroup .p-button:first-of-type:not(:only-of-type), +.p-buttongroup p-button:first-of-type:not(:only-of-type) .p-button, +.p-buttonset .p-button:first-of-type:not(:only-of-type), +.p-buttonset p-button:first-of-type:not(:only-of-type) .p-button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.p-buttongroup .p-button:last-of-type:not(:only-of-type), +.p-buttongroup p-button:last-of-type:not(:only-of-type) .p-button, +.p-buttonset .p-button:last-of-type:not(:only-of-type), +.p-buttonset p-button:last-of-type:not(:only-of-type) .p-button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +p-button[iconpos='right'] spinnericon { + order: 1; +} +`; + +const classes = { + root: 'p-buttongroup p-component' +}; + +@Injectable() +export class ButtonGroupStyle extends BaseStyle { + name = 'buttongroup'; + + theme = theme; + + classes = classes; +} diff --git a/src/app/showcase/doc/button/badgedoc.ts b/src/app/showcase/doc/button/badgedoc.ts index b9cabeca489..9523274fc8b 100644 --- a/src/app/showcase/doc/button/badgedoc.ts +++ b/src/app/showcase/doc/button/badgedoc.ts @@ -9,7 +9,7 @@ import { Code } from '@domain/code';
- +
` diff --git a/src/app/showcase/doc/button/iconsonlydoc.ts b/src/app/showcase/doc/button/iconsonlydoc.ts index ec4611d921a..8ae6bb31819 100644 --- a/src/app/showcase/doc/button/iconsonlydoc.ts +++ b/src/app/showcase/doc/button/iconsonlydoc.ts @@ -13,7 +13,7 @@ import { Code } from '@domain/code'; - + @@ -22,7 +22,7 @@ import { Code } from '@domain/code'; - + @@ -31,7 +31,7 @@ import { Code } from '@domain/code'; - + @@ -63,7 +63,7 @@ export class IconOnlyDoc { - + @@ -71,7 +71,7 @@ export class IconOnlyDoc { - + @@ -79,7 +79,7 @@ export class IconOnlyDoc { - + @@ -105,7 +105,7 @@ export class IconOnlyDoc { - + @@ -114,7 +114,7 @@ export class IconOnlyDoc { - + @@ -123,7 +123,7 @@ export class IconOnlyDoc { - + diff --git a/src/app/showcase/doc/button/outlineddoc.ts b/src/app/showcase/doc/button/outlineddoc.ts index 0c4dec0405a..332db54bacb 100644 --- a/src/app/showcase/doc/button/outlineddoc.ts +++ b/src/app/showcase/doc/button/outlineddoc.ts @@ -12,7 +12,7 @@ import { Code } from '@domain/code'; - + @@ -26,7 +26,7 @@ export class OutlinedDoc { - + `, @@ -36,7 +36,7 @@ export class OutlinedDoc { - + diff --git a/src/app/showcase/doc/button/raiseddoc.ts b/src/app/showcase/doc/button/raiseddoc.ts index 240d7cc5c27..10e6a47b1cd 100644 --- a/src/app/showcase/doc/button/raiseddoc.ts +++ b/src/app/showcase/doc/button/raiseddoc.ts @@ -12,7 +12,7 @@ import { Code } from '@domain/code'; - + @@ -26,7 +26,7 @@ export class RaisedDoc { - + @@ -37,7 +37,7 @@ export class RaisedDoc { - + diff --git a/src/app/showcase/doc/button/raisedtextdoc.ts b/src/app/showcase/doc/button/raisedtextdoc.ts index dd417d2e013..a2708861f92 100644 --- a/src/app/showcase/doc/button/raisedtextdoc.ts +++ b/src/app/showcase/doc/button/raisedtextdoc.ts @@ -12,7 +12,7 @@ import { Code } from '@domain/code'; - + @@ -26,7 +26,7 @@ export class RaisedTextDoc { - + `, @@ -36,7 +36,7 @@ export class RaisedTextDoc { - + diff --git a/src/app/showcase/doc/button/roundeddoc.ts b/src/app/showcase/doc/button/roundeddoc.ts index 56435e8ef13..dfc3cf66a65 100644 --- a/src/app/showcase/doc/button/roundeddoc.ts +++ b/src/app/showcase/doc/button/roundeddoc.ts @@ -12,7 +12,7 @@ import { Code } from '@domain/code'; - + @@ -26,7 +26,7 @@ export class RoundedDoc { - + `, @@ -36,7 +36,7 @@ export class RoundedDoc { - + diff --git a/src/app/showcase/doc/button/severitydoc.ts b/src/app/showcase/doc/button/severitydoc.ts index 741dd935408..ee86257a18f 100644 --- a/src/app/showcase/doc/button/severitydoc.ts +++ b/src/app/showcase/doc/button/severitydoc.ts @@ -12,7 +12,7 @@ import { Code } from '@domain/code'; - + @@ -26,7 +26,7 @@ export class SeverityDoc { - + `, @@ -36,7 +36,7 @@ export class SeverityDoc { - + diff --git a/src/app/showcase/doc/button/textdoc.ts b/src/app/showcase/doc/button/textdoc.ts index f61bcb142ca..97701ae0667 100644 --- a/src/app/showcase/doc/button/textdoc.ts +++ b/src/app/showcase/doc/button/textdoc.ts @@ -12,7 +12,7 @@ import { Code } from '@domain/code'; - + @@ -26,7 +26,7 @@ export class TextDoc { - + `, @@ -36,7 +36,7 @@ export class TextDoc { - +