@dereekb/dbx-web 12.4.5 → 12.5.0

package/fesm2022/dereekb-dbx-web.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Injectable, input, inject, effect, Directive, NgModule, Component, output, computed, HostListener, InjectionToken, signal, ChangeDetectionStrategy, ElementRef, Injector, DestroyRef, viewChild, makeEnvironmentProviders, TemplateRef, SecurityContext, forwardRef, ViewContainerRef, ChangeDetectorRef, Inject, Renderer2 } from '@angular/core';
+import { DASH_CHARACTER_PREFIX_INSTANCE, asPromise, cssClassesSet, isDefinedAndNotFalse, 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, unixTimeNumberForNow, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue, modifier, maybeModifierMapToFunction, invertMaybeBoolean, isMaybeNot, isNotFalse, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, asArray, makeValuesGroupMap, compareWithMappedValuesFunction, splitCommaSeparatedStringToSet } from '@dereekb/util';
 import * as i1$2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, AbstractDbxButtonDirective, provideDbxButton, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, DbxActionContextStoreSourceInstance, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, DbxActionValueStreamDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, anchorTypeForAnchor, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive } from '@dereekb/dbx-core';
-import { DASH_CHARACTER_PREFIX_INSTANCE, asPromise, cssClassesSet, spaceSeparatedCssClasses, isDefinedAndNotFalse, objectHasNoKeys, getValueFromGetter, firstValue, filterUndefinedValues, filterMaybeArrayValues, mapIterable, toReadableError, isDefaultReadableError, MS_IN_SECOND, mergeObjects, build, ServerErrorResponse, UnauthorizedServerErrorResponse, makeTimer, MS_IN_MINUTE, toggleTimerRunning, unixTimeNumberForNow, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue, modifier, maybeModifierMapToFunction, invertMaybeBoolean, isMaybeNot, isNotFalse, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, asArray, makeValuesGroupMap, compareWithMappedValuesFunction, splitCommaSeparatedStringToSet } from '@dereekb/util';
+import { AbstractSubscriptionDirective, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, AbstractDbxButtonDirective, provideDbxButton, dbxActionWorkProgress, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionContextStoreSourceInstance, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, DbxActionValueStreamDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, anchorTypeForAnchor, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive } from '@dereekb/dbx-core';
 import { NgPopoverRef, NgOverlayContainerService } from 'ng-overlay-container';
 import { of, map, BehaviorSubject, distinctUntilChanged, shareReplay, delay, switchMap, combineLatest, Subject, first, startWith, filter, throttleTime, skip, defaultIfEmpty, delayWhen, timer, asyncScheduler, from, firstValueFrom, mergeMap, race, tap, catchError, merge, exhaustMap, distinct } from 'rxjs';
 import { filterMaybe, asObservable, LockSet, SubscriptionObject, distinctUntilItemsHaveDifferentValues, skipAllInitialMaybe, maybeValueFromObservableOrValue, switchMapMaybeLoadingContextStream, loadingStateContext, LoadingStateType, loadingStateType, successResult, valueFromFinishedLoadingState, mapForEach, switchMapMaybe, listLoadingStateContext, isLoadingStateFinishedLoading, startWithBeginLoading, initialize, isNot } from '@dereekb/rxjs';
@@ -1530,16 +1530,61 @@ class AbstractProgressButtonDirective extends AbstractSubscriptionDirective {
         return classes;
     });
     baseCssClasses$ = toObservable(this.baseCssClassSignal);
-    workingSignal = computed(() => (this.working() || this.configSignal()?.working) ?? false);
-    disabledSignal = computed(() => (this.disabled() || this.configSignal()?.disabled) ?? false);
+    workingProgressSignal = computed(() => {
+        const working = this.working();
+        const config = this.configSignal();
+        const configWorking = config?.working;
+        const workingProgress = dbxActionWorkProgress([working, configWorking], config?.value);
+        return workingProgress;
+    });
+    isWorkingSignal = computed(() => isDefinedAndNotFalse(this.workingProgressSignal()));
+    workingValueSignal = computed(() => {
+        const working = this.workingProgressSignal();
+        let result;
+        if (typeof working === 'number') {
+            result = working;
+        }
+        return result;
+    });
+    modeSignal = computed(() => {
+        const config = this.configSignal();
+        const workingValue = this.workingValueSignal();
+        const mode = config?.mode;
+        let result;
+        if (!mode) {
+            if (workingValue != null) {
+                result = 'determinate';
+            }
+            else {
+                result = 'indeterminate';
+            }
+        }
+        else {
+            result = mode;
+        }
+        return result;
+    });
+    disabledSignal = computed(() => {
+        const disabled = this.disabled();
+        const configDisabled = this.configSignal()?.disabled;
+        return disabled || configDisabled;
+    });
     buttonTypeAttributeSignal = computed(() => {
         const options = this.configSignal();
         return options?.buttonTypeAttribute ?? options?.type;
     });
-    buttonDisabledSignal = computed(() => this.workingSignal() || this.disabledSignal());
-    showProgressSignal = computed(() => this.workingSignal() && !this.disabledSignal());
+    buttonDisabledSignal = computed(() => {
+        const working = this.isWorkingSignal();
+        const disabled = this.disabledSignal();
+        return working || disabled;
+    });
+    showProgressSignal = computed(() => {
+        const working = this.isWorkingSignal();
+        const disabled = this.disabledSignal();
+        return working && !disabled;
+    });
     handleClick(event) {
-        const working = this.workingSignal();
+        const working = this.isWorkingSignal();
         const disabled = this.disabledSignal();
         if (!working && !disabled) {
             this.btnClick.emit(event);
@@ -1560,11 +1605,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: "18.2.13", ngImport: i0, type: DbxProgressBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxProgressBarButtonComponent, isStandalone: true, selector: "dbx-progress-bar-button,dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"configSignal()?.mode!\" [value]=\"configSignal()?.value!\"></mat-progress-bar>\n  }\n</button>\n", styles: [":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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.2.13", type: DbxProgressBarButtonComponent, isStandalone: true, selector: "dbx-progress-bar-button,dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.2.13", ngImport: i0, type: DbxProgressBarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-progress-bar-button,dbx-bar-button', imports: [MatButtonModule, MatIconModule, MatProgressBar, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"configSignal()?.mode!\" [value]=\"configSignal()?.value!\"></mat-progress-bar>\n  }\n</button>\n", styles: [":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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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, MatIconModule, MatProgressBar, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button class=\"dbx-base-button dbx-progress-bar-button\" mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (configSignal()?.buttonIcon) {\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet!\" [ngClass]=\"configSignal()?.buttonIcon?.customClass!\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.buttonIcon?.inline!\">\n      {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n    </mat-icon>\n  }\n  <span>\n    {{ configSignal()?.text }}\n    <ng-content></ng-content>\n  </span>\n  @if (showProgressSignal()) {\n    <mat-progress-bar class=\"bar\" [color]=\"configSignal()?.barColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\"></mat-progress-bar>\n  }\n</button>\n", styles: [":host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button.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}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-progress-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\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"] }]
         }] });
 
 class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective {
@@ -1633,11 +1678,11 @@ class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective
         return hasCustomStyle ? { 'dbx-progress-spinner-custom': true } : undefined;
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxProgressSpinnerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (showTextSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\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\" [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]=\"configSignal()?.mode!\" [value]=\"configSignal()?.value!\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\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;--mdc-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mdc-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mdc-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mdc-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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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-protected-button-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}\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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.2.13", 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 class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (showTextSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\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\" [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</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;--mdc-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mdc-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mdc-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mdc-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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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-protected-button-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}\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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "18.2.13", ngImport: i0, type: DbxProgressSpinnerButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-progress-spinner-button,dbx-spinner-button', imports: [MatButtonModule, MatIconModule, MatProgressSpinner, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (showTextSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\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\" [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]=\"configSignal()?.mode!\" [value]=\"configSignal()?.value!\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\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;--mdc-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mdc-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mdc-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mdc-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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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-protected-button-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}\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, MatIconModule, MatProgressSpinner, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (showTextSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [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]=\"showProgressSignal()\">\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\" [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</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;--mdc-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mdc-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mdc-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mdc-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 .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}: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-protected-button-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}\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"] }]
         }] });
 
 const importsAndExports$s = [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent];
@@ -1687,6 +1732,7 @@ var DbxButtonDisplayType;
  * Complex button that supports loading states.
  */
 class DbxButtonComponent extends AbstractDbxButtonDirective {
+    bar = input(false, { transform: isDefinedAndNotFalse });
     type = input();
     buttonStyle = input();
     color = input(undefined);
@@ -1700,6 +1746,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
     flat = input(false, { transform: isDefinedAndNotFalse });
     iconOnly = input(false, { transform: isDefinedAndNotFalse });
     fab = input(false, { transform: isDefinedAndNotFalse });
+    mode = input();
     typeSignal = computed(() => {
         const style = this.buttonStyle();
         let type = this.type() ?? style?.type;
@@ -1723,37 +1770,40 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
     configSignal = computed(() => {
         // configure custom style
         const customStyle = {};
-        const style = this.buttonStyle();
-        const customButtonColorValue = this.customButtonColor() ?? style?.customButtonColor;
+        const buttonStyle = this.buttonStyle();
+        const customButtonColorValue = this.customButtonColor() ?? buttonStyle?.customButtonColor;
         if (customButtonColorValue) {
             customStyle['background'] = customButtonColorValue;
         }
-        const customTextColorValue = this.customTextColor() ?? style?.customTextColor;
+        const customTextColorValue = this.customTextColor() ?? buttonStyle?.customTextColor;
         if (customTextColorValue) {
             customStyle['color'] = customTextColorValue;
         }
-        const customSpinnerColorValue = this.customSpinnerColor() ?? style?.customSpinnerColor;
+        const customSpinnerColorValue = this.customSpinnerColor() ?? buttonStyle?.customSpinnerColor;
         const customSpinnerColor = customSpinnerColorValue ?? customTextColorValue;
-        const buttonColor = this.color() ?? style?.color;
-        const spinnerColor = this.spinnerColor() ?? style?.spinnerColor ?? buttonColor;
+        const buttonColor = this.color() ?? buttonStyle?.color;
+        const spinnerColor = this.spinnerColor() ?? buttonStyle?.spinnerColor ?? buttonColor;
         const disabledSignalValue = this.disabledSignal();
-        const disabled = !this.workingSignal() && disabledSignalValue; // Only disabled if we're not working, in order to show the animation.
+        const disabled = !this.isWorkingSignal() && disabledSignalValue; // Only disabled if we're not working, in order to show the animation.
         const iconValue = this.iconSignal();
         const buttonIcon = iconValue ? { fontIcon: iconValue } : undefined;
         const textValue = this.textSignal();
         const isIconOnlyButton = buttonIcon && !textValue;
-        const fab = this.fab() || style?.fab;
+        const fab = this.fab() || buttonStyle?.fab;
+        const mode = this.mode() ?? buttonStyle?.mode;
+        const working = this.workingSignal();
+        const buttonType = this.typeSignal();
         const config = {
             fab,
-            working: this.workingSignal(),
+            working,
             buttonIcon,
             customStyle,
             customClass: 'dbx-button ' + (isIconOnlyButton ? 'dbx-button-no-text' : ''),
             text: textValue ?? '',
-            buttonType: this.typeSignal(),
+            buttonType,
             buttonColor,
             barColor: 'accent',
-            mode: 'indeterminate',
+            mode,
             spinnerColor,
             customSpinnerColor,
             disabled
@@ -1761,23 +1811,43 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
         return config;
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxButtonComponent, isStandalone: true, selector: "dbx-button", inputs: { 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 }, 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 } }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
-    <dbx-progress-spinner-button (btnClick)="clickButton()" [config]="configSignal()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }, 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 }, 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()">
+        <ng-template [ngTemplateOutlet]="content"></ng-template>
+      </dbx-progress-bar-button>
+    } @else {
+      <dbx-progress-spinner-button (btnClick)="clickButton()" [config]="configSignal()">
+        <ng-template [ngTemplateOutlet]="content"></ng-template>
+      </dbx-progress-spinner-button>
+    }
+    <!-- Content -->
+    <ng-template #content>
       <ng-content></ng-content>
-    </dbx-progress-spinner-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxProgressSpinnerButtonComponent, selector: "dbx-progress-spinner-button,dbx-spinner-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxProgressSpinnerButtonComponent, selector: "dbx-progress-spinner-button,dbx-spinner-button" }, { kind: "component", type: DbxProgressBarButtonComponent, selector: "dbx-progress-bar-button,dbx-bar-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-button',
                     template: `
-    <dbx-progress-spinner-button (btnClick)="clickButton()" [config]="configSignal()">
+    @if (bar()) {
+      <dbx-progress-bar-button (btnClick)="clickButton()" [config]="configSignal()">
+        <ng-template [ngTemplateOutlet]="content"></ng-template>
+      </dbx-progress-bar-button>
+    } @else {
+      <dbx-progress-spinner-button (btnClick)="clickButton()" [config]="configSignal()">
+        <ng-template [ngTemplateOutlet]="content"></ng-template>
+      </dbx-progress-spinner-button>
+    }
+    <!-- Content -->
+    <ng-template #content>
       <ng-content></ng-content>
-    </dbx-progress-spinner-button>
+    </ng-template>
   `,
                     providers: provideDbxButton(DbxButtonComponent),
-                    imports: [DbxProgressSpinnerButtonComponent],
+                    imports: [DbxProgressSpinnerButtonComponent, DbxProgressBarButtonComponent, NgTemplateOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
@@ -1873,7 +1943,7 @@ class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective {
         this.filterSourceDirective.resetFilter();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFilterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFilterWrapperComponent, isStandalone: true, selector: "dbx-filter-wrapper", inputs: { showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, applyRaised: { classPropertyName: "applyRaised", publicName: "applyRaised", isSignal: true, isRequired: false, transformFunction: null }, applyIcon: { classPropertyName: "applyIcon", publicName: "applyIcon", isSignal: true, isRequired: false, transformFunction: null }, applyText: { classPropertyName: "applyText", publicName: "applyText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideActionStoreSource(null)], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  @if (showButtons()) {\n    <div fxLayout=\"row\">\n      <dbx-button dbxActionButton [raised]=\"applyRaised()\" [text]=\"applyText()\" [icon]=\"applyIcon()\"></dbx-button>\n      <div class=\"spacer\"></div>\n      <button mat-icon-button (click)=\"resetFilter()\">\n        <mat-icon>clear</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "18.2.13", type: DbxFilterWrapperComponent, isStandalone: true, selector: "dbx-filter-wrapper", inputs: { showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, applyRaised: { classPropertyName: "applyRaised", publicName: "applyRaised", isSignal: true, isRequired: false, transformFunction: null }, applyIcon: { classPropertyName: "applyIcon", publicName: "applyIcon", isSignal: true, isRequired: false, transformFunction: null }, applyText: { classPropertyName: "applyText", publicName: "applyText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideActionStoreSource(null)], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  @if (showButtons()) {\n    <div fxLayout=\"row\">\n      <dbx-button dbxActionButton [raised]=\"applyRaised()\" [text]=\"applyText()\" [icon]=\"applyIcon()\"></dbx-button>\n      <div class=\"spacer\"></div>\n      <button mat-icon-button (click)=\"resetFilter()\">\n        <mat-icon>clear</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxButtonModule }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "18.2.13", ngImport: i0, type: DbxFilterWrapperComponent, decorators: [{
             type: Component,
@@ -2639,7 +2709,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: ["type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }, { 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", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPopupControlButtonsComponent, decorators: [{
             type: Component,
@@ -3303,6 +3373,521 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class AbstractDbxFileUploadComponent {
+    /**
+     * Whether or not multiple files can be uploaded.
+     */
+    multiple = input(undefined, { transform: (x) => x === '' || x });
+    /**
+     * Accepted file types filter.
+     */
+    accept = input([]);
+    /**
+     * This disabled is input-only
+     */
+    disabled = input();
+    /**
+     * This working is input-only
+     */
+    working = input();
+    /**
+     * This signal is set by setMultiple
+     */
+    _multipleSignal = signal(undefined);
+    /**
+     * This signal is set by setAccept
+     */
+    _acceptSignal = signal(undefined);
+    /**
+     * This signal is set by setDisabled
+     */
+    _disabledSignal = signal(undefined);
+    /**
+     * This signal is set by setWorking
+     */
+    _workingSignal = signal(undefined);
+    multipleSignal = computed(() => {
+        const multipleInput = this.multiple();
+        const multipleSignal = this._multipleSignal();
+        return multipleSignal ?? multipleInput;
+    });
+    acceptSignal = computed(() => {
+        const acceptInput = this.accept();
+        const acceptSignal = this._acceptSignal();
+        return acceptSignal ?? acceptInput;
+    });
+    disabledSignal = computed(() => {
+        const disabledInput = this.disabled();
+        const disabledSignal = this._disabledSignal();
+        const workingSignal = this.isWorkingSignal();
+        // disabled if any are true
+        return disabledInput || disabledSignal || workingSignal;
+    });
+    workingSignal = computed(() => {
+        const workingInput = this.working();
+        const workingSignal = this._workingSignal();
+        return workingSignal ?? workingInput;
+    });
+    isWorkingSignal = computed(() => {
+        const working = this.workingSignal();
+        return isDefinedAndNotFalse(working);
+    });
+    // MARK: DbxUploadActionCompatable
+    setDisabled(disabled) {
+        this._disabledSignal.set(disabled);
+    }
+    setWorking(working) {
+        this._workingSignal.set(working);
+    }
+    setMultiple(multiple) {
+        this._multipleSignal.set(multiple);
+    }
+    setAccept(accept) {
+        this._acceptSignal.set(accept);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractDbxFileUploadComponent, isStandalone: true, inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, working: { classPropertyName: "working", publicName: "working", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxFileUploadComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Returns a string that can be used as the "accept" attribute of a file input element.
+ *
+ * @param accept
+ * @returns
+ */
+function fileAcceptString(accept) {
+    return typeof accept === 'string' ? accept : accept.join(',');
+}
+function fileAcceptFilterTypeStringArray(accept) {
+    return typeof accept === 'string' ? accept.split(',').map((x) => x.trim()) : accept;
+}
+/**
+ * Creates a FileArrayAcceptMatchFunction from the input.
+ */
+function fileArrayAcceptMatchFunction(config) {
+    const multiple = config.multiple ?? true;
+    const isAcceptedFunction = typeof config.accept === 'function' ? config.accept : fileAcceptFunction(config.accept);
+    return (input) => {
+        const { included: acceptedType, excluded: rejectedType } = separateValues(input, isAcceptedFunction);
+        let accepted = acceptedType;
+        let rejected = rejectedType;
+        if (!multiple) {
+            const front = splitFront(acceptedType, 1);
+            accepted = front.front;
+            rejected = [...rejectedType, ...front.remaining];
+        }
+        return { multiple, input, accepted, rejected, acceptedType, rejectedType };
+    };
+}
+/**
+ * Creates a FileAcceptFunction from the input.
+ *
+ * @param accept
+ * @returns
+ */
+function fileAcceptFunction(accept) {
+    const acceptList = fileAcceptFilterTypeStringArray(accept);
+    let fileAcceptFunction;
+    if (acceptList.length === 0) {
+        fileAcceptFunction = asDecisionFunction(true);
+    }
+    else {
+        const hasWildcard = acceptList.some((x) => x === '*');
+        if (hasWildcard) {
+            fileAcceptFunction = asDecisionFunction(true);
+        }
+        else {
+            const isAcceptedFunctions = acceptList.map((x) => {
+                if (x[0] === SLASH_PATH_FILE_TYPE_SEPARATOR) {
+                    // is a SlashPathTypedFileSuffix
+                    return (input) => input.name.endsWith(x);
+                }
+                else if (x.endsWith('/*')) {
+                    // is a MimeTypeWildcardWithoutParameters
+                    const mimeTypePrefix = x.slice(0, -2);
+                    return (input) => input.type.startsWith(mimeTypePrefix);
+                }
+                else {
+                    // treat as a MimeTypeWithoutParameters
+                    return (input) => input.type === x;
+                }
+            });
+            fileAcceptFunction = (input) => {
+                return isAcceptedFunctions.findIndex((x) => x(input)) !== -1;
+            };
+        }
+    }
+    return fileAcceptFunction;
+}
+
+/**
+ * Compatable interface for DbxUploadActionDirective.
+ */
+class DbxFileUploadActionCompatable {
+}
+/**
+ * Provides a DbxUploadActionCompatable for a given type.
+ */
+function provideDbxFileUploadActionCompatable(sourceType) {
+    return [
+        {
+            provide: DbxFileUploadActionCompatable,
+            useExisting: forwardRef(() => sourceType)
+        }
+    ];
+}
+
+class DbxFileUploadAreaComponent extends AbstractDbxFileUploadComponent {
+    icon = input();
+    text = input();
+    hint = input();
+    show = input(true);
+    hintSignal = computed(() => {
+        const hint = this.hint();
+        return typeof hint === 'string' ? hint : hint === true ? 'Drag to upload' : null;
+    });
+    filesChanged = output();
+    areaClicked = output();
+    areaDragActiveChanged = output();
+    dragOverStateSignal = signal(false);
+    filesAcceptedFunctionSignal = computed(() => fileArrayAcceptMatchFunction({ multiple: this.multipleSignal() ?? false, accept: this.acceptSignal() }));
+    onClick(evt) {
+        evt.stopPropagation();
+        if (!this.disabled()) {
+            this.areaClicked.emit();
+        }
+    }
+    onDragOver(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.dragOverStateSignal.set(true);
+        this.areaDragActiveChanged.emit(true);
+    }
+    onDragLeave(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.dragOverStateSignal.set(false);
+        this.areaDragActiveChanged.emit(false);
+    }
+    onDrop(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.dragOverStateSignal.set(false);
+        if (!this.disabled()) {
+            const allFiles = evt.dataTransfer?.files;
+            if (allFiles) {
+                const matchResult = this.filesAcceptedFunctionSignal()(Array.from(allFiles));
+                this.filesChanged.emit({ allFiles: matchResult.input, matchResult });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFileUploadAreaComponent, isStandalone: true, selector: "dbx-file-upload-area", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged", areaClicked: "areaClicked", areaDragActiveChanged: "areaDragActiveChanged" }, host: { listeners: { "click": "onClick($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.dbx-file-upload-area-with-hint": "hintSignal()", "class.dbx-file-upload-area-disabled": "disabledSignal()", "class.dbx-file-upload-area-working": "isWorkingSignal()", "class.dbx-file-upload-area-drag-over": "!disabledSignal() && dragOverStateSignal()" }, classAttribute: "dbx-file-upload-area dbx-block" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadAreaComponent), usesInheritance: true, ngImport: i0, template: `
+    @if (show()) {
+      <div class="dbx-file-upload-area-content">
+        <div class="dbx-file-upload-area-content-text">
+          @if (icon() != null) {
+            <mat-icon>{{ icon() }}</mat-icon>
+          }
+          @if (text() != null) {
+            <span>{{ text() }}</span>
+          }
+        </div>
+        <div class="dbx-file-upload-area-content-wrapped">
+          <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
+        </div>
+      </div>
+      @if (hintSignal()) {
+        <div class="dbx-file-upload-area-content-hint dbx-hint dbx-small">{{ hintSignal() }}</div>
+      }
+    } @else {
+      <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
+    }
+
+    <!-- Content Template -->
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-file-upload-area',
+                    template: `
+    @if (show()) {
+      <div class="dbx-file-upload-area-content">
+        <div class="dbx-file-upload-area-content-text">
+          @if (icon() != null) {
+            <mat-icon>{{ icon() }}</mat-icon>
+          }
+          @if (text() != null) {
+            <span>{{ text() }}</span>
+          }
+        </div>
+        <div class="dbx-file-upload-area-content-wrapped">
+          <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
+        </div>
+      </div>
+      @if (hintSignal()) {
+        <div class="dbx-file-upload-area-content-hint dbx-hint dbx-small">{{ hintSignal() }}</div>
+      }
+    } @else {
+      <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
+    }
+
+    <!-- Content Template -->
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                    host: {
+                        class: 'dbx-file-upload-area dbx-block',
+                        '[class.dbx-file-upload-area-with-hint]': 'hintSignal()',
+                        '[class.dbx-file-upload-area-disabled]': 'disabledSignal()',
+                        '[class.dbx-file-upload-area-working]': 'isWorkingSignal()',
+                        '[class.dbx-file-upload-area-drag-over]': '!disabledSignal() && dragOverStateSignal()'
+                    },
+                    providers: provideDbxFileUploadActionCompatable(DbxFileUploadAreaComponent),
+                    imports: [MatIconModule, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent {
+    fileInput = viewChild.required('fileInput', { read: ElementRef });
+    text = input();
+    icon = input();
+    buttonStyle = input();
+    filesChanged = output();
+    buttonAcceptSignal = computed(() => {
+        const accept = this.acceptSignal();
+        return typeof accept === 'function' ? undefined : fileAcceptString(accept);
+    });
+    buttonMultipleSignal = computed(() => this.multipleSignal() ?? false);
+    filesAcceptedFunctionSignal = computed(() => {
+        const accept = this.acceptSignal();
+        const multiple = this.buttonMultipleSignal();
+        return typeof accept === 'function' ? fileArrayAcceptMatchFunction({ multiple, accept }) : undefined;
+    });
+    /**
+     * The HTML attribute should not be added if it is false, so we return null.
+     */
+    multipleAttributeSignal = computed(() => (this.buttonMultipleSignal() ? '' : null));
+    openInput() {
+        const inputRef = this.fileInput();
+        const input = inputRef.nativeElement;
+        const isDisabled = this.disabledSignal();
+        if (!isDisabled) {
+            input.click();
+        }
+    }
+    fileInputChanged() {
+        const inputRef = this.fileInput();
+        const input = inputRef.nativeElement;
+        const isDisabled = this.disabledSignal();
+        if (!isDisabled) {
+            const allFiles = input.files ? Array.from(input.files) : [];
+            const fileAcceptFunction = this.filesAcceptedFunctionSignal();
+            if (fileAcceptFunction) {
+                const matchResult = fileAcceptFunction(allFiles);
+                this.filesChanged.emit({ allFiles, matchResult });
+            }
+            else {
+                // if not using a filesAcceptedFunction, then accept all files as the input should have filtered them
+                const multiple = this.buttonMultipleSignal();
+                this.filesChanged.emit({ allFiles, matchResult: { multiple, input: allFiles, accepted: allFiles, rejected: [], acceptedType: allFiles, rejectedType: [] } });
+            }
+        }
+        // reset the input value
+        if (input.value) {
+            input.value = '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxFileUploadButtonComponent, isStandalone: true, selector: "dbx-file-upload-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadButtonComponent), viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <dbx-button [buttonStyle]="buttonStyle()" [text]="text()" [icon]="icon()" (buttonClick)="openInput()" [disabled]="disabledSignal()" [working]="workingSignal()">
+      <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", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-file-upload-button',
+                    template: `
+    <dbx-button [buttonStyle]="buttonStyle()" [text]="text()" [icon]="icon()" (buttonClick)="openInput()" [disabled]="disabledSignal()" [working]="workingSignal()">
+      <ng-content></ng-content>
+    </dbx-button>
+    <input #fileInput hidden type="file" [attr.accept]="buttonAcceptSignal() ?? null" [attr.multiple]="multipleAttributeSignal() ? '' : null" (change)="fileInputChanged()" />
+  `,
+                    providers: provideDbxFileUploadActionCompatable(DbxFileUploadButtonComponent),
+                    imports: [DbxButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Combines both the file upload area and button into a single component.
+ */
+class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
+    config = input();
+    area = viewChild.required('area', { read: DbxFileUploadAreaComponent });
+    button = viewChild.required('button', { read: DbxFileUploadButtonComponent });
+    buttonStyle = input();
+    mode = input();
+    text = input(); // button text
+    icon = input(); // button icon
+    hint = input(); // area hint
+    modeSignal = computed(() => {
+        const config = this.config();
+        const mode = this.mode();
+        return config?.mode ?? mode ?? 'default';
+    });
+    showButtonSignal = computed(() => {
+        const mode = this.modeSignal();
+        return mode === 'button' || mode === 'default';
+    });
+    showAreaSignal = computed(() => {
+        const mode = this.modeSignal();
+        return mode === 'area' || mode === 'default';
+    });
+    clickAreaToUpload = input();
+    clickAreaToUploadSignal = computed(() => {
+        const config = this.config();
+        const clickAreaToUpload = this.clickAreaToUpload();
+        return config?.clickAreaToUpload ?? clickAreaToUpload;
+    });
+    buttonTextSignal = computed(() => {
+        const config = this.config();
+        const text = this.text();
+        return config?.button?.text ?? text;
+    });
+    buttonIconSignal = computed(() => {
+        const config = this.config();
+        const icon = this.icon();
+        return config?.button?.icon ?? icon;
+    });
+    areaTextSignal = computed(() => this.config()?.area?.text);
+    areaIconSignal = computed(() => this.config()?.area?.icon);
+    areaHintSignal = computed(() => {
+        const config = this.config();
+        const hint = this.hint();
+        return config?.area?.hint ?? hint;
+    });
+    uploadMultipleSignal = computed(() => {
+        const config = this.config();
+        const multiple = this.multipleSignal();
+        return multiple ?? config?.multiple;
+    });
+    uploadAcceptSignal = computed(() => {
+        const config = this.config();
+        const accept = this.acceptSignal();
+        return accept ?? config?.accept;
+    });
+    filesChanged = output();
+    areaClicked() {
+        const clickAreaToUpload = this.clickAreaToUploadSignal();
+        if (clickAreaToUpload) {
+            const button = this.button();
+            button.openInput();
+        }
+    }
+    areaFilesChanged(event) {
+        this.filesChanged.emit(event);
+    }
+    buttonFilesChanged(event) {
+        this.filesChanged.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFileUploadComponent, isStandalone: true, selector: "dbx-file-upload", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clickAreaToUpload: { classPropertyName: "clickAreaToUpload", publicName: "clickAreaToUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadComponent), viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, read: DbxFileUploadAreaComponent, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, read: DbxFileUploadButtonComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <dbx-file-upload-area #area [show]="showAreaSignal()" [hint]="areaHintSignal()" [text]="areaTextSignal()" [icon]="areaIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" (filesChanged)="areaFilesChanged($event)" (areaClicked)="areaClicked()" [disabled]="disabledSignal()" [working]="workingSignal()">
+      <ng-content></ng-content>
+      @if (showButtonSignal()) {
+        <ng-template [ngTemplateOutlet]="buttonTemplate"></ng-template>
+      }
+    </dbx-file-upload-area>
+    <!-- Button Template -->
+    <ng-template #buttonTemplate>
+      <dbx-file-upload-button #button [text]="buttonTextSignal()" [icon]="buttonIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" (filesChanged)="buttonFilesChanged($event)" [disabled]="disabledSignal()" [working]="workingSignal()" [buttonStyle]="buttonStyle()"></dbx-file-upload-button>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxFileUploadAreaComponent, selector: "dbx-file-upload-area", inputs: ["icon", "text", "hint", "show"], outputs: ["filesChanged", "areaClicked", "areaDragActiveChanged"] }, { kind: "component", type: DbxFileUploadButtonComponent, selector: "dbx-file-upload-button", inputs: ["text", "icon", "buttonStyle"], outputs: ["filesChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-file-upload',
+                    template: `
+    <dbx-file-upload-area #area [show]="showAreaSignal()" [hint]="areaHintSignal()" [text]="areaTextSignal()" [icon]="areaIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" (filesChanged)="areaFilesChanged($event)" (areaClicked)="areaClicked()" [disabled]="disabledSignal()" [working]="workingSignal()">
+      <ng-content></ng-content>
+      @if (showButtonSignal()) {
+        <ng-template [ngTemplateOutlet]="buttonTemplate"></ng-template>
+      }
+    </dbx-file-upload-area>
+    <!-- Button Template -->
+    <ng-template #buttonTemplate>
+      <dbx-file-upload-button #button [text]="buttonTextSignal()" [icon]="buttonIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" (filesChanged)="buttonFilesChanged($event)" [disabled]="disabledSignal()" [working]="workingSignal()" [buttonStyle]="buttonStyle()"></dbx-file-upload-button>
+    </ng-template>
+  `,
+                    providers: provideDbxFileUploadActionCompatable(DbxFileUploadComponent),
+                    imports: [DbxFileUploadAreaComponent, DbxFileUploadButtonComponent, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Context used for linking a button to an ActionContext.
+ */
+class DbxFileUploadActionSyncDirective {
+    source = inject(DbxActionContextStoreSourceInstance);
+    uploadCompatable = inject(DbxFileUploadActionCompatable);
+    _workingSub = new SubscriptionObject();
+    _disabledSub = new SubscriptionObject();
+    ngOnInit() {
+        this._workingSub.subscription = this.source.isWorkingOrWorkProgress$.subscribe((working) => {
+            this.uploadCompatable.setWorking(working);
+        });
+        this._disabledSub.subscription = this.source.isDisabled$.subscribe((disabled) => {
+            this.uploadCompatable.setDisabled(disabled);
+        });
+    }
+    ngOnDestroy() {
+        this._workingSub.destroy();
+        this._disabledSub.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadActionSyncDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxFileUploadActionSyncDirective, isStandalone: true, selector: "[dbxFileUploadActionSync]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadActionSyncDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxFileUploadActionSync]',
+                    standalone: true
+                }]
+        }] });
+
 class AbstractDbxErrorWidgetComponent {
     data = inject(DBX_INJECTION_COMPONENT_DATA);
     get code() {
@@ -3781,15 +4366,41 @@ class DbxBasicLoadingComponent {
     customError = viewChild('customError', { read: ElementRef });
     customLoading = viewChild('customLoading', { read: ElementRef });
     diameter = input();
-    mode = input('indeterminate');
+    mode = input();
     color = input('primary');
     text = input();
     linear = input(false);
     show = input(true);
     loading = input();
     error = input();
-    stateSignal = computed(() => {
+    loadingProgressSignal = computed(() => {
         const loading = this.loading();
+        let result;
+        if (typeof loading === 'number') {
+            result = loading;
+        }
+        return result;
+    });
+    modeSignal = computed(() => {
+        const mode = this.mode();
+        const loadingProgress = this.loadingProgressSignal();
+        let result;
+        if (!mode) {
+            if (loadingProgress != null) {
+                result = 'determinate';
+            }
+            else {
+                result = 'indeterminate';
+            }
+        }
+        else {
+            result = mode;
+        }
+        return result;
+    });
+    isLoadingSignal = computed(() => isDefinedAndNotFalse(this.loading()));
+    stateSignal = computed(() => {
+        const loading = this.isLoadingSignal();
         const error = this.error();
         const show = this.show() ?? true; // default to true if not defined
         let state;
@@ -3811,11 +4422,11 @@ class DbxBasicLoadingComponent {
     hasNoCustomErrorSignal = computed(() => !checkNgContentWrapperHasContent(this.customError()));
     hasNoCustomLoadingSignal = computed(() => !checkNgContentWrapperHasContent(this.customLoading()));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxBasicLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxBasicLoadingComponent, isStandalone: true, selector: "dbx-basic-loading", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "customError", first: true, predicate: ["customError"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "customLoading", first: true, predicate: ["customLoading"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"mode()\" [color]=\"color()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "component", type: DbxLoadingProgressComponent, selector: "dbx-loading-progress", inputs: ["diameter", "text", "linear", "mode", "color", "value", "bufferValue"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxBasicLoadingComponent, isStandalone: true, selector: "dbx-basic-loading", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "customError", first: true, predicate: ["customError"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "customLoading", first: true, predicate: ["customLoading"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"modeSignal()\" [value]=\"loadingProgressSignal()\" [color]=\"color()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "component", type: DbxLoadingProgressComponent, selector: "dbx-loading-progress", inputs: ["diameter", "text", "linear", "mode", "color", "value", "bufferValue"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxBasicLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-basic-loading', imports: [DbxErrorComponent, DbxLoadingProgressComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"mode()\" [color]=\"color()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'dbx-basic-loading', imports: [DbxErrorComponent, DbxLoadingProgressComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (stateSignal()) {\n  @case ('none') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('loading') {\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  }\n  @case ('content') {\n    <!-- Content -->\n    <ng-content></ng-content>\n  }\n  @case ('error') {\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n  }\n}\n\n<ng-template #loadingTemplate>\n  @if (hasNoCustomLoadingSignal()) {\n    <dbx-loading-progress [mode]=\"modeSignal()\" [value]=\"loadingProgressSignal()\" [color]=\"color()\" [text]=\"text()\" [linear]=\"linear()\" [diameter]=\"diameter()\"></dbx-loading-progress>\n  }\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  @if (hasNoCustomErrorSignal()) {\n    <dbx-error [error]=\"error()\"></dbx-error>\n  }\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n" }]
         }] });
 
 /**
@@ -3829,7 +4440,7 @@ class DbxLoadingComponent {
     padding = input(false);
     show = input();
     text = input();
-    mode = input('indeterminate');
+    mode = input();
     color = input('primary');
     diameter = input();
     linear = input();
@@ -3842,8 +4453,15 @@ class DbxLoadingComponent {
     stateSignal = computed(() => {
         const loading = this.loading();
         const error = this.error();
-        let loadingState = this.contextStreamSignal();
-        if (loadingState == null) {
+        const contextStreamEvent = this.contextStreamSignal();
+        let loadingState;
+        if (contextStreamEvent) {
+            loadingState = {
+                loading: contextStreamEvent.loading === true ? (contextStreamEvent.loadingProgress ?? true) : false,
+                error: contextStreamEvent.error
+            };
+        }
+        else {
             loadingState = {
                 loading: loading ?? false,
                 error: error
@@ -4014,7 +4632,7 @@ class DbxActionSnackbarComponent extends AbstractSubscriptionDirective {
         this.snackbarRef.dismiss();
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxActionSnackbarComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, 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: ["type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }, { 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],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxActionSnackbarComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, 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", "raised", "stroked", "flat", "iconOnly", "fab", "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],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarComponent, decorators: [{
             type: Component,
@@ -4341,7 +4959,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: ["type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }, { 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", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionUIRouterTransitionSafetyDialogComponent, decorators: [{
             type: Component,
@@ -4520,14 +5138,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class DbxActionConfirmDirective extends AbstractPromptConfirmDirective {
     source = inject((DbxActionContextStoreSourceInstance), { host: true });
     dbxActionConfirm = input(undefined, { transform: transformEmptyStringInputToUndefined });
-    _sourceSubscription = new SubscriptionObject();
+    _sourceSub = new SubscriptionObject();
     ngOnInit() {
-        this._sourceSubscription.subscription = this.source.triggered$.subscribe(() => {
+        this._sourceSub.subscription = this.source.triggered$.subscribe(() => {
             this.showDialog();
         });
     }
     ngOnDestroy() {
-        this._sourceSubscription.destroy();
+        this._sourceSub.destroy();
     }
     getDefaultDialogConfig() {
         return this.dbxActionConfirm();
@@ -5269,7 +5887,7 @@ class DbxDownloadTextViewComponent extends AbstractSubscriptionDirective {
         }));
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDownloadTextViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { 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 }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, 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      <div class=\"dbx-download-text-preview dbx-json dbx-content-pit dbx-content-pit-scrollable dbx-mb3\">{{ contentDataSignal() }}</div>\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      <dbx-button-spacer></dbx-button-spacer>\n      <a #downloadButton [href]=\"fileUrlSignal()\" [attr.download]=\"fileNameSignal()\"><dbx-button icon=\"download\" text=\"Download\" [raised]=\"true\" [working]=\"!downloadReadySignal()\" [disabled]=\"!downloadReadySignal()\"></dbx-button></a>\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],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { 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 }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, 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      <div class=\"dbx-download-text-preview dbx-json dbx-content-pit dbx-content-pit-scrollable dbx-mb3\">{{ contentDataSignal() }}</div>\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      <dbx-button-spacer></dbx-button-spacer>\n      <a #downloadButton [href]=\"fileUrlSignal()\" [attr.download]=\"fileNameSignal()\"><dbx-button icon=\"download\" text=\"Download\" [raised]=\"true\" [working]=\"!downloadReadySignal()\" [disabled]=\"!downloadReadySignal()\"></dbx-button></a>\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],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
             type: Component,
@@ -6409,6 +7027,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 // export * from './calendar'; // nothing to export
 
+// MARK: Injection Token
+/**
+ * Injection token for the avatar context data.
+ */
+const DBX_AVATAR_CONTEXT_DATA_TOKEN = new InjectionToken('DbxAvatarContextData');
+
+/**
+ * Component that displays an avatar image. It has a configurable default avatar.
+ */
+class DbxAvatarViewComponent {
+    defaultContext = inject(DBX_AVATAR_CONTEXT_DATA_TOKEN, { optional: true });
+    avatarService = inject(DbxAvatarViewService);
+    defaultAvatarUrl = this.avatarService.defaultAvatarUrl;
+    avatarUrl = input();
+    avatarErrorUrlSignal = signal(null);
+    avatarStyle = input();
+    avatarIcon = input();
+    avatarUrlSignal = computed(() => {
+        const directUrl = this.avatarUrl();
+        const contextUrl = this.defaultContext?.url;
+        let url = directUrl ?? contextUrl ?? this.defaultAvatarUrl ?? null;
+        // if the error url is true or matches the url, then the url is invalid.
+        const errorUrl = this.avatarErrorUrlSignal();
+        if (errorUrl === true || errorUrl === url) {
+            url = null;
+        }
+        return url;
+    });
+    hasAvatarSignal = computed(() => !!this.avatarUrlSignal());
+    missingAvatarSignal = computed(() => !this.hasAvatarSignal());
+    avatarStyleClassSignal = computed(() => {
+        return this.avatarStyle() ?? this.defaultContext?.style ?? 'circle';
+    });
+    avatarIconSignal = computed(() => {
+        let icon = this.avatarIcon() ?? this.defaultContext?.icon;
+        if (!icon && this.avatarErrorUrlSignal()) {
+            icon = this.avatarService.defaultAvatarErrorIcon;
+        }
+        else {
+            icon = icon ?? this.avatarService.defaultAvatarIcon;
+        }
+        return icon ?? 'person';
+    });
+    onAvatarImageError(event) {
+        if (event.target) {
+            const target = event.target;
+            this.avatarErrorUrlSignal.set(target.src);
+        }
+        else {
+            this.avatarErrorUrlSignal.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxAvatarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxAvatarViewComponent, isStandalone: true, selector: "dbx-avatar-view", inputs: { avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarStyle: { classPropertyName: "avatarStyle", publicName: "avatarStyle", isSignal: true, isRequired: false, transformFunction: null }, avatarIcon: { classPropertyName: "avatarIcon", publicName: "avatarIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-avatar-view-circle": "avatarStyleClassSignal() === \"circle\"", "class.dbx-avatar-view-square": "avatarStyleClassSignal() === \"square\"", "class.dbx-avatar-view-with-avatar": "hasAvatarSignal()", "class.dbx-avatar-view-no-avatar": "missingAvatarSignal()" }, classAttribute: "dbx-avatar-view" }, ngImport: i0, template: `
+    @if (avatarUrlSignal()) {
+      <img (error)="onAvatarImageError($event)" class="dbx-avatar-view-img" [src]="avatarUrlSignal()!" alt="." loading="lazy" decoding="async" />
+    } @else {
+      <div class="dbx-avatar-view-fallback" aria-hidden="true">
+        <mat-icon>{{ avatarIconSignal() }}</mat-icon>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxAvatarViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-avatar-view',
+                    template: `
+    @if (avatarUrlSignal()) {
+      <img (error)="onAvatarImageError($event)" class="dbx-avatar-view-img" [src]="avatarUrlSignal()!" alt="." loading="lazy" decoding="async" />
+    } @else {
+      <div class="dbx-avatar-view-fallback" aria-hidden="true">
+        <mat-icon>{{ avatarIconSignal() }}</mat-icon>
+      </div>
+    }
+  `,
+                    host: {
+                        class: 'dbx-avatar-view',
+                        '[class.dbx-avatar-view-circle]': 'avatarStyleClassSignal() === "circle"',
+                        '[class.dbx-avatar-view-square]': 'avatarStyleClassSignal() === "square"',
+                        '[class.dbx-avatar-view-with-avatar]': 'hasAvatarSignal()',
+                        '[class.dbx-avatar-view-no-avatar]': 'missingAvatarSignal()'
+                    },
+                    imports: [MatIconModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Configuration for a DbxAvatarViewService.
+ */
+class DbxAvatarViewServiceConfig {
+    /**
+     * The default avatar URL to use in DbxAvatarViewComponent if no other url is available
+     */
+    defaultAvatarUrl;
+    /**
+     * The default fallback icon to use when no avatar image is provided.
+     */
+    defaultAvatarIcon;
+    /**
+     * The default fallback icon to use when an avatar image is provided but fails to load.
+     */
+    defaultAvatarErrorIcon;
+    /**
+     * Overrides the default avatar component.
+     */
+    defaultAvatarComponentConfig;
+    /**
+     * Custom function that returns a DbxInjectionComponentConfig for the given context.
+     */
+    avatarComponentForContext;
+}
+/**
+ * Service for registering avatars.
+ */
+class DbxAvatarViewService {
+    _serviceConfig = inject(DbxAvatarViewServiceConfig, { optional: true });
+    _defaultAvatarUrl = this._serviceConfig?.defaultAvatarUrl;
+    _defaultAvatarIcon = this._serviceConfig?.defaultAvatarIcon ?? 'person';
+    _defaultAvatarErrorIcon;
+    _defaultAvatarComponentConfig = this._serviceConfig?.defaultAvatarComponentConfig ?? {
+        componentClass: DbxAvatarViewComponent
+    };
+    _avatarComponentForContext = this._serviceConfig?.avatarComponentForContext;
+    avatarComponentForContext(context) {
+        let config = this._defaultAvatarComponentConfig;
+        if (this._avatarComponentForContext) {
+            config = this._avatarComponentForContext(context) ?? config;
+        }
+        return config;
+    }
+    get defaultAvatarUrl() {
+        return this._defaultAvatarUrl;
+    }
+    get defaultAvatarIcon() {
+        return this._defaultAvatarIcon;
+    }
+    get defaultAvatarErrorIcon() {
+        return this._defaultAvatarErrorIcon;
+    }
+    setDefaultAvatarUrl(url) {
+        this._defaultAvatarUrl = url;
+    }
+    setDefaultAvatarIcon(icon) {
+        this._defaultAvatarIcon = icon;
+    }
+    setDefaultAvatarErrorIcon(icon) {
+        this._defaultAvatarErrorIcon = icon;
+    }
+    setDefaultAvatarComponentConfig(config) {
+        this._defaultAvatarComponentConfig = config;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxAvatarViewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxAvatarViewService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxAvatarViewService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Component that displays an avatar based on the input context.
+ */
+class DbxAvatarComponent {
+    injector = inject(Injector);
+    avatarService = inject(DbxAvatarViewService);
+    context = input();
+    avatarSelector = input();
+    avatarUid = input();
+    avatarUrl = input();
+    avatarKey = input();
+    avatarIcon = input();
+    avatarStyle = input();
+    avatarSize = input(undefined);
+    contextSignal = computed(() => {
+        const inputContext = this.context();
+        const selector = this.avatarSelector() ?? inputContext?.selector;
+        const uid = this.avatarUid() ?? inputContext?.uid;
+        const url = this.avatarUrl() ?? inputContext?.url;
+        const key = this.avatarKey() ?? inputContext?.key;
+        const icon = this.avatarIcon() ?? inputContext?.icon;
+        const style = this.avatarStyle() ?? inputContext?.style;
+        const context = {
+            selector,
+            uid,
+            url,
+            key,
+            icon,
+            style
+        };
+        return context;
+    });
+    configSignal = computed(() => {
+        const context = this.contextSignal();
+        const returnedConfig = this.avatarService.avatarComponentForContext(context);
+        const dataProvider = {
+            provide: DBX_AVATAR_CONTEXT_DATA_TOKEN,
+            useValue: context
+        };
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: mergeStaticProviders(dataProvider, returnedConfig.providers)
+        });
+        const config = {
+            ...returnedConfig,
+            injector
+        };
+        return config;
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxAvatarComponent, isStandalone: true, selector: "dbx-avatar", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, avatarSelector: { classPropertyName: "avatarSelector", publicName: "avatarSelector", isSignal: true, isRequired: false, transformFunction: null }, avatarUid: { classPropertyName: "avatarUid", publicName: "avatarUid", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, avatarKey: { classPropertyName: "avatarKey", publicName: "avatarKey", isSignal: true, isRequired: false, transformFunction: null }, avatarIcon: { classPropertyName: "avatarIcon", publicName: "avatarIcon", isSignal: true, isRequired: false, transformFunction: null }, avatarStyle: { classPropertyName: "avatarStyle", publicName: "avatarStyle", isSignal: true, isRequired: false, transformFunction: null }, avatarSize: { classPropertyName: "avatarSize", publicName: "avatarSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-avatar-small": "avatarSize() === 'small'", "class.dbx-avatar-large": "avatarSize() === 'large'" } }, ngImport: i0, template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxAvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-avatar',
+                    template: `
+    <dbx-injection [config]="configSignal()"></dbx-injection>
+  `,
+                    imports: [DbxInjectionComponent],
+                    host: {
+                        '[class.dbx-avatar-small]': `avatarSize() === 'small'`,
+                        '[class.dbx-avatar-large]': `avatarSize() === 'large'`
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
 /**
  * Acts as a wrapper for content distributed along a bar.
  */
@@ -8202,8 +9055,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  */
 class DbxContentPitDirective {
     scrollable = input();
+    scrollableHeightSignal = computed(() => {
+        let scrollable = this.scrollable();
+        let scrollableHeight;
+        if (typeof scrollable === 'boolean') {
+            scrollable = scrollable ? 'medium' : undefined; // defaults to medium
+        }
+        if (scrollable) {
+            if (typeof scrollable === 'string') {
+                switch (scrollable) {
+                    case 'small':
+                        scrollable = 120;
+                        break;
+                    case 'medium':
+                        scrollable = 320;
+                        break;
+                    case 'large':
+                        scrollable = 460;
+                        break;
+                    default:
+                        scrollableHeight = scrollable; // use as-is
+                        break;
+                }
+            }
+            if (typeof scrollable === 'number') {
+                scrollableHeight = `${scrollable}px`;
+            }
+        }
+        return scrollableHeight ?? null;
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxContentPitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollable()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollableHeightSignal() != null", "style.max-height": "scrollableHeightSignal()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxContentPitDirective, decorators: [{
             type: Directive,
@@ -8211,7 +9093,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: 'dbx-content-pit, [dbxContentPit]',
                     host: {
                         class: 'd-block dbx-content-pit',
-                        '[class.dbx-content-pit-scrollable]': 'scrollable()'
+                        '[class.dbx-content-pit-scrollable]': 'scrollableHeightSignal() != null',
+                        '[style.max-height]': 'scrollableHeightSignal()'
                     },
                     standalone: true
                 }]
@@ -9769,5 +10652,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxErrorWidgetComponent, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxPartialPresetFilterMenuDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_DARK_STYLE_CLASS_SUFFIX, DBX_IFRAME_COMPONENT_TEMPLATE, DBX_LIST_DEFAULT_SCROLL_DISTANCE, DBX_LIST_DEFAULT_THROTTLE_SCROLL, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_LIST_VIEW_DEFAULT_META_ICON, DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN, DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_ANCHOR_COMPONENTS, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_ERROR_SNACKBAR_CONFIG, DEFAULT_DBX_LIST_GRID_VIEW_DIRECTIVE_TEMPLATE, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarErrorDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxBodyDirective, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerDirective, DbxCardBoxLayoutModule, DbxChipDirective, DbxColorDirective, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDialogModule, DbxDownloadTextModule, DbxDownloadTextViewComponent, DbxErrorComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorSnackbarComponent, DbxErrorSnackbarService, DbxErrorViewComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIfSidenavDisplayModeDirective, DbxIframeComponent, DbxInteractionModule, DbxIntroActionSectionComponent, DbxKeypressModule, DbxLabelBlockComponent, DbxLayoutModule, DbxLinkComponent, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListGridViewDirectiveImportsModule, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, DbxListLayoutModule, DbxListModifierModule, DbxListModule, DbxListTitleGroupDirective, DbxListView, DbxListViewMetaIconComponent, DbxListViewWrapper, DbxListWrapperComponentImportsModule, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxModelObjectStateService, actions as DbxModelStateActions, model_actions as DbxModelStateModelActions, DbxModelTrackerService, DbxModelTypesService, DbxModelViewTrackerStorage, DbxNavbarComponent, DbxNumberWithLimitComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxPopoverCloseButtonComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionContentModule, DbxPopoverInteractionModule, DbxPopoverScrollContentDirective, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxProgressBarButtonComponent, DbxProgressButtonsModule, DbxProgressSpinnerButtonComponent, DbxPromptBoxDirective, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorModule, DbxResizedDirective, DbxRouterAnchorListModule, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterListModule, DbxRouterNavbarModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListViewComponent, DbxSelectionValueListViewComponentImportsModule, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepComponent, DbxStepLayoutModule, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlockComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadDirective, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewComponentImportsModule, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWebModule, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetModule, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, UNKNOWN_ERROR_WIDGET_CODE, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, dbxColorBackground, dbxListGridViewDirectiveImportsAndExports, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxStyleClassCleanSuffix, dbxValueListItemDecisionFunction, defaultDbxModelViewTrackerStorageAccessorFactory, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, index as fromDbxModel, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, index$1 as onDbxModel, provideDbxListView, provideDbxListViewWrapper, provideDbxModelService, provideDbxProgressButtonGlobalConfig, provideDbxPromptConfirm, provideDbxRouterWebAngularRouterProviderConfig, provideDbxRouterWebUiRouterProviderConfig, provideDbxScreenMediaService, provideDbxStyleService, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideTwoColumnsContext, resizeSignal, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier };
+export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxErrorWidgetComponent, AbstractDbxFileUploadComponent, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxPartialPresetFilterMenuDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_AVATAR_CONTEXT_DATA_TOKEN, DBX_DARK_STYLE_CLASS_SUFFIX, DBX_IFRAME_COMPONENT_TEMPLATE, DBX_LIST_DEFAULT_SCROLL_DISTANCE, DBX_LIST_DEFAULT_THROTTLE_SCROLL, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_LIST_VIEW_DEFAULT_META_ICON, DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN, DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_ANCHOR_COMPONENTS, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_ERROR_SNACKBAR_CONFIG, DEFAULT_DBX_LIST_GRID_VIEW_DIRECTIVE_TEMPLATE, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarErrorDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxAvatarComponent, DbxAvatarViewService, DbxAvatarViewServiceConfig, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxBodyDirective, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerDirective, DbxCardBoxLayoutModule, DbxChipDirective, DbxColorDirective, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDialogModule, DbxDownloadTextModule, DbxDownloadTextViewComponent, DbxErrorComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorSnackbarComponent, DbxErrorSnackbarService, DbxErrorViewComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFileUploadActionCompatable, DbxFileUploadActionSyncDirective, DbxFileUploadAreaComponent, DbxFileUploadButtonComponent, DbxFileUploadComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIfSidenavDisplayModeDirective, DbxIframeComponent, DbxInteractionModule, DbxIntroActionSectionComponent, DbxKeypressModule, DbxLabelBlockComponent, DbxLayoutModule, DbxLinkComponent, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListGridViewDirectiveImportsModule, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, DbxListLayoutModule, DbxListModifierModule, DbxListModule, DbxListTitleGroupDirective, DbxListView, DbxListViewMetaIconComponent, DbxListViewWrapper, DbxListWrapperComponentImportsModule, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxModelObjectStateService, actions as DbxModelStateActions, model_actions as DbxModelStateModelActions, DbxModelTrackerService, DbxModelTypesService, DbxModelViewTrackerStorage, DbxNavbarComponent, DbxNumberWithLimitComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxPopoverCloseButtonComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionContentModule, DbxPopoverInteractionModule, DbxPopoverScrollContentDirective, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, DbxProgressBarButtonComponent, DbxProgressButtonsModule, DbxProgressSpinnerButtonComponent, DbxPromptBoxDirective, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorModule, DbxResizedDirective, DbxRouterAnchorListModule, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterListModule, DbxRouterNavbarModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListViewComponent, DbxSelectionValueListViewComponentImportsModule, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepComponent, DbxStepLayoutModule, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlockComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadDirective, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewComponentImportsModule, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWebModule, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetModule, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, UNKNOWN_ERROR_WIDGET_CODE, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, dbxColorBackground, dbxListGridViewDirectiveImportsAndExports, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxStyleClassCleanSuffix, dbxValueListItemDecisionFunction, defaultDbxModelViewTrackerStorageAccessorFactory, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, fileAcceptFilterTypeStringArray, fileAcceptFunction, fileAcceptString, fileArrayAcceptMatchFunction, index as fromDbxModel, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, index$1 as onDbxModel, provideDbxFileUploadActionCompatable, provideDbxListView, provideDbxListViewWrapper, provideDbxModelService, provideDbxProgressButtonGlobalConfig, provideDbxPromptConfirm, provideDbxRouterWebAngularRouterProviderConfig, provideDbxRouterWebUiRouterProviderConfig, provideDbxScreenMediaService, provideDbxStyleService, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideTwoColumnsContext, resizeSignal, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map