@dereekb/dbx-web 13.6.4 → 13.6.6

package/fesm2022/dereekb-dbx-web.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, input, inject, effect, Directive, NgModule, ChangeDetectionStrategy, Component, output, computed, HostListener, ElementRef, Injector, DestroyRef, signal, viewChild, InjectionToken, makeEnvironmentProviders, TemplateRef, model, SecurityContext, forwardRef, ViewContainerRef, booleanAttribute, Renderer2 } from '@angular/core';
 import { asPromise, cssClassesSet, isDefinedAndNotFalse, DASH_CHARACTER_PREFIX_INSTANCE, cssTokenVar, spaceSeparatedCssClasses, objectHasNoKeys, getValueFromGetter, firstValue, filterUndefinedValues, separateValues, splitFront, asDecisionFunction, SLASH_PATH_FILE_TYPE_SEPARATOR, filterMaybeArrayValues, mapIterable, toReadableError, isDefaultReadableError, MS_IN_SECOND, mergeObjects, build, ServerErrorResponse, UnauthorizedServerErrorResponse, makeTimer, MS_IN_MINUTE, toggleTimerRunning, unixDateTimeSecondsNumberForNow, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue, safeCompareEquality, addMilliseconds, isPast, asArray, slashPathDetails, mimeTypeForFileExtension, slashPathDirectoryTree, isMaybeNot, isNotFalse, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, invertMaybeBoolean, splitCommaSeparatedStringToSet, ZIP_FILE_MIME_TYPE, cachedGetter, sortByNumberFunction } from '@dereekb/util';
 import * as i1$2 from '@dereekb/dbx-core';
-import { completeOnDestroy, clean, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, cleanSubscription, AbstractDbxButtonDirective, provideDbxButton, dbxActionWorkProgress, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionContextStoreSourceInstance, cleanSubscriptionWithLockSet, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, cleanLoadingContext, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive, anchorTypeForAnchor } from '@dereekb/dbx-core';
+import { completeOnDestroy, clean, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, cleanSubscription, AbstractDbxButtonDirective, provideDbxButton, dbxActionWorkProgress, hasNonTrivialChildNodes, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionContextStoreSourceInstance, cleanSubscriptionWithLockSet, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, cleanLoadingContext, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive, anchorTypeForAnchor } from '@dereekb/dbx-core';
 import { NgPopoverRef, NgOverlayContainerService } from 'ng-overlay-container';
 import { of, map, BehaviorSubject, distinctUntilChanged, shareReplay, delay, Subject, first, startWith, filter, throttleTime, skip, defaultIfEmpty, combineLatest, switchMap, delayWhen, timer, asyncScheduler, from, firstValueFrom, mergeMap, race, tap, catchError, distinct, merge, exhaustMap } from 'rxjs';
 import { LockSet, filterMaybe, distinctUntilItemsHaveDifferentValues, skipAllInitialMaybe, maybeValueFromObservableOrValue, switchMapMaybeLoadingContextStream, LoadingStateType, loadingStateType, successResult, valueFromFinishedLoadingState, loadingStateContext, initialize, asObservable, isNot, mapForEach, SubscriptionObject, switchMapMaybe, listLoadingStateContext, isLoadingStateFinishedLoading, startWithBeginLoading, loadingStateFromObs, errorResult, beginLoading, distinctUntilHasDifferentValues } from '@dereekb/rxjs';
@@ -1941,11 +1941,11 @@ class DbxProgressBarButtonComponent extends AbstractProgressButtonDirective {
     buttonCss$ = this.baseCssClasses$.pipe(distinctUntilItemsHaveDifferentValues((x) => x[1]), map((x) => spaceSeparatedCssClasses(x[1])), shareReplay(1));
     buttonCssSignal = toSignal(this.buttonCss$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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.dbx-icon-no-text]=\"configSignal()?.hasTextContent === false\" [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  @if (!configSignal()?.fab && !configSignal()?.iconOnly && !(configSignal()?.hasTextContent === false && configSignal()?.buttonIcon)) {\n    <span [class.working]=\"echoActiveSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\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 mat-icon.mat-button-icon.dbx-icon-no-text{padding-right:0;margin-right:0;font-size:var(--mat-icon-button-icon-size, 24px);height:var(--mat-icon-button-icon-size, 24px);width:var(--mat-icon-button-icon-size, 24px)}: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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxProgressBarButtonComponent, decorators: [{
             type: Component,
-            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"] }]
+            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.dbx-icon-no-text]=\"configSignal()?.hasTextContent === false\" [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  @if (!configSignal()?.fab && !configSignal()?.iconOnly && !(configSignal()?.hasTextContent === false && configSignal()?.buttonIcon)) {\n    <span [class.working]=\"echoActiveSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\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 mat-icon.mat-button-icon.dbx-icon-no-text{padding-right:0;margin-right:0;font-size:var(--mat-icon-button-icon-size, 24px);height:var(--mat-icon-button-icon-size, 24px);width:var(--mat-icon-button-icon-size, 24px)}: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"] }]
         }] });
 
 /**
@@ -2003,7 +2003,12 @@ class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective
     buttonCssSignal = toSignal(this.buttonCss$);
     showTextContentSignal = computed(() => {
         const config = this.configSignal();
-        return !(config?.fab || config?.iconOnly);
+        // Hide text area for FAB, icon-only, or when an icon is present with no text content.
+        // Do not hide when there is no icon, as projected content (ng-content) may be present
+        // even when hasTextContent is false (e.g. dynamically created components where
+        // projected content detection at constructor time is unreliable).
+        const isIconWithNoTextContent = config?.hasTextContent === false && config?.buttonIcon;
+        return !config?.fab && !config?.iconOnly && !isIconWithNoTextContent;
     }, ...(ngDevMode ? [{ debugName: "showTextContentSignal" }] : /* istanbul ignore next */ []));
     showTextButtonIconSignal = computed(() => {
         const config = this.configSignal();
@@ -2024,11 +2029,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      <!-- 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 });
+    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 });
 }
 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      <!-- 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"] }]
+            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"] }]
         }], propDecorators: { buttonRef: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 const importsAndExports$n = [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent];
@@ -2101,6 +2106,16 @@ function provideDbxProgressButtonGlobalConfig(config) {
  * ```
  */
 class DbxButtonComponent extends AbstractDbxButtonDirective {
+    /**
+     * Whether the host element has projected content (checked at construction time,
+     * before Angular moves the nodes for content projection).
+     */
+    _hasProjectedContent;
+    constructor() {
+        super();
+        const el = inject((ElementRef));
+        this._hasProjectedContent = hasNonTrivialChildNodes(el.nativeElement);
+    }
     bar = input(false, { ...(ngDevMode ? { debugName: "bar" } : /* istanbul ignore next */ {}), transform: isDefinedAndNotFalse });
     type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
     buttonStyle = input(...(ngDevMode ? [undefined, { debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
@@ -2162,7 +2177,8 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         const iconValue = this.iconSignal();
         const buttonIcon = iconValue ? { fontIcon: iconValue } : undefined;
         const textValue = this.textSignal();
-        const isIconOnlyButton = buttonIcon && !textValue;
+        const hasTextContent = !!textValue || this._hasProjectedContent;
+        const isIconOnlyButton = buttonIcon && !hasTextContent;
         const fab = this.fab() || buttonStyle?.fab;
         const mode = this.mode() ?? buttonStyle?.mode;
         const working = this.workingSignal();
@@ -2175,6 +2191,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
             customStyle,
             customClass: 'dbx-button ' + (isIconOnlyButton ? 'dbx-button-no-text' : ''),
             text: textValue ?? '',
+            hasTextContent,
             buttonType,
             buttonColor,
             barColor: 'accent',
@@ -2213,7 +2230,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: null, target: i0.ɵɵFactoryTarget.Component });
+    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: `
     @if (bar()) {
       <dbx-progress-bar-button (btnClick)="clickButton()" [config]="configSignal()" [allowClickPropagation]="allowClickPropagation()">
@@ -2254,7 +2271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], 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 }] }], allowClickPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClickPropagation", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 /**
  * @deprecated Use `dbx-button` instead of `dbx-icon-button`. See {@link DbxIconButtonComponent} for migration guidance.