@dereekb/dbx-web 13.6.15 → 13.6.17

package/fesm2022/dereekb-dbx-web.mjs

@@ -1562,6 +1562,9 @@ class AbstractProgressButtonDirective {
             buttonType = config.buttonType;
         }
         switch (buttonType) {
+            case 'icon':
+                classes.push('mdc-icon-button mat-mdc-icon-button mat-unthemed');
+                break;
             case 'raised':
                 classes.push('mat-mdc-raised-button mdc-button--raised');
                 break;
@@ -1848,9 +1851,6 @@ class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective
     buttonCssArraySignal = computed(() => {
         const config = this.configSignal();
         const classes = [...this.baseCssClassSignal()];
-        if (config?.iconOnly) {
-            classes.push('mat-mdc-icon-button');
-        }
         if (config?.fab) {
             classes.push('dbx-progress-spinner-fab');
         }
@@ -1913,11 +1913,11 @@ class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective
         return hasCustomStyle ? { 'dbx-progress-spinner-custom': true } : undefined;
     }, ...(ngDevMode ? [{ debugName: "customSpinnerStyleClassSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressSpinnerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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      {{ 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 });
+    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      {{ 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, 40px);height:var(--mat-icon-button-state-layer-size, 40px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 40px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button:disabled,:host button.mat-mdc-button.mat-mdc-icon-button.disabled{color:var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, currentColor 38%, transparent))}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 40px}: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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressSpinnerButtonComponent, decorators: [{
             type: Component,
-            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      {{ 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"] }]
+            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      {{ 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, 40px);height:var(--mat-icon-button-state-layer-size, 40px);padding:0;--mat-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mat-icon-button-state-layer-size: 40px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button:disabled,:host button.mat-mdc-button.mat-mdc-icon-button.disabled{color:var(--mat-icon-button-disabled-icon-color, color-mix(in srgb, currentColor 38%, transparent))}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mat-icon-button-icon-size: 40px}: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"] }]
         }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 const importsAndExports$n = [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent];
@@ -2015,6 +2015,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
     flat = input(false, { ...(ngDevMode ? { debugName: "flat" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     fab = input(false, { ...(ngDevMode ? { debugName: "fab" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
+    customContent = input(false, { ...(ngDevMode ? { debugName: "customContent" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     allowClickPropagation = input(false, { ...(ngDevMode ? { debugName: "allowClickPropagation" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     mode = input(...(ngDevMode ? [undefined, { debugName: "mode" }] : /* istanbul ignore next */ []));
     typeSignal = computed(() => {
@@ -2061,7 +2062,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         const iconValue = this.iconSignal();
         const buttonIcon = iconValue ? { fontIcon: iconValue } : undefined;
         const textValue = this.textSignal();
-        const hasTextContent = !!textValue || this._hasProjectedContent;
+        const hasTextContent = !!textValue || this._hasProjectedContent || this.customContent();
         const isIconOnlyButton = buttonIcon && !hasTextContent;
         const fab = this.fab() || buttonStyle?.fab;
         const mode = this.mode() ?? buttonStyle?.mode;
@@ -2115,7 +2116,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         return config;
     }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxButtonComponent, isStandalone: true, selector: "dbx-button", inputs: { bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, spinnerColor: { classPropertyName: "spinnerColor", publicName: "spinnerColor", isSignal: true, isRequired: false, transformFunction: null }, customButtonColor: { classPropertyName: "customButtonColor", publicName: "customButtonColor", isSignal: true, isRequired: false, transformFunction: null }, customTextColor: { classPropertyName: "customTextColor", publicName: "customTextColor", isSignal: true, isRequired: false, transformFunction: null }, customSpinnerColor: { classPropertyName: "customSpinnerColor", publicName: "customSpinnerColor", isSignal: true, isRequired: false, transformFunction: null }, basic: { classPropertyName: "basic", publicName: "basic", isSignal: true, isRequired: false, transformFunction: null }, tonal: { classPropertyName: "tonal", publicName: "tonal", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, stroked: { classPropertyName: "stroked", publicName: "stroked", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, fab: { classPropertyName: "fab", publicName: "fab", isSignal: true, isRequired: false, transformFunction: null }, allowClickPropagation: { classPropertyName: "allowClickPropagation", publicName: "allowClickPropagation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxButtonComponent, isStandalone: true, selector: "dbx-button", inputs: { bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, spinnerColor: { classPropertyName: "spinnerColor", publicName: "spinnerColor", isSignal: true, isRequired: false, transformFunction: null }, customButtonColor: { classPropertyName: "customButtonColor", publicName: "customButtonColor", isSignal: true, isRequired: false, transformFunction: null }, customTextColor: { classPropertyName: "customTextColor", publicName: "customTextColor", isSignal: true, isRequired: false, transformFunction: null }, customSpinnerColor: { classPropertyName: "customSpinnerColor", publicName: "customSpinnerColor", isSignal: true, isRequired: false, transformFunction: null }, basic: { classPropertyName: "basic", publicName: "basic", isSignal: true, isRequired: false, transformFunction: null }, tonal: { classPropertyName: "tonal", publicName: "tonal", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, stroked: { classPropertyName: "stroked", publicName: "stroked", isSignal: true, isRequired: false, transformFunction: null }, flat: { classPropertyName: "flat", publicName: "flat", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, fab: { classPropertyName: "fab", publicName: "fab", isSignal: true, isRequired: false, transformFunction: null }, customContent: { classPropertyName: "customContent", publicName: "customContent", isSignal: true, isRequired: false, transformFunction: null }, allowClickPropagation: { classPropertyName: "allowClickPropagation", publicName: "allowClickPropagation", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
     @if (bar()) {
       <dbx-progress-bar-button (btnClick)="clickButton()" [config]="configSignal()" [allowClickPropagation]="allowClickPropagation()">
         <ng-template [ngTemplateOutlet]="content"></ng-template>
@@ -2155,7 +2156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [], 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 }] }] } });
+        }], ctorParameters: () => [], 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 }] }], customContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "customContent", required: false }] }], allowClickPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClickPropagation", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 const DEFAULT_FILTER_POPOVER_BUTTON_DISPLAY_CONTENT = {
     icon: 'filter_list'
@@ -2179,7 +2180,7 @@ class DbxFilterPopoverButtonComponent extends AbstractFilterPopoverButtonDirecti
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterPopoverButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxFilterPopoverButtonComponent, isStandalone: true, selector: "dbx-filter-popover-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, buttonDisplay: { classPropertyName: "buttonDisplay", publicName: "buttonDisplay", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <dbx-button #button (buttonClick)="showFilterPopover()" [buttonDisplay]="buttonDisplay()" [disabled]="disabled()" iconOnly></dbx-button>
-  `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterPopoverButtonComponent, decorators: [{
             type: Component,
@@ -2378,7 +2379,7 @@ class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective {
         this.filterSourceDirective.resetFilter();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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", "customContent", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterWrapperComponent, decorators: [{
             type: Component,
@@ -3515,7 +3516,7 @@ class DbxPopupControlButtonsComponent {
     }
     <dbx-button-spacer></dbx-button-spacer>
     <dbx-button [flat]="true" icon="close" color="warn" (buttonClick)="closeClicked()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxPopupControlButtonsComponent, decorators: [{
             type: Component,
@@ -4748,7 +4749,7 @@ class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent {
       <ng-content></ng-content>
     </dbx-button>
     <input #fileInput hidden type="file" [attr.accept]="buttonAcceptSignal() ?? null" [attr.multiple]="multipleAttributeSignal() ? '' : null" (change)="fileInputChanged()" />
-  `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFileUploadButtonComponent, decorators: [{
             type: Component,
@@ -5866,7 +5867,7 @@ class DbxActionSnackbarComponent {
         this.snackbarRef.dismiss();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxActionSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxActionSnackbarComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"snackbarStatusClassSignal()\">\n  <span>{{ message }}</span>\n  <dbx-spacer></dbx-spacer>\n  @switch (completeSignal()) {\n    @case (true) {\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    }\n    @case (false) {\n      @if (hasAction) {\n        <dbx-action dbxActionValue [dbxActionSource]=\"sourceInstanceSignal()\" [dbxActionSuccessHandler]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      }\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { kind: "directive", type: DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { 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: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "directive", type: DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxActionSnackbarComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"snackbarStatusClassSignal()\">\n  <span>{{ message }}</span>\n  <dbx-spacer></dbx-spacer>\n  @switch (completeSignal()) {\n    @case (true) {\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    }\n    @case (false) {\n      @if (hasAction) {\n        <dbx-action dbxActionValue [dbxActionSource]=\"sourceInstanceSignal()\" [dbxActionSuccessHandler]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      }\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { kind: "directive", type: DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "directive", type: DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxActionSnackbarComponent, decorators: [{
             type: Component,
@@ -6265,7 +6266,7 @@ class DbxActionUIRouterTransitionSafetyDialogComponent extends AbstractDialogDir
         <dbx-button-spacer></dbx-button-spacer>
       </ng-container>
     </dbx-prompt-confirm>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "directive", type: DbxActionErrorDirective, selector: "[dbxActionError]" }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "directive", type: DbxActionErrorDirective, selector: "[dbxActionError]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxActionUIRouterTransitionSafetyDialogComponent, decorators: [{
             type: Component,
@@ -7421,7 +7422,7 @@ class DbxDownloadBlobButtonComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDownloadBlobButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxDownloadBlobButtonComponent, isStandalone: true, selector: "dbx-download-blob-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <a #downloadButton [ngClass]="{ 'pointer-disabled': !downloadReadySignal() }" e [href]="fileUrlSignal()" [attr.download]="fileNameSignal()"><dbx-button [buttonDisplay]="buttonDisplaySignal()" [buttonStyle]="buttonStyleSignal()" [working]="!downloadReadySignal()" [disabled]="!downloadReadySignal()"></dbx-button></a>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DbxActionModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDownloadBlobButtonComponent, decorators: [{
             type: Component,
@@ -7711,7 +7712,7 @@ class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
         this.expandPreview.update((value) => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDownloadTextViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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", "customContent", "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
             type: Component,
@@ -9710,6 +9711,7 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
      * Whether or not to show the dropwdown caret for a menu
      */
     showMenuCaret = input(false, ...(ngDevMode ? [{ debugName: "showMenuCaret" }] : /* istanbul ignore next */ []));
+    fab = input(false, { ...(ngDevMode ? { debugName: "fab" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     navAlign = input('center', ...(ngDevMode ? [{ debugName: "navAlign" }] : /* istanbul ignore next */ []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     defaultIcon = input('menu', ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
@@ -9755,19 +9757,20 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
         }
     }), shareReplay(1));
     modeSignal = toSignal(this.mode$);
+    isIconModeSignal = toSignal(this.mode$.pipe(map((x) => x === 'icon'), distinctUntilChanged()));
     anchorsSignal = toSignal(this.anchors$);
     buttonDisplaySignal = toSignal(this.buttonDisplay$);
     hasNoAnchorsSignal = toSignal(this.hasNoAnchors$);
     nextRotateAnchorSignal = toSignal(this.nextRotateAnchor$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxNavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxNavbarComponent, isStandalone: true, selector: "dbx-navbar", inputs: { showMenuCaret: { classPropertyName: "showMenuCaret", publicName: "showMenuCaret", isSignal: true, isRequired: false, transformFunction: null }, navAlign: { classPropertyName: "navAlign", publicName: "navAlign", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultText: { classPropertyName: "defaultText", publicName: "defaultText", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { 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: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxNavbarComponent, isStandalone: true, selector: "dbx-navbar", inputs: { showMenuCaret: { classPropertyName: "showMenuCaret", publicName: "showMenuCaret", isSignal: true, isRequired: false, transformFunction: null }, fab: { classPropertyName: "fab", publicName: "fab", isSignal: true, isRequired: false, transformFunction: null }, navAlign: { classPropertyName: "navAlign", publicName: "navAlign", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultText: { classPropertyName: "defaultText", publicName: "defaultText", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [iconOnly]=\"isIconModeSignal()\" [fab]=\"fab()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\" allowClickPropagation>\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [iconOnly]=\"isIconModeSignal()\" [fab]=\"fab()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-navbar', host: {
                         class: 'dbx-navbar'
-                    }, imports: [DbxAnchorComponent, MatTabNav, MatTabNavPanel, MatTabLink, DbxButtonComponent, MatIconModule, MatMenu, MatMenuItem, NgClass, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n" }]
-        }], propDecorators: { showMenuCaret: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuCaret", required: false }] }], navAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAlign", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: false }] }], defaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultText", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
+                    }, imports: [DbxAnchorComponent, MatTabNav, MatTabNavPanel, MatTabLink, DbxButtonComponent, MatIconModule, MatMenu, MatMenuItem, NgClass, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [iconOnly]=\"isIconModeSignal()\" [fab]=\"fab()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\" allowClickPropagation>\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [iconOnly]=\"isIconModeSignal()\" [fab]=\"fab()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n" }]
+        }], propDecorators: { showMenuCaret: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuCaret", required: false }] }], fab: [{ type: i0.Input, args: [{ isSignal: true, alias: "fab", required: false }] }], navAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAlign", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: false }] }], defaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultText", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
 
 /**
  * Display modes for the sidenav based on screen width.
@@ -14607,7 +14610,7 @@ class DbxZipBlobPreviewComponent {
         this.selectedNodeSignal.set(selectedNode?.parent);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxZipBlobPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxZipBlobPreviewComponent, isStandalone: true, selector: "dbx-zip-blob-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, downloadFileName: { classPropertyName: "downloadFileName", publicName: "downloadFileName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (buttonClick)=\"backClicked()\"></dbx-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (buttonClick)=\"homeClicked()\"></dbx-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (mode()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n", dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { 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: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon", "color"] }, { kind: "directive", type: DbxListTitleGroupDirective, selector: "[dbxListTitleGroup]", inputs: ["dbxListTitleGroup"] }, { kind: "component", type: DbxZipPreviewEntryListComponent, selector: "dbx-zip-preview-file-entry-list" }, { kind: "component", type: DbxEmbedComponent, selector: "dbx-embed", inputs: ["embedElement", "sanitizeUrl", "srcUrl", "type", "blob"], outputs: ["embedElementChange", "sanitizeUrlChange", "srcUrlChange", "typeChange", "blobChange"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: DbxListItemAnchorModifierDirective, selector: "[dbxListItemAnchorModifier]", inputs: ["dbxListItemAnchorModifier"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxZipBlobPreviewComponent, isStandalone: true, selector: "dbx-zip-blob-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, downloadFileName: { classPropertyName: "downloadFileName", publicName: "downloadFileName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (buttonClick)=\"backClicked()\"></dbx-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (buttonClick)=\"homeClicked()\"></dbx-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (mode()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n", dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon", "color"] }, { kind: "directive", type: DbxListTitleGroupDirective, selector: "[dbxListTitleGroup]", inputs: ["dbxListTitleGroup"] }, { kind: "component", type: DbxZipPreviewEntryListComponent, selector: "dbx-zip-preview-file-entry-list" }, { kind: "component", type: DbxEmbedComponent, selector: "dbx-embed", inputs: ["embedElement", "sanitizeUrl", "srcUrl", "type", "blob"], outputs: ["embedElementChange", "sanitizeUrlChange", "srcUrlChange", "typeChange", "blobChange"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: DbxListItemAnchorModifierDirective, selector: "[dbxListItemAnchorModifier]", inputs: ["dbxListItemAnchorModifier"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxZipBlobPreviewComponent, decorators: [{
             type: Component,
@@ -15585,7 +15588,7 @@ class DbxHelpViewPopoverButtonComponent extends AbstractPopoverRefDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxHelpViewPopoverButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxHelpViewPopoverButtonComponent, isStandalone: true, selector: "dbx-help-view-popover-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <dbx-button #button (buttonClick)="showHelpPopover()" [buttonStyle]="buttonStyleSignal()" [buttonDisplay]="buttonDisplaySignal()"></dbx-button>
-  `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxHelpViewPopoverButtonComponent, decorators: [{
             type: Component,