@dereekb/dbx-web 13.6.2 → 13.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dereekb-dbx-web-table.mjs +0 -1
- package/fesm2022/dereekb-dbx-web-table.mjs.map +1 -1
- package/fesm2022/dereekb-dbx-web.mjs +87 -31
- package/fesm2022/dereekb-dbx-web.mjs.map +1 -1
- package/lib/button/_button.scss +24 -0
- package/lib/button/progress/bar.button.component.scss +48 -8
- package/lib/button/progress/spinner.button.component.scss +15 -6
- package/lib/layout/text/_text.scss +1 -1
- package/package.json +6 -6
- package/types/dereekb-dbx-web.d.ts +63 -8
|
@@ -1509,6 +1509,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
|
|
|
1509
1509
|
* Lightweight button that renders as either an icon-only Material icon button or a text button
|
|
1510
1510
|
* with an icon prefix, depending on whether text is provided.
|
|
1511
1511
|
*
|
|
1512
|
+
* @deprecated Use `dbx-button` instead. For icon-only buttons use `<dbx-button icon="settings" iconOnly>`.
|
|
1513
|
+
* For icon+text buttons use `<dbx-button icon="settings" text="Label">`. The `dbx-button` component
|
|
1514
|
+
* supports all the same inputs plus working/loading states, colors, and button style variants.
|
|
1515
|
+
*
|
|
1512
1516
|
* @example
|
|
1513
1517
|
* ```html
|
|
1514
1518
|
* <dbx-icon-button icon="settings" (buttonClick)="openSettings()"></dbx-icon-button>
|
|
@@ -1745,6 +1749,18 @@ class AbstractProgressButtonDirective {
|
|
|
1745
1749
|
const disabled = this.disabledSignal();
|
|
1746
1750
|
return working && !disabled;
|
|
1747
1751
|
}, ...(ngDevMode ? [{ debugName: "showProgressSignal" }] : /* istanbul ignore next */ []));
|
|
1752
|
+
/**
|
|
1753
|
+
* Whether a button echo overlay is active (iconOnly echo mode).
|
|
1754
|
+
*/
|
|
1755
|
+
echoActiveSignal = computed(() => {
|
|
1756
|
+
return this.configSignal()?.buttonEcho != null;
|
|
1757
|
+
}, ...(ngDevMode ? [{ debugName: "echoActiveSignal" }] : /* istanbul ignore next */ []));
|
|
1758
|
+
/**
|
|
1759
|
+
* Whether button content should be hidden via opacity (working spinner or echo overlay active).
|
|
1760
|
+
*/
|
|
1761
|
+
hideContentSignal = computed(() => {
|
|
1762
|
+
return this.showProgressSignal() || this.echoActiveSignal();
|
|
1763
|
+
}, ...(ngDevMode ? [{ debugName: "hideContentSignal" }] : /* istanbul ignore next */ []));
|
|
1748
1764
|
/**
|
|
1749
1765
|
* When true, the click handler will not call `stopImmediatePropagation()`,
|
|
1750
1766
|
* allowing the click event to continue bubbling. Needed for components like
|
|
@@ -1925,11 +1941,11 @@ class DbxProgressBarButtonComponent extends AbstractProgressButtonDirective {
|
|
|
1925
1941
|
buttonCss$ = this.baseCssClasses$.pipe(distinctUntilItemsHaveDifferentValues((x) => x[1]), map((x) => spaceSeparatedCssClasses(x[1])), shareReplay(1));
|
|
1926
1942
|
buttonCssSignal = toSignal(this.buttonCss$);
|
|
1927
1943
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1928
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxProgressBarButtonComponent, isStandalone: true, selector: "dbx-progress-bar-button,dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (configSignal()?.buttonIcon) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n </mat-icon>\n }\n <span>\n {{ configSignal()?.text }}\n <ng-content></ng-content>\n </span>\n @if (showProgressSignal()) {\n <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button
|
|
1944
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxProgressBarButtonComponent, isStandalone: true, selector: "dbx-progress-bar-button,dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (configSignal()?.buttonIcon) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [class.working]=\"echoActiveSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n </mat-icon>\n }\n <span [class.working]=\"echoActiveSignal()\">\n {{ configSignal()?.text }}\n <ng-content></ng-content>\n </span>\n @if (showProgressSignal()) {\n <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n }\n @if (echoActiveSignal()) {\n <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden;--mat-button-text-icon-offset: 0px;--mat-button-outlined-icon-offset: 0px;--mat-button-protected-icon-offset: 0px;--mat-button-filled-icon-offset: 0px;--mat-button-tonal-icon-offset: 0px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon{padding-right:5px;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.is-mat-icon{position:relative}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.working{opacity:0;transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span{transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span.working{opacity:0}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1929
1945
|
}
|
|
1930
1946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressBarButtonComponent, decorators: [{
|
|
1931
1947
|
type: Component,
|
|
1932
|
-
args: [{ selector: 'dbx-progress-bar-button,dbx-bar-button', imports: [MatButtonModule, DbxColorDirective, MatIconModule, MatProgressBar, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (configSignal()?.buttonIcon) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n </mat-icon>\n }\n <span>\n {{ configSignal()?.text }}\n <ng-content></ng-content>\n </span>\n @if (showProgressSignal()) {\n <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button
|
|
1948
|
+
args: [{ selector: 'dbx-progress-bar-button,dbx-bar-button', imports: [MatButtonModule, DbxColorDirective, MatIconModule, MatProgressBar, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (configSignal()?.buttonIcon) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [class.working]=\"echoActiveSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n </mat-icon>\n }\n <span [class.working]=\"echoActiveSignal()\">\n {{ configSignal()?.text }}\n <ng-content></ng-content>\n </span>\n @if (showProgressSignal()) {\n <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n }\n @if (echoActiveSignal()) {\n <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button{overflow:hidden;--mat-button-text-icon-offset: 0px;--mat-button-outlined-icon-offset: 0px;--mat-button-protected-icon-offset: 0px;--mat-button-filled-icon-offset: 0px;--mat-button-tonal-icon-offset: 0px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0;--mat-progress-bar-track-height: var(--dbx-progress-bar-button-height, 5px);--mat-progress-bar-active-indicator-height: var(--dbx-progress-bar-button-height, 5px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon{padding-right:5px;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.is-mat-icon{position:relative}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button mat-icon.mat-button-icon.working{opacity:0;transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span{transition:opacity .3s ease-in-out}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button span.working{opacity:0}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
|
|
1933
1949
|
}] });
|
|
1934
1950
|
|
|
1935
1951
|
/**
|
|
@@ -2001,18 +2017,18 @@ class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective
|
|
|
2001
2017
|
}, ...(ngDevMode ? [{ debugName: "showIconSignal" }] : /* istanbul ignore next */ []));
|
|
2002
2018
|
customSpinnerStyleSignal = computed(() => {
|
|
2003
2019
|
const customSpinnerColor = this.configSignal()?.customSpinnerColor;
|
|
2004
|
-
return customSpinnerColor ? {
|
|
2020
|
+
return customSpinnerColor ? { '--mat-progress-spinner-active-indicator-color': customSpinnerColor } : undefined;
|
|
2005
2021
|
}, ...(ngDevMode ? [{ debugName: "customSpinnerStyleSignal" }] : /* istanbul ignore next */ []));
|
|
2006
2022
|
customSpinnerStyleClassSignal = computed(() => {
|
|
2007
2023
|
const hasCustomStyle = Boolean(this.customSpinnerStyleSignal());
|
|
2008
2024
|
return hasCustomStyle ? { 'dbx-progress-spinner-custom': true } : undefined;
|
|
2009
2025
|
}, ...(ngDevMode ? [{ debugName: "customSpinnerStyleClassSignal" }] : /* istanbul ignore next */ []));
|
|
2010
2026
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressSpinnerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2011
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxProgressSpinnerButtonComponent, isStandalone: true, selector: "dbx-progress-spinner-button,dbx-spinner-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (showTextContentSignal()) {\n @if (showTextButtonIconSignal()) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"
|
|
2027
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxProgressSpinnerButtonComponent, isStandalone: true, selector: "dbx-progress-spinner-button,dbx-spinner-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (showTextContentSignal()) {\n @if (showTextButtonIconSignal()) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"hideContentSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n </mat-icon>\n }\n <span class=\"button-text\" [class.working]=\"hideContentSignal()\">\n <!-- TODO: Check ng-content has content, and if there is no ng-content input or text, then showTextContentSignal() should be false. -->\n {{ configSignal()?.text }}\n <ng-content></ng-content>\n </span>\n }\n @if (showIconSignal()) {\n <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n <ng-container>\n <mat-icon class=\"mat-fab-icon\" [class.working]=\"hideContentSignal()\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n </mat-icon>\n </ng-container>\n }\n @if (showProgressSignal()) {\n <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n }\n @if (echoActiveSignal()) {\n <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n }\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;width:var(--mat-icon-button-state-layer-size, 36px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mat-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}:host button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2012
2028
|
}
|
|
2013
2029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressSpinnerButtonComponent, decorators: [{
|
|
2014
2030
|
type: Component,
|
|
2015
|
-
args: [{ selector: 'dbx-progress-spinner-button,dbx-spinner-button', imports: [MatButtonModule, DbxColorDirective, MatIconModule, MatProgressSpinner, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (showTextContentSignal()) {\n @if (showTextButtonIconSignal()) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"
|
|
2031
|
+
args: [{ selector: 'dbx-progress-spinner-button,dbx-spinner-button', imports: [MatButtonModule, DbxColorDirective, MatIconModule, MatProgressSpinner, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button [dbxColor]=\"configSignal()?.buttonColor\" class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\" [attr.aria-label]=\"configSignal()?.ariaLabel\">\n @if (showTextContentSignal()) {\n @if (showTextButtonIconSignal()) {\n <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"hideContentSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n </mat-icon>\n }\n <span class=\"button-text\" [class.working]=\"hideContentSignal()\">\n <!-- TODO: Check ng-content has content, and if there is no ng-content input or text, then showTextContentSignal() should be false. -->\n {{ configSignal()?.text }}\n <ng-content></ng-content>\n </span>\n }\n @if (showIconSignal()) {\n <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n <ng-container>\n <mat-icon class=\"mat-fab-icon\" [class.working]=\"hideContentSignal()\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n </mat-icon>\n </ng-container>\n }\n @if (showProgressSignal()) {\n <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n }\n @if (echoActiveSignal()) {\n <span class=\"echo-overlay-icon material-symbols-outlined\">{{ configSignal()?.buttonEcho?.icon }}</span>\n }\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;width:var(--mat-icon-button-state-layer-size, 36px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mat-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-button-protected-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}:host button .echo-overlay-icon{position:absolute;inset:0;margin:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
|
|
2016
2032
|
}], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
|
|
2017
2033
|
|
|
2018
2034
|
const importsAndExports$n = [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent];
|
|
@@ -2168,6 +2184,33 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
|
|
|
2168
2184
|
disabled,
|
|
2169
2185
|
ariaLabel
|
|
2170
2186
|
};
|
|
2187
|
+
// Apply button echo when not working and not disabled
|
|
2188
|
+
const echo = this.buttonEchoSignal();
|
|
2189
|
+
if (echo && !working && !disabled) {
|
|
2190
|
+
if (echo.color) {
|
|
2191
|
+
config.buttonColor = echo.color;
|
|
2192
|
+
}
|
|
2193
|
+
if (echo.iconOnly && isIconOnlyButton) {
|
|
2194
|
+
// Icon-only button: directly swap icon and color
|
|
2195
|
+
if (echo.icon) {
|
|
2196
|
+
config.buttonIcon = { fontIcon: echo.icon };
|
|
2197
|
+
}
|
|
2198
|
+
}
|
|
2199
|
+
else if (echo.iconOnly) {
|
|
2200
|
+
// Text button with iconOnly echo: overlay rendering — text/icon fade out via opacity
|
|
2201
|
+
// (staying in DOM to preserve button width), echo icon shows as centered overlay
|
|
2202
|
+
config.buttonEcho = echo;
|
|
2203
|
+
}
|
|
2204
|
+
else {
|
|
2205
|
+
// Direct swap: replace icon and/or text in the config
|
|
2206
|
+
if (echo.icon) {
|
|
2207
|
+
config.buttonIcon = { fontIcon: echo.icon };
|
|
2208
|
+
}
|
|
2209
|
+
if (echo.text != null) {
|
|
2210
|
+
config.text = echo.text;
|
|
2211
|
+
}
|
|
2212
|
+
}
|
|
2213
|
+
}
|
|
2171
2214
|
return config;
|
|
2172
2215
|
}, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
|
|
2173
2216
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -2214,7 +2257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
|
|
|
2214
2257
|
}], propDecorators: { bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], spinnerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerColor", required: false }] }], customButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customButtonColor", required: false }] }], customTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTextColor", required: false }] }], customSpinnerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSpinnerColor", required: false }] }], basic: [{ type: i0.Input, args: [{ isSignal: true, alias: "basic", required: false }] }], tonal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tonal", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], stroked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroked", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], fab: [{ type: i0.Input, args: [{ isSignal: true, alias: "fab", required: false }] }], allowClickPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClickPropagation", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
2215
2258
|
|
|
2216
2259
|
/**
|
|
2217
|
-
* @deprecated
|
|
2260
|
+
* @deprecated Use `dbx-button` instead of `dbx-icon-button`. See {@link DbxIconButtonComponent} for migration guidance.
|
|
2218
2261
|
*/
|
|
2219
2262
|
class DbxIconButtonModule {
|
|
2220
2263
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxIconButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -2312,7 +2355,7 @@ class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective {
|
|
|
2312
2355
|
this.filterSourceDirective.resetFilter();
|
|
2313
2356
|
}
|
|
2314
2357
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2315
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFilterWrapperComponent, isStandalone: true, selector: "dbx-filter-wrapper", inputs: { showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, applyRaised: { classPropertyName: "applyRaised", publicName: "applyRaised", isSignal: true, isRequired: false, transformFunction: null }, applyIcon: { classPropertyName: "applyIcon", publicName: "applyIcon", isSignal: true, isRequired: false, transformFunction: null }, applyText: { classPropertyName: "applyText", publicName: "applyText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideActionStoreSource(null)], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n <div class=\"dbx-filter-wrapper-content\">\n <ng-content></ng-content>\n </div>\n @if (showButtons()) {\n <div fxLayout=\"row\">\n <dbx-button dbxActionButton [raised]=\"applyRaised()\" [text]=\"applyText()\" [icon]=\"applyIcon()\"></dbx-button>\n <div class=\"spacer\"></div>\n <button mat-icon-button (click)=\"resetFilter()\">\n <mat-icon>clear</mat-icon>\n </button>\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2358
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFilterWrapperComponent, isStandalone: true, selector: "dbx-filter-wrapper", inputs: { showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, applyRaised: { classPropertyName: "applyRaised", publicName: "applyRaised", isSignal: true, isRequired: false, transformFunction: null }, applyIcon: { classPropertyName: "applyIcon", publicName: "applyIcon", isSignal: true, isRequired: false, transformFunction: null }, applyText: { classPropertyName: "applyText", publicName: "applyText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideActionStoreSource(null)], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n <div class=\"dbx-filter-wrapper-content\">\n <ng-content></ng-content>\n </div>\n @if (showButtons()) {\n <div fxLayout=\"row\">\n <dbx-button dbxActionButton [raised]=\"applyRaised()\" [text]=\"applyText()\" [icon]=\"applyIcon()\"></dbx-button>\n <div class=\"spacer\"></div>\n <button mat-icon-button (click)=\"resetFilter()\">\n <mat-icon>clear</mat-icon>\n </button>\n </div>\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2316
2359
|
}
|
|
2317
2360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterWrapperComponent, decorators: [{
|
|
2318
2361
|
type: Component,
|
|
@@ -7646,7 +7689,7 @@ class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
|
|
|
7646
7689
|
this.expandPreview.update((value) => !value);
|
|
7647
7690
|
}
|
|
7648
7691
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDownloadTextViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n <div class=\"dbx-download-text-view-content\">\n @if (showTitle()) {\n <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n }\n @if (showPreview()) {\n <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n @if (showExpandPreviewButton()) {\n <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n }\n {{ contentDataSignal() }}\n </dbx-content-pit>\n }\n <div class=\"dbx-download-text-view-actions\">\n <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n @if (showDownloadButton()) {\n <dbx-button-spacer></dbx-button-spacer>\n <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n }\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n <div class=\"dbx-download-text-view-content\">\n @if (showTitle()) {\n <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n }\n @if (showPreview()) {\n <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n @if (showExpandPreviewButton()) {\n <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n }\n {{ contentDataSignal() }}\n </dbx-content-pit>\n }\n <div class=\"dbx-download-text-view-actions\">\n <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n @if (showDownloadButton()) {\n <dbx-button-spacer></dbx-button-spacer>\n <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n }\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7650
7693
|
}
|
|
7651
7694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
|
|
7652
7695
|
type: Component,
|
|
@@ -10901,7 +10944,6 @@ class DbxListView {
|
|
|
10901
10944
|
* @param sourceType - the component class to register as the DbxListView provider
|
|
10902
10945
|
* @returns an array of Angular providers that wire up the component as a DbxListView
|
|
10903
10946
|
*/
|
|
10904
|
-
// eslint-disable-next-line
|
|
10905
10947
|
function provideDbxListView(sourceType) {
|
|
10906
10948
|
// use of any here is allowed as typings are not relevant for providers
|
|
10907
10949
|
return [
|
|
@@ -13390,12 +13432,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
|
|
|
13390
13432
|
*
|
|
13391
13433
|
* Use the `center` input to vertically center the badge with the content.
|
|
13392
13434
|
*
|
|
13435
|
+
* Accepts either individual inputs or a single `config` object. Individual inputs
|
|
13436
|
+
* take precedence over config values when both are provided.
|
|
13437
|
+
*
|
|
13393
13438
|
* @example
|
|
13394
13439
|
* ```html
|
|
13395
13440
|
* <dbx-step-block [step]="1" header="Create Account" hint="Fill in the registration form.">
|
|
13396
13441
|
* <p>Enter your email and password to get started.</p>
|
|
13397
13442
|
* </dbx-step-block>
|
|
13398
13443
|
*
|
|
13444
|
+
* <dbx-step-block [config]="stepConfig">
|
|
13445
|
+
* <p>Content using a config object.</p>
|
|
13446
|
+
* </dbx-step-block>
|
|
13447
|
+
*
|
|
13399
13448
|
* <dbx-step-block [step]="2" color="accent" header="Custom Header Content">
|
|
13400
13449
|
* <span header>Extra header content</span>
|
|
13401
13450
|
* <p>Detail content goes here.</p>
|
|
@@ -13403,30 +13452,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
|
|
|
13403
13452
|
* ```
|
|
13404
13453
|
*/
|
|
13405
13454
|
class DbxStepBlockComponent {
|
|
13406
|
-
|
|
13455
|
+
config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
|
|
13456
|
+
step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
|
|
13407
13457
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
13408
13458
|
header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
|
|
13409
13459
|
hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
13410
|
-
color = input(
|
|
13411
|
-
center = input(
|
|
13460
|
+
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
|
|
13461
|
+
center = input(...(ngDevMode ? [undefined, { debugName: "center" }] : /* istanbul ignore next */ []));
|
|
13462
|
+
stepSignal = computed(() => this.step() ?? this.config()?.step ?? 1, ...(ngDevMode ? [{ debugName: "stepSignal" }] : /* istanbul ignore next */ []));
|
|
13463
|
+
iconSignal = computed(() => this.icon() ?? this.config()?.icon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
|
|
13464
|
+
headerSignal = computed(() => this.header() ?? this.config()?.header, ...(ngDevMode ? [{ debugName: "headerSignal" }] : /* istanbul ignore next */ []));
|
|
13465
|
+
hintSignal = computed(() => this.hint() ?? this.config()?.hint, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
|
|
13466
|
+
colorSignal = computed(() => this.color() ?? this.config()?.color ?? 'primary', ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
|
|
13467
|
+
centerSignal = computed(() => this.center() ?? this.config()?.center ?? false, ...(ngDevMode ? [{ debugName: "centerSignal" }] : /* istanbul ignore next */ []));
|
|
13412
13468
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxStepBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13413
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxStepBlockComponent, isStandalone: true, selector: "dbx-step-block", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-step-block-center": "
|
|
13414
|
-
<div class="dbx-step-block-badge" [dbxColor]="
|
|
13415
|
-
@if (
|
|
13416
|
-
<mat-icon>{{
|
|
13469
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxStepBlockComponent, isStandalone: true, selector: "dbx-step-block", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-step-block-center": "centerSignal()" }, classAttribute: "dbx-step-block d-block" }, ngImport: i0, template: `
|
|
13470
|
+
<div class="dbx-step-block-badge" [dbxColor]="colorSignal()">
|
|
13471
|
+
@if (iconSignal()) {
|
|
13472
|
+
<mat-icon>{{ iconSignal() }}</mat-icon>
|
|
13417
13473
|
} @else {
|
|
13418
|
-
{{
|
|
13474
|
+
{{ stepSignal() }}
|
|
13419
13475
|
}
|
|
13420
13476
|
</div>
|
|
13421
13477
|
<div class="dbx-step-block-content">
|
|
13422
|
-
@if (
|
|
13478
|
+
@if (headerSignal()) {
|
|
13423
13479
|
<div class="dbx-step-block-header">
|
|
13424
|
-
<span class="dbx-step-block-header-label">{{
|
|
13480
|
+
<span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
|
|
13425
13481
|
<ng-content select="[header]"></ng-content>
|
|
13426
13482
|
</div>
|
|
13427
13483
|
}
|
|
13428
|
-
@if (
|
|
13429
|
-
<span class="dbx-step-block-hint">{{
|
|
13484
|
+
@if (hintSignal()) {
|
|
13485
|
+
<span class="dbx-step-block-hint">{{ hintSignal() }}</span>
|
|
13430
13486
|
}
|
|
13431
13487
|
<ng-content></ng-content>
|
|
13432
13488
|
</div>
|
|
@@ -13437,35 +13493,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
|
|
|
13437
13493
|
args: [{
|
|
13438
13494
|
selector: 'dbx-step-block',
|
|
13439
13495
|
template: `
|
|
13440
|
-
<div class="dbx-step-block-badge" [dbxColor]="
|
|
13441
|
-
@if (
|
|
13442
|
-
<mat-icon>{{
|
|
13496
|
+
<div class="dbx-step-block-badge" [dbxColor]="colorSignal()">
|
|
13497
|
+
@if (iconSignal()) {
|
|
13498
|
+
<mat-icon>{{ iconSignal() }}</mat-icon>
|
|
13443
13499
|
} @else {
|
|
13444
|
-
{{
|
|
13500
|
+
{{ stepSignal() }}
|
|
13445
13501
|
}
|
|
13446
13502
|
</div>
|
|
13447
13503
|
<div class="dbx-step-block-content">
|
|
13448
|
-
@if (
|
|
13504
|
+
@if (headerSignal()) {
|
|
13449
13505
|
<div class="dbx-step-block-header">
|
|
13450
|
-
<span class="dbx-step-block-header-label">{{
|
|
13506
|
+
<span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
|
|
13451
13507
|
<ng-content select="[header]"></ng-content>
|
|
13452
13508
|
</div>
|
|
13453
13509
|
}
|
|
13454
|
-
@if (
|
|
13455
|
-
<span class="dbx-step-block-hint">{{
|
|
13510
|
+
@if (hintSignal()) {
|
|
13511
|
+
<span class="dbx-step-block-hint">{{ hintSignal() }}</span>
|
|
13456
13512
|
}
|
|
13457
13513
|
<ng-content></ng-content>
|
|
13458
13514
|
</div>
|
|
13459
13515
|
`,
|
|
13460
13516
|
host: {
|
|
13461
13517
|
class: 'dbx-step-block d-block',
|
|
13462
|
-
'[class.dbx-step-block-center]': '
|
|
13518
|
+
'[class.dbx-step-block-center]': 'centerSignal()'
|
|
13463
13519
|
},
|
|
13464
13520
|
imports: [MatIconModule, DbxColorDirective],
|
|
13465
13521
|
standalone: true,
|
|
13466
13522
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
13467
13523
|
}]
|
|
13468
|
-
}], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
|
|
13524
|
+
}], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
|
|
13469
13525
|
|
|
13470
13526
|
/**
|
|
13471
13527
|
* Adds inline spacing sized for icons, typically used to align text that sits next to icon-bearing siblings.
|