@dereekb/dbx-web 13.6.13 → 13.6.14

package/fesm2022/dereekb-dbx-web.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, inject, effect, Directive, NgModule, ChangeDetectionStrategy, Component, output, computed, HostListener, ElementRef, Injector, DestroyRef, signal, viewChild, InjectionToken, makeEnvironmentProviders, TemplateRef, model, SecurityContext, forwardRef, ViewContainerRef, booleanAttribute, Renderer2 } from '@angular/core';
+import { Injectable, input, inject, effect, Directive, NgModule, ChangeDetectionStrategy, Component, output, computed, HostListener, ElementRef, Injector, DestroyRef, signal, InjectionToken, viewChild, makeEnvironmentProviders, TemplateRef, model, SecurityContext, forwardRef, ViewContainerRef, booleanAttribute, Renderer2 } from '@angular/core';
 import { asPromise, cssClassesSet, isDefinedAndNotFalse, DASH_CHARACTER_PREFIX_INSTANCE, cssTokenVar, spaceSeparatedCssClasses, objectHasNoKeys, getValueFromGetter, firstValue, filterUndefinedValues, separateValues, splitFront, asDecisionFunction, SLASH_PATH_FILE_TYPE_SEPARATOR, filterMaybeArrayValues, mapIterable, toReadableError, isDefaultReadableError, MS_IN_SECOND, mergeObjects, build, ServerErrorResponse, UnauthorizedServerErrorResponse, makeTimer, MS_IN_MINUTE, toggleTimerRunning, unixDateTimeSecondsNumberForNow, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue, safeCompareEquality, addMilliseconds, isPast, asArray, slashPathDetails, mimeTypeForFileExtension, slashPathDirectoryTree, isMaybeNot, isNotFalse, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, invertMaybeBoolean, splitCommaSeparatedStringToSet, ZIP_FILE_MIME_TYPE, cachedGetter, sortByNumberFunction } from '@dereekb/util';
 import * as i1$2 from '@dereekb/dbx-core';
-import { completeOnDestroy, clean, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, cleanSubscription, AbstractDbxButtonDirective, provideDbxButton, dbxActionWorkProgress, hasNonTrivialChildNodes, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionContextStoreSourceInstance, cleanSubscriptionWithLockSet, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, cleanLoadingContext, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive, anchorTypeForAnchor } from '@dereekb/dbx-core';
+import { completeOnDestroy, clean, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, cleanSubscription, dbxActionWorkProgress, AbstractDbxButtonDirective, hasNonTrivialChildNodes, provideDbxButton, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionContextStoreSourceInstance, cleanSubscriptionWithLockSet, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, cleanLoadingContext, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive, anchorTypeForAnchor } from '@dereekb/dbx-core';
 import { NgPopoverRef, NgOverlayContainerService } from 'ng-overlay-container';
 import { of, map, BehaviorSubject, distinctUntilChanged, shareReplay, delay, Subject, first, startWith, filter, throttleTime, skip, defaultIfEmpty, combineLatest, switchMap, delayWhen, timer, asyncScheduler, from, firstValueFrom, mergeMap, race, tap, catchError, distinct, merge, exhaustMap } from 'rxjs';
 import { LockSet, filterMaybe, distinctUntilItemsHaveDifferentValues, skipAllInitialMaybe, maybeValueFromObservableOrValue, switchMapMaybeLoadingContextStream, LoadingStateType, loadingStateType, successResult, valueFromFinishedLoadingState, loadingStateContext, initialize, asObservable, isNot, mapForEach, SubscriptionObject, switchMapMaybe, listLoadingStateContext, isLoadingStateFinishedLoading, startWithBeginLoading, loadingStateFromObs, errorResult, beginLoading, distinctUntilHasDifferentValues } from '@dereekb/rxjs';
@@ -13,7 +13,7 @@ import * as i1$1 from '@angular/material/button';
 import { MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { NgClass, NgTemplateOutlet, NgStyle, JsonPipe, DatePipe } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet, JsonPipe, DatePipe } from '@angular/common';
 import { Overlay, GlobalPositionStrategy } from '@angular/cdk/overlay';
 import { MatDivider } from '@angular/material/divider';
 import { MatProgressBar } from '@angular/material/progress-bar';
@@ -1505,122 +1505,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             type: Directive
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
-/**
- * Lightweight button that renders as either an icon-only Material icon button or a text button
- * with an icon prefix, depending on whether text is provided.
- *
- * @deprecated Use `dbx-button` instead. For icon-only buttons use `<dbx-button icon="settings" iconOnly>`.
- * For icon+text buttons use `<dbx-button icon="settings" text="Label">`. The `dbx-button` component
- * supports all the same inputs plus working/loading states, colors, and button style variants.
- *
- * @example
- * ```html
- * <dbx-icon-button icon="settings" (buttonClick)="openSettings()"></dbx-icon-button>
- * ```
- *
- * @example
- * ```html
- * <dbx-icon-button icon="add" text="Add Item" (buttonClick)="addItem()"></dbx-icon-button>
- * ```
- */
-class DbxIconButtonComponent extends AbstractDbxButtonDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxIconButtonComponent, isStandalone: true, selector: "dbx-icon-button", host: { classAttribute: "dbx-icon-button" }, providers: provideDbxButton(DbxIconButtonComponent), usesInheritance: true, ngImport: i0, template: `
-    @switch (buttonDisplayTypeSignal()) {
-      @case ('text_button') {
-        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel()" (click)="clickButton()">
-          @if (iconSignal()) {
-            <mat-icon class="dbx-icon-spacer">{{ iconSignal() }}</mat-icon>
-          }
-          <span>{{ textSignal() }}</span>
-          <ng-container *ngTemplateOutlet="content"></ng-container>
-        </button>
-      }
-      @case ('icon_button') {
-        <button mat-icon-button [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel() || iconSignal()" (click)="clickButton()">
-          <mat-icon aria-hidden="true">{{ iconSignal() }}</mat-icon>
-          <ng-container *ngTemplateOutlet="content"></ng-container>
-        </button>
-      }
-    }
-    <ng-template #content>
-      <ng-content></ng-content>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxIconButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dbx-icon-button',
-                    template: `
-    @switch (buttonDisplayTypeSignal()) {
-      @case ('text_button') {
-        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel()" (click)="clickButton()">
-          @if (iconSignal()) {
-            <mat-icon class="dbx-icon-spacer">{{ iconSignal() }}</mat-icon>
-          }
-          <span>{{ textSignal() }}</span>
-          <ng-container *ngTemplateOutlet="content"></ng-container>
-        </button>
-      }
-      @case ('icon_button') {
-        <button mat-icon-button [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel() || iconSignal()" (click)="clickButton()">
-          <mat-icon aria-hidden="true">{{ iconSignal() }}</mat-icon>
-          <ng-container *ngTemplateOutlet="content"></ng-container>
-        </button>
-      }
-    }
-    <ng-template #content>
-      <ng-content></ng-content>
-    </ng-template>
-  `,
-                    providers: provideDbxButton(DbxIconButtonComponent),
-                    host: {
-                        class: 'dbx-icon-button'
-                    },
-                    imports: [MatButtonModule, MatIconModule, MatIconButton, NgTemplateOutlet],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }] });
-
-const DEFAULT_FILTER_POPOVER_BUTTON_DISPLAY_CONTENT = {
-    icon: 'filter_list'
-};
-/**
- * Renders an icon button that opens a filter popover when clicked.
- *
- * @example
- * ```html
- * <dbx-filter-popover-button [config]="filterConfig" [buttonDisplay]="{ icon: 'filter_alt' }"></dbx-filter-popover-button>
- * ```
- */
-class DbxFilterPopoverButtonComponent extends AbstractFilterPopoverButtonDirective {
-    buttonElement = viewChild('button', { ...(ngDevMode ? { debugName: "buttonElement" } : /* istanbul ignore next */ {}), read: ElementRef });
-    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
-    buttonDisplay = input(DEFAULT_FILTER_POPOVER_BUTTON_DISPLAY_CONTENT, { ...(ngDevMode ? { debugName: "buttonDisplay" } : /* istanbul ignore next */ {}), transform: (x) => x ?? DEFAULT_FILTER_POPOVER_BUTTON_DISPLAY_CONTENT });
-    showFilterPopover() {
-        const origin = this.buttonElement()?.nativeElement;
-        this.showPopover(origin);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterPopoverButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxFilterPopoverButtonComponent, isStandalone: true, selector: "dbx-filter-popover-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, buttonDisplay: { classPropertyName: "buttonDisplay", publicName: "buttonDisplay", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <dbx-icon-button #button (buttonClick)="showFilterPopover()" [buttonDisplay]="buttonDisplay()" [disabled]="disabled()"></dbx-icon-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterPopoverButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dbx-filter-popover-button',
-                    template: `
-    <dbx-icon-button #button (buttonClick)="showFilterPopover()" [buttonDisplay]="buttonDisplay()" [disabled]="disabled()"></dbx-icon-button>
-  `,
-                    imports: [DbxIconButtonComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: ElementRef }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonDisplay", required: false }] }] } });
-
 /**
  * Injection token for providing a global array of progress button configurations.
  */
@@ -2273,6 +2157,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], spinnerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerColor", required: false }] }], customButtonColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customButtonColor", required: false }] }], customTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTextColor", required: false }] }], customSpinnerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSpinnerColor", required: false }] }], basic: [{ type: i0.Input, args: [{ isSignal: true, alias: "basic", required: false }] }], tonal: [{ type: i0.Input, args: [{ isSignal: true, alias: "tonal", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], stroked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroked", required: false }] }], flat: [{ type: i0.Input, args: [{ isSignal: true, alias: "flat", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], fab: [{ type: i0.Input, args: [{ isSignal: true, alias: "fab", required: false }] }], allowClickPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClickPropagation", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
+const DEFAULT_FILTER_POPOVER_BUTTON_DISPLAY_CONTENT = {
+    icon: 'filter_list'
+};
+/**
+ * Renders an icon button that opens a filter popover when clicked.
+ *
+ * @example
+ * ```html
+ * <dbx-filter-popover-button [config]="filterConfig" [buttonDisplay]="{ icon: 'filter_alt' }"></dbx-filter-popover-button>
+ * ```
+ */
+class DbxFilterPopoverButtonComponent extends AbstractFilterPopoverButtonDirective {
+    buttonElement = viewChild('button', { ...(ngDevMode ? { debugName: "buttonElement" } : /* istanbul ignore next */ {}), read: ElementRef });
+    disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+    buttonDisplay = input(DEFAULT_FILTER_POPOVER_BUTTON_DISPLAY_CONTENT, { ...(ngDevMode ? { debugName: "buttonDisplay" } : /* istanbul ignore next */ {}), transform: (x) => x ?? DEFAULT_FILTER_POPOVER_BUTTON_DISPLAY_CONTENT });
+    showFilterPopover() {
+        const origin = this.buttonElement()?.nativeElement;
+        this.showPopover(origin);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterPopoverButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxFilterPopoverButtonComponent, isStandalone: true, selector: "dbx-filter-popover-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, buttonDisplay: { classPropertyName: "buttonDisplay", publicName: "buttonDisplay", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <dbx-button #button (buttonClick)="showFilterPopover()" [buttonDisplay]="buttonDisplay()" [disabled]="disabled()" iconOnly></dbx-button>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFilterPopoverButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-filter-popover-button',
+                    template: `
+    <dbx-button #button (buttonClick)="showFilterPopover()" [buttonDisplay]="buttonDisplay()" [disabled]="disabled()" iconOnly></dbx-button>
+  `,
+                    imports: [DbxButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: ElementRef }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonDisplay", required: false }] }] } });
+
+/**
+ * Lightweight button that renders as either an icon-only Material icon button or a text button
+ * with an icon prefix, depending on whether text is provided.
+ *
+ * @deprecated Use `dbx-button` instead. For icon-only buttons use `<dbx-button icon="settings" iconOnly>`.
+ * For icon+text buttons use `<dbx-button icon="settings" text="Label">`. The `dbx-button` component
+ * supports all the same inputs plus working/loading states, colors, and button style variants.
+ *
+ * @example
+ * ```html
+ * <dbx-icon-button icon="settings" (buttonClick)="openSettings()"></dbx-icon-button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <dbx-icon-button icon="add" text="Add Item" (buttonClick)="addItem()"></dbx-icon-button>
+ * ```
+ */
+class DbxIconButtonComponent extends AbstractDbxButtonDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxIconButtonComponent, isStandalone: true, selector: "dbx-icon-button", host: { classAttribute: "dbx-icon-button" }, providers: provideDbxButton(DbxIconButtonComponent), usesInheritance: true, ngImport: i0, template: `
+    @switch (buttonDisplayTypeSignal()) {
+      @case ('text_button') {
+        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel()" (click)="clickButton()">
+          @if (iconSignal()) {
+            <mat-icon class="dbx-icon-spacer">{{ iconSignal() }}</mat-icon>
+          }
+          <span>{{ textSignal() }}</span>
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </button>
+      }
+      @case ('icon_button') {
+        <button mat-icon-button [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel() || iconSignal()" (click)="clickButton()">
+          <mat-icon aria-hidden="true">{{ iconSignal() }}</mat-icon>
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </button>
+      }
+    }
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-icon-button',
+                    template: `
+    @switch (buttonDisplayTypeSignal()) {
+      @case ('text_button') {
+        <button mat-button class="mat-unthemed" [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel()" (click)="clickButton()">
+          @if (iconSignal()) {
+            <mat-icon class="dbx-icon-spacer">{{ iconSignal() }}</mat-icon>
+          }
+          <span>{{ textSignal() }}</span>
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </button>
+      }
+      @case ('icon_button') {
+        <button mat-icon-button [disabled]="disabledSignal()" [attr.aria-label]="ariaLabel() || iconSignal()" (click)="clickButton()">
+          <mat-icon aria-hidden="true">{{ iconSignal() }}</mat-icon>
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </button>
+      }
+    }
+    <ng-template #content>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                    // eslint-disable-next-line @typescript-eslint/no-deprecated -- self-reference in the deprecated component
+                    providers: provideDbxButton(DbxIconButtonComponent),
+                    host: {
+                        class: 'dbx-icon-button'
+                    },
+                    imports: [MatButtonModule, MatIconModule, MatIconButton, NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-deprecated -- this module wraps the deprecated component */
 /**
  * @deprecated Use `dbx-button` instead of `dbx-icon-button`. See {@link DbxIconButtonComponent} for migration guidance.
  */
@@ -2291,6 +2293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
 
 const importsAndExports$m = [
     DbxCoreButtonModule,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- re-exported for backward compatibility
     DbxIconButtonComponent,
     // buttons
     DbxButtonComponent,
@@ -2306,6 +2309,7 @@ const importsAndExports$m = [
 class DbxButtonModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.3", ngImport: i0, type: DbxButtonModule, imports: [DbxCoreButtonModule,
+            // eslint-disable-next-line @typescript-eslint/no-deprecated -- re-exported for backward compatibility
             DbxIconButtonComponent,
             // buttons
             DbxButtonComponent,
@@ -2313,6 +2317,7 @@ class DbxButtonModule {
             // progress
             DbxProgressSpinnerButtonComponent,
             DbxProgressBarButtonComponent], exports: [DbxCoreButtonModule,
+            // eslint-disable-next-line @typescript-eslint/no-deprecated -- re-exported for backward compatibility
             DbxIconButtonComponent,
             // buttons
             DbxButtonComponent,
@@ -2321,6 +2326,7 @@ class DbxButtonModule {
             DbxProgressSpinnerButtonComponent,
             DbxProgressBarButtonComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxButtonModule, imports: [DbxCoreButtonModule,
+            // eslint-disable-next-line @typescript-eslint/no-deprecated -- re-exported for backward compatibility
             DbxIconButtonComponent,
             // buttons
             DbxButtonComponent,
@@ -9755,13 +9761,13 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
     hasNoAnchorsSignal = toSignal(this.hasNoAnchors$);
     nextRotateAnchorSignal = toSignal(this.nextRotateAnchor$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxNavbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxNavbarComponent, isStandalone: true, selector: "dbx-navbar", inputs: { showMenuCaret: { classPropertyName: "showMenuCaret", publicName: "showMenuCaret", isSignal: true, isRequired: false, transformFunction: null }, navAlign: { classPropertyName: "navAlign", publicName: "navAlign", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultText: { classPropertyName: "defaultText", publicName: "defaultText", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-icon-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-icon-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxNavbarComponent, isStandalone: true, selector: "dbx-navbar", inputs: { showMenuCaret: { classPropertyName: "showMenuCaret", publicName: "showMenuCaret", isSignal: true, isRequired: false, transformFunction: null }, navAlign: { classPropertyName: "navAlign", publicName: "navAlign", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: false, transformFunction: null }, defaultText: { classPropertyName: "defaultText", publicName: "defaultText", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n", dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-navbar', host: {
                         class: 'dbx-navbar'
-                    }, imports: [DbxAnchorComponent, MatTabNav, MatTabNavPanel, MatTabLink, DbxIconButtonComponent, MatIconModule, MatMenu, MatMenuItem, NgClass, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-icon-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-icon-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n" }]
+                    }, imports: [DbxAnchorComponent, MatTabNav, MatTabNavPanel, MatTabLink, DbxButtonComponent, MatIconModule, MatMenu, MatMenuItem, NgClass, MatMenuTrigger], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@switch (modeSignal()) {\n  @case ('bar') {\n    <!-- Bar -->\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\" [attr.mat-align-tabs]=\"navAlign()\" aria-label=\"Main navigation\">\n      @for (x of anchorsSignal(); track x.anchor) {\n        <dbx-anchor [anchor]=\"x.anchor\">\n          <a mat-tab-link [active]=\"x.selected\" [attr.aria-current]=\"x.selected ? 'page' : null\">{{ x.anchor.title }}</a>\n        </dbx-anchor>\n      }\n    </nav>\n    <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>\n  }\n  @default {\n    <!-- Button -->\n    @switch (buttonMode()) {\n      <!-- Menu -->\n      @case ('menu') {\n        <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchorsSignal()\">\n          @if (showMenuCaret()) {\n            <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n          }\n        </dbx-button>\n        <mat-menu #menu>\n          @for (x of anchorsSignal(); track x) {\n            <dbx-anchor [anchor]=\"x.anchor\">\n              <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\" [attr.aria-current]=\"x.selected ? 'page' : null\">\n                @if (x.anchor.icon) {\n                  <mat-icon aria-hidden=\"true\">{{ x.anchor.icon }}</mat-icon>\n                }\n                {{ x.anchor.title }}\n              </button>\n            </dbx-anchor>\n          }\n        </mat-menu>\n      }\n      <!-- Rotate -->\n      @case ('rotate') {\n        <dbx-anchor [anchor]=\"nextRotateAnchorSignal()?.anchor\">\n          <dbx-button class=\"nav-menu-button\" ariaLabel=\"open navigation\" [buttonDisplay]=\"buttonDisplaySignal()\" [disabled]=\"hasNoAnchorsSignal()\"></dbx-button>\n        </dbx-anchor>\n      }\n    }\n  }\n}\n" }]
         }], propDecorators: { showMenuCaret: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuCaret", required: false }] }], navAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAlign", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: false }] }], defaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultText", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
 
 /**
@@ -9799,9 +9805,16 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
     _sidenavSub = cleanSubscription();
     _screenMediaService = inject(DbxScreenMediaService);
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /**
+     * Overrides the responsive display mode. When set, the sidenav ignores screen-width breakpoints and uses this mode instead.
+     *
+     * Set to `'mobile'` to keep the sidenav always hidden as an overlay that only opens when toggled.
+     */
+    displayMode = input(undefined, ...(ngDevMode ? [{ debugName: "displayMode" }] : /* istanbul ignore next */ []));
     sidenav = viewChild.required(MatSidenav);
     anchors = input(...(ngDevMode ? [undefined, { debugName: "anchors" }] : /* istanbul ignore next */ []));
-    mode$ = this._screenMediaService.widthType$.pipe(distinctUntilChanged(), map((width) => {
+    responsiveMode$ = this._screenMediaService.widthType$.pipe(distinctUntilChanged(), map((width) => {
         let mode;
         switch (width) {
             case 'micro':
@@ -9820,9 +9833,13 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
         }
         return mode;
     }), distinctUntilChanged(), shareReplay(1));
+    _displayMode$ = toObservable(this.displayMode);
+    mode$ = combineLatest([this.responsiveMode$, this._displayMode$]).pipe(map(([responsive, override]) => override ?? responsive), distinctUntilChanged(), shareReplay(1));
     modeSignal = toSignal(this.mode$);
     disableBackdropSignal = computed(() => this.modeSignal() !== SideNavDisplayMode.MOBILE, ...(ngDevMode ? [{ debugName: "disableBackdropSignal" }] : /* istanbul ignore next */ []));
     sizeCssClassSignal = computed(() => `dbx-sidenav-${this.modeSignal()}`, ...(ngDevMode ? [{ debugName: "sizeCssClassSignal" }] : /* istanbul ignore next */ []));
+    positionCssClassSignal = computed(() => (this.position() === 'end' ? 'dbx-sidenav-end' : 'dbx-sidenav-start'), ...(ngDevMode ? [{ debugName: "positionCssClassSignal" }] : /* istanbul ignore next */ []));
+    cssClassesSignal = computed(() => `${this.sizeCssClassSignal()} ${this.positionCssClassSignal()}`, ...(ngDevMode ? [{ debugName: "cssClassesSignal" }] : /* istanbul ignore next */ []));
     state$ = this.mode$.pipe(map((mode) => {
         let drawer = 'over';
         let open = true;
@@ -9894,9 +9911,9 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxSidenavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxSidenavComponent, isStandalone: true, selector: "dbx-sidenav", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], exportAs: ["sidenav"], usesInheritance: true, ngImport: i0, template: `
-    <mat-sidenav-container class="dbx-sidenav" [ngClass]="sizeCssClassSignal()">
-      <mat-sidenav [dbxColor]="color()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxSidenavComponent, isStandalone: true, selector: "dbx-sidenav", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, anchors: { classPropertyName: "anchors", publicName: "anchors", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], exportAs: ["sidenav"], usesInheritance: true, ngImport: i0, template: `
+    <mat-sidenav-container class="dbx-sidenav" [ngClass]="cssClassesSignal()">
+      <mat-sidenav [dbxColor]="color()" [position]="position()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
         <ng-content select="[top]"></ng-content>
         <dbx-anchor-list class="dbx-sidenav-anchor-list" [anchors]="anchors()"></dbx-anchor-list>
         <span class="spacer"></span>
@@ -9915,8 +9932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     selector: 'dbx-sidenav',
                     exportAs: 'sidenav',
                     template: `
-    <mat-sidenav-container class="dbx-sidenav" [ngClass]="sizeCssClassSignal()">
-      <mat-sidenav [dbxColor]="color()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
+    <mat-sidenav-container class="dbx-sidenav" [ngClass]="cssClassesSignal()">
+      <mat-sidenav [dbxColor]="color()" [position]="position()" [disableClose]="disableBackdropSignal()" [mode]="drawerSignal()">
         <ng-content select="[top]"></ng-content>
         <dbx-anchor-list class="dbx-sidenav-anchor-list" [anchors]="anchors()"></dbx-anchor-list>
         <span class="spacer"></span>
@@ -9932,7 +9949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenav), { isSignal: true }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenav), { isSignal: true }] }], anchors: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchors", required: false }] }] } });
 
 /**
  * Default icon displayed on the sidenav toggle button.
@@ -13976,6 +13993,9 @@ class DbxTextChipsComponent {
     chips = input(...(ngDevMode ? [undefined, { debugName: "chips" }] : /* istanbul ignore next */ []));
     /**
      * Returns the themed background CSS class for a chip's color.
+     *
+     * @param chip - the chip to get the color class for
+     * @returns the CSS class name for the chip's background color, or empty string if no color
      */
     chipColorClass(chip) {
         return chip.color ? dbxColorBackground(chip.color) : '';
@@ -14522,11 +14542,11 @@ class DbxZipBlobPreviewComponent {
         this.selectedNodeSignal.set(selectedNode?.parent);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxZipBlobPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxZipBlobPreviewComponent, isStandalone: true, selector: "dbx-zip-blob-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, downloadFileName: { classPropertyName: "downloadFileName", publicName: "downloadFileName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-icon-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (click)=\"backClicked()\"></dbx-icon-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-icon-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (click)=\"homeClicked()\"></dbx-icon-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (mode()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n", dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon", "color"] }, { kind: "directive", type: DbxListTitleGroupDirective, selector: "[dbxListTitleGroup]", inputs: ["dbxListTitleGroup"] }, { kind: "component", type: DbxZipPreviewEntryListComponent, selector: "dbx-zip-preview-file-entry-list" }, { kind: "component", type: DbxEmbedComponent, selector: "dbx-embed", inputs: ["embedElement", "sanitizeUrl", "srcUrl", "type", "blob"], outputs: ["embedElementChange", "sanitizeUrlChange", "srcUrlChange", "typeChange", "blobChange"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: DbxListItemAnchorModifierDirective, selector: "[dbxListItemAnchorModifier]", inputs: ["dbxListItemAnchorModifier"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxZipBlobPreviewComponent, isStandalone: true, selector: "dbx-zip-blob-preview", inputs: { blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, downloadFileName: { classPropertyName: "downloadFileName", publicName: "downloadFileName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (buttonClick)=\"backClicked()\"></dbx-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (buttonClick)=\"homeClicked()\"></dbx-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (mode()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n", dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxBarHeaderComponent, selector: "dbx-bar-header", inputs: ["text", "icon", "color"] }, { kind: "directive", type: DbxListTitleGroupDirective, selector: "[dbxListTitleGroup]", inputs: ["dbxListTitleGroup"] }, { kind: "component", type: DbxZipPreviewEntryListComponent, selector: "dbx-zip-preview-file-entry-list" }, { kind: "component", type: DbxEmbedComponent, selector: "dbx-embed", inputs: ["embedElement", "sanitizeUrl", "srcUrl", "type", "blob"], outputs: ["embedElementChange", "sanitizeUrlChange", "srcUrlChange", "typeChange", "blobChange"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: DbxListItemAnchorModifierDirective, selector: "[dbxListItemAnchorModifier]", inputs: ["dbxListItemAnchorModifier"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxZipBlobPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-zip-blob-preview', standalone: true, imports: [MatToolbarModule, DbxButtonSpacerDirective, DbxIconButtonComponent, DbxBarHeaderComponent, DbxListTitleGroupDirective, DbxZipPreviewEntryListComponent, DbxEmbedComponent, DbxLoadingComponent, DbxValueListItemModifierDirective, DbxListItemAnchorModifierDirective, DbxListTitleGroupDirective, DbxDownloadBlobButtonComponent, DbxSpacerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-icon-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (click)=\"backClicked()\"></dbx-icon-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-icon-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (click)=\"homeClicked()\"></dbx-icon-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (mode()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n" }]
+            args: [{ selector: 'dbx-zip-blob-preview', standalone: true, imports: [MatToolbarModule, DbxButtonSpacerDirective, DbxButtonComponent, DbxBarHeaderComponent, DbxListTitleGroupDirective, DbxZipPreviewEntryListComponent, DbxEmbedComponent, DbxLoadingComponent, DbxValueListItemModifierDirective, DbxListItemAnchorModifierDirective, DbxListTitleGroupDirective, DbxDownloadBlobButtonComponent, DbxSpacerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dbx-loading [context]=\"context\">\n  <div class=\"dbx-flex-bar dbx-zip-blob-preview-toolbar\">\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"arrow_upward\" text=\"Back\" (buttonClick)=\"backClicked()\"></dbx-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-button [disabled]=\"!selectedNodeSignal()\" icon=\"home\" text=\"Home\" (buttonClick)=\"homeClicked()\"></dbx-button>\n    <dbx-spacer></dbx-spacer>\n    @if (downloadZipFileBlobButtonConfigSignal()) {\n      <dbx-download-blob-button [config]=\"downloadZipFileBlobButtonConfigSignal()\"></dbx-download-blob-button>\n    }\n  </div>\n  <dbx-bar-header class=\"dbx-zip-blob-preview-header\" [icon]=\"selectedNodeIconSignal()\" [text]=\"selectedNodePathSignal()\"></dbx-bar-header>\n  <div class=\"dbx-zip-blob-preview-content\">\n    @switch (mode()) {\n      @case ('view_directory') {\n        <dbx-zip-preview-file-entry-list [state]=\"listEntriesState$\" [dbxListTitleGroup]=\"listTitleGroupDelegate\" [dbxListItemModifier] [dbxListItemAnchorModifier]=\"makeEntryAnchor\"></dbx-zip-preview-file-entry-list>\n      }\n      @case ('view_entry') {\n        <dbx-embed class=\"dbx-zip-blob-preview-content-embed\" [blob]=\"selectedFileEntryBlobSignal()\"></dbx-embed>\n      }\n    }\n  </div>\n</dbx-loading>\n" }]
         }], propDecorators: { blob: [{ type: i0.Input, args: [{ isSignal: true, alias: "blob", required: false }] }], downloadFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadFileName", required: false }] }] } });
 
 /**