@dereekb/dbx-web 13.42.0 → 13.43.0

package/fesm2022/dereekb-dbx-web.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Injectable, input, inject, effect, Directive, NgModule, ChangeDetectionStrategy, Component, output, computed, HostListener, forwardRef, model, InjectionToken, viewChild, ElementRef, makeEnvironmentProviders, untracked, ApplicationRef, Injector, EnvironmentInjector, createComponent, DestroyRef, signal, TemplateRef, SecurityContext, ViewContainerRef, booleanAttribute, Renderer2 } from '@angular/core';
-import { asPromise, DASH_CHARACTER_PREFIX_INSTANCE, hashStringToNumber, cssTokenVar, useIterableOrValue, isDefinedAndNotFalse, spaceSeparatedCssClasses, cssClassesSet, 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, safeCompareEquality, addMilliseconds, isPast, asArray, slashPathDetails, mimeTypeForFileExtension, slashPathDirectoryTree, nameToInitials, isMaybeNot, isNotFalse, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, invertMaybeBoolean, splitCommaSeparatedStringToSet, ZIP_FILE_MIME_TYPE, cachedGetter, sortByNumberFunction, JPEG_MIME_TYPES, JPEG_MIME_TYPE, PNG_MIME_TYPE, PDF_MIME_TYPE, JSON_MIME_TYPE, sequentialIncrementingNumberStringModelIdFactory, PDF_HEADER, PDF_EOF_MARKER, PDF_ENCRYPT_MARKER } from '@dereekb/util';
+import { asPromise, DASH_CHARACTER_PREFIX_INSTANCE, hashStringToNumber, cssTokenVar, useIterableOrValue, isDefinedAndNotFalse, spaceSeparatedCssClasses, cssClassesSet, 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, safeCompareEquality, nameToInitials, isMaybeNot, isNotFalse, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, asArray, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, invertMaybeBoolean, splitCommaSeparatedStringToSet, addMilliseconds, isPast, slashPathDetails, mimeTypeForFileExtension, slashPathDirectoryTree, ZIP_FILE_MIME_TYPE, cachedGetter, sortByNumberFunction, JPEG_MIME_TYPES, JPEG_MIME_TYPE, PNG_MIME_TYPE, PDF_MIME_TYPE, JSON_MIME_TYPE, sequentialIncrementingNumberStringModelIdFactory, PDF_HEADER, PDF_EOF_MARKER, PDF_ENCRYPT_MARKER } from '@dereekb/util';
 import * as i1$2 from '@dereekb/dbx-core';
-import { completeOnDestroy, clean, AbstractTransitionWatcherDirective, DbxInjectionComponent, dbxActionWorkProgress, AbstractDbxButtonDirective, hasNonTrivialChildNodes, provideDbxButton, DbxCoreButtonModule, createInjectorForInjectionComponentConfig, initInjectionComponent, AbstractDbxActionValueGetterDirective, cleanSubscription, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionWorkable, provideDbxActionWorkable, 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, DbxActionDisabledDirective, DbxActionHandlerDirective } from '@dereekb/dbx-core';
+import { completeOnDestroy, clean, AbstractTransitionWatcherDirective, DbxInjectionComponent, dbxActionWorkProgress, AbstractDbxButtonDirective, hasNonTrivialChildNodes, provideDbxButton, DbxCoreButtonModule, createInjectorForInjectionComponentConfig, initInjectionComponent, AbstractDbxActionValueGetterDirective, cleanSubscription, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionWorkable, provideDbxActionWorkable, 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, TimeDistancePipe, DbxActionDisabledDirective, DbxActionHandlerDirective } 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, NEVER } from 'rxjs';
-import { LockSet, distinctUntilItemsHaveDifferentValues, filterMaybe, skipAllInitialMaybe, maybeValueFromObservableOrValue, switchMapMaybeLoadingContextStream, LoadingStateType, loadingStateType, successResult, valueFromFinishedLoadingState, loadingStateContext, initialize, asObservable, isNot, mapForEach, switchMapMaybe, listLoadingStateContext, isLoadingStateFinishedLoading, startWithBeginLoading, loadingStateFromObs, errorResult, beginLoading, distinctUntilHasDifferentValues } from '@dereekb/rxjs';
+import { LockSet, distinctUntilItemsHaveDifferentValues, filterMaybe, skipAllInitialMaybe, maybeValueFromObservableOrValue, switchMapMaybeLoadingContextStream, LoadingStateType, loadingStateType, initialize, asObservable, isNot, mapForEach, switchMapMaybe, listLoadingStateContext, isLoadingStateFinishedLoading, startWithBeginLoading, successResult, valueFromFinishedLoadingState, loadingStateContext, loadingStateFromObs, errorResult, beginLoading, distinctUntilHasDifferentValues } from '@dereekb/rxjs';
 import { ComponentStore } from '@ngrx/component-store';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/material/button';
@@ -33,8 +33,6 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { createAction, props, createReducer, on, combineReducers, createFeatureSelector, createSelector, Store, provideState } from '@ngrx/store';
 import { Actions, createEffect, ofType, provideEffects } from '@ngrx/effects';
 import { capitalCase } from 'change-case-all';
-import { Clipboard } from '@angular/cdk/clipboard';
-import { BlobWriter, ZipReader, BlobReader } from '@zip.js/zip.js';
 import { MediaMatcher } from '@angular/cdk/layout';
 import * as i1$3 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -52,6 +50,8 @@ import * as i1$8 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { BlobWriter, ZipReader, BlobReader } from '@zip.js/zip.js';
 import { PDFName, PDFString, PDFHexString, PDFDocument, degrees } from '@cantoo/pdf-lib';
 import { moveItemInArray, CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDropList } from '@angular/cdk/drag-drop';
 
@@ -3439,10 +3439,12 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
             ...baseConfig,
             componentClass,
             init: (filterSource) => {
-                connector.connectWithSource(filterSource);
+                // NOTE: the source is seeded before it is connected, as connecting subscribes to filter$ immediately.
+                // A source that carries a default filter would otherwise emit that default at connect time, so merely opening the popover would reset the filter to the default.
                 if (initialFilterObs && filterSource.initWithFilter) {
                     filterSource.initWithFilter(initialFilterObs);
                 }
+                connector.connectWithSource(filterSource);
                 if (closeOnFilterChange !== false) {
                     cleanSubscription(filterSource.filter$.pipe(skip(1), filterMaybe(), first(), defaultIfEmpty(undefined)).subscribe(() => {
                         this.close();
@@ -5604,6 +5606,12 @@ class AbstractDbxFileUploadComponent {
      * Whether or not multiple files can be uploaded.
      */
     multiple = input(undefined, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: (x) => x === '' || x });
+    /**
+     * The most files that can be selected at once.
+     *
+     * Ignored while multiple is false, which is already a limit of one.
+     */
+    maxFiles = input(...(ngDevMode ? [undefined, { debugName: "maxFiles" }] : /* istanbul ignore next */ []));
     /**
      * Accepted file types filter.
      */
@@ -5620,6 +5628,10 @@ class AbstractDbxFileUploadComponent {
      * This signal is set by setMultiple
      */
     _multipleSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "_multipleSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * This signal is set by setMaxFiles
+     */
+    _maxFilesSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxFilesSignal" }] : /* istanbul ignore next */ []));
     /**
      * This signal is set by setAccept
      */
@@ -5637,6 +5649,11 @@ class AbstractDbxFileUploadComponent {
         const multipleSignal = this._multipleSignal();
         return multipleSignal ?? multipleInput;
     }, ...(ngDevMode ? [{ debugName: "multipleSignal" }] : /* istanbul ignore next */ []));
+    maxFilesSignal = computed(() => {
+        const maxFilesInput = this.maxFiles();
+        const maxFilesSignal = this._maxFilesSignal();
+        return maxFilesSignal ?? maxFilesInput;
+    }, ...(ngDevMode ? [{ debugName: "maxFilesSignal" }] : /* istanbul ignore next */ []));
     acceptSignal = computed(() => {
         const acceptInput = this.accept();
         const acceptSignal = this._acceptSignal();
@@ -5668,18 +5685,21 @@ class AbstractDbxFileUploadComponent {
     setMultiple(multiple) {
         this._multipleSignal.set(multiple);
     }
+    setMaxFiles(maxFiles) {
+        this._maxFilesSignal.set(maxFiles);
+    }
     setAccept(accept) {
         this._acceptSignal.set(accept);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", 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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractDbxFileUploadComponent, isStandalone: true, inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", 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: "21.2.11", ngImport: i0, type: AbstractDbxFileUploadComponent, decorators: [{
             type: Directive,
             args: [{
                     standalone: true
                 }]
-        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], working: [{ type: i0.Input, args: [{ isSignal: true, alias: "working", required: false }] }] } });
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], working: [{ type: i0.Input, args: [{ isSignal: true, alias: "working", required: false }] }] } });
 
 /**
  * Returns a string that can be used as the "accept" attribute of a file input element.
@@ -5705,6 +5725,32 @@ function fileAcceptString(accept) {
 function fileAcceptFilterTypeStringArray(accept) {
     return typeof accept === 'string' ? accept.split(',').map((x) => x.trim()) : accept;
 }
+/**
+ * Returns how many files a selection may accept, or undefined when there is no limit.
+ *
+ * @param input - The multiple/maxFiles pair to resolve.
+ * @returns The effective limit, or undefined when unlimited.
+ *
+ * @example
+ * ```ts
+ * fileArrayAcceptMaxFiles({ multiple: false }); // 1
+ * fileArrayAcceptMaxFiles({ multiple: true, maxFiles: 3 }); // 3
+ * fileArrayAcceptMaxFiles({ multiple: true }); // undefined
+ * ```
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+function fileArrayAcceptMaxFiles(input) {
+    const { multiple, maxFiles } = input;
+    let result;
+    if (multiple === false) {
+        result = 1;
+    }
+    else if (maxFiles != null) {
+        result = Math.max(0, Math.floor(maxFiles));
+    }
+    return result;
+}
 /**
  * Creates a {@link FileArrayAcceptMatchFunction} that filters and separates files based on accept criteria and multiple file support.
  *
@@ -5722,17 +5768,18 @@ function fileAcceptFilterTypeStringArray(accept) {
  */
 function fileArrayAcceptMatchFunction(config) {
     const multiple = config.multiple ?? true;
+    const maxFiles = fileArrayAcceptMaxFiles(config);
     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);
+        if (maxFiles != null) {
+            const front = splitFront(acceptedType, maxFiles);
             accepted = front.front;
             rejected = [...rejectedType, ...front.remaining];
         }
-        return { multiple, input, accepted, rejected, acceptedType, rejectedType };
+        return { multiple, maxFiles, input, accepted, rejected, acceptedType, rejectedType };
     };
 }
 /**
@@ -5839,7 +5886,7 @@ class DbxFileUploadAreaComponent extends AbstractDbxFileUploadComponent {
     areaClicked = output();
     areaDragActiveChanged = output();
     dragOverStateSignal = signal(false, ...(ngDevMode ? [{ debugName: "dragOverStateSignal" }] : /* istanbul ignore next */ []));
-    filesAcceptedFunctionSignal = computed(() => fileArrayAcceptMatchFunction({ multiple: this.multipleSignal() ?? false, accept: this.acceptSignal() }), ...(ngDevMode ? [{ debugName: "filesAcceptedFunctionSignal" }] : /* istanbul ignore next */ []));
+    filesAcceptedFunctionSignal = computed(() => fileArrayAcceptMatchFunction({ multiple: this.multipleSignal() ?? false, maxFiles: this.maxFilesSignal(), accept: this.acceptSignal() }), ...(ngDevMode ? [{ debugName: "filesAcceptedFunctionSignal" }] : /* istanbul ignore next */ []));
     onClick(evt) {
         evt.stopPropagation();
         if (!this.disabled()) {
@@ -5956,6 +6003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 args: ['drop', ['$event']]
             }] } });
 
+// stands in for a type filter the input's own accept attribute has already applied
+const ACCEPT_EVERY_FILE = () => true;
 /**
  * File upload button that opens a native file picker and emits accepted/rejected file results.
  *
@@ -5976,10 +6025,18 @@ class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent {
         return typeof accept === 'function' ? undefined : fileAcceptString(accept);
     }, ...(ngDevMode ? [{ debugName: "buttonAcceptSignal" }] : /* istanbul ignore next */ []));
     buttonMultipleSignal = computed(() => this.multipleSignal() ?? false, ...(ngDevMode ? [{ debugName: "buttonMultipleSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * The match function the picked files are run through.
+     *
+     * A non-function accept is left to the input's own accept attribute — but the COUNT still has to be
+     * applied here, as the file picker has no concept of a limit and will happily hand back more than the
+     * destination can hold.
+     */
     filesAcceptedFunctionSignal = computed(() => {
         const accept = this.acceptSignal();
         const multiple = this.buttonMultipleSignal();
-        return typeof accept === 'function' ? fileArrayAcceptMatchFunction({ multiple, accept }) : undefined;
+        const maxFiles = this.maxFilesSignal();
+        return fileArrayAcceptMatchFunction({ multiple, maxFiles, accept: typeof accept === 'function' ? accept : ACCEPT_EVERY_FILE });
     }, ...(ngDevMode ? [{ debugName: "filesAcceptedFunctionSignal" }] : /* istanbul ignore next */ []));
     /**
      * The HTML attribute should not be added if it is false, so we return null.
@@ -6005,16 +6062,8 @@ class DbxFileUploadButtonComponent extends AbstractDbxFileUploadComponent {
         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: [] } });
-            }
+            const matchResult = this.filesAcceptedFunctionSignal()(allFiles);
+            this.filesChanged.emit({ allFiles, matchResult });
         }
         // reset the input value
         if (input.value) {
@@ -6109,6 +6158,11 @@ class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
         const multiple = this.multipleSignal();
         return multiple ?? config?.multiple;
     }, ...(ngDevMode ? [{ debugName: "uploadMultipleSignal" }] : /* istanbul ignore next */ []));
+    uploadMaxFilesSignal = computed(() => {
+        const config = this.config();
+        const maxFiles = this.maxFilesSignal();
+        return maxFiles ?? config?.maxFiles;
+    }, ...(ngDevMode ? [{ debugName: "uploadMaxFilesSignal" }] : /* istanbul ignore next */ []));
     uploadAcceptSignal = computed(() => {
         const config = this.config();
         const accept = this.acceptSignal();
@@ -6130,7 +6184,7 @@ class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }, buttonDisplay: { classPropertyName: "buttonDisplay", publicName: "buttonDisplay", 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()">
+    <dbx-file-upload-area #area [show]="showAreaSignal()" [hint]="areaHintSignal()" [text]="areaTextSignal()" [icon]="areaIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" [maxFiles]="uploadMaxFilesSignal()" (filesChanged)="areaFilesChanged($event)" (areaClicked)="areaClicked()" [disabled]="disabledSignal()" [working]="workingSignal()">
       <ng-content></ng-content>
       @if (showButtonSignal()) {
         <ng-template [ngTemplateOutlet]="buttonTemplate"></ng-template>
@@ -6138,7 +6192,7 @@ class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
     </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>
+      <dbx-file-upload-button #button [text]="buttonTextSignal()" [icon]="buttonIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" [maxFiles]="uploadMaxFilesSignal()" (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", "ariaLabel", "buttonStyle"], outputs: ["filesChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -6147,7 +6201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             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()">
+    <dbx-file-upload-area #area [show]="showAreaSignal()" [hint]="areaHintSignal()" [text]="areaTextSignal()" [icon]="areaIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" [maxFiles]="uploadMaxFilesSignal()" (filesChanged)="areaFilesChanged($event)" (areaClicked)="areaClicked()" [disabled]="disabledSignal()" [working]="workingSignal()">
       <ng-content></ng-content>
       @if (showButtonSignal()) {
         <ng-template [ngTemplateOutlet]="buttonTemplate"></ng-template>
@@ -6155,7 +6209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
     </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>
+      <dbx-file-upload-button #button [text]="buttonTextSignal()" [icon]="buttonIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" [maxFiles]="uploadMaxFilesSignal()" (filesChanged)="buttonFilesChanged($event)" [disabled]="disabledSignal()" [working]="workingSignal()" [buttonStyle]="buttonStyle()"></dbx-file-upload-button>
     </ng-template>
   `,
                     providers: provideDbxFileUploadActionCompatable(DbxFileUploadComponent),
@@ -8841,662 +8895,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], downloadButton: [{ type: i0.ViewChild, args: ['downloadButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
- * Creates a {@link CopyToClipboardFunction} that retries the copy operation until success or timeout.
+ * Default details date style used by a file list item.
+ */
+const DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_DATE_STYLE = 'short';
+/**
+ * Default css class applied to a file list item's details line.
+ */
+const DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_CLASS = 'dbx-hint';
+
+/**
+ * Ordered numeric mapping of {@link ScreenMediaWidthType} for size comparisons.
+ */
+const SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP = {
+    micro: 0,
+    small: 1,
+    tablet: 2,
+    large: 3,
+    full: 4
+};
+/**
+ * Returns `true` if the current screen width type is at least as wide as the given breakpoint.
  *
- * @param clipboard - The Angular CDK Clipboard instance.
- * @param config - Optional timeout and retry settings.
- * @returns Copies text to the clipboard.
+ * @param current - The current screen width type.
+ * @param breakpoint - The minimum width type to check against.
+ * @returns `true` if the current width type meets or exceeds the breakpoint.
  *
  * @example
  * ```ts
- * const copy = copyToClipboardFunction(clipboard, { copyTimeoutSeconds: 10 });
- * const success = await copy('some text');
+ * screenMediaWidthTypeIsActive('tablet', 'small'); // true
+ * screenMediaWidthTypeIsActive('micro', 'tablet'); // false
  * ```
- *
- * @__NO_SIDE_EFFECTS__
  */
-function copyToClipboardFunction(clipboard, config) {
-    const copyTimeoutSeconds = config?.copyTimeoutSeconds ?? 15;
-    const delayBetweenCopyAttempts = config?.delayBetweenCopyAttempts ?? MS_IN_SECOND;
-    const onCopyResult = config?.onCopyResult;
-    const copyFunction = ((content) => {
-        return new Promise((resolve, reject) => {
-            const pending = clipboard.beginCopy(content);
-            const copyTimeoutAt = addMilliseconds(new Date(), copyTimeoutSeconds * MS_IN_SECOND);
-            const attempt = () => {
-                const copyIsFinished = pending.copy();
-                if (!copyIsFinished && !isPast(copyTimeoutAt)) {
-                    setTimeout(attempt, delayBetweenCopyAttempts);
-                }
-                else {
-                    // Destroy the pending copy
-                    pending.destroy();
-                    if (copyIsFinished) {
-                        resolve(true);
-                        onCopyResult?.(true, content);
-                    }
-                    else {
-                        reject(new Error('Failed to copy content to clipboard'));
-                        onCopyResult?.(false, content);
-                    }
-                }
-            };
-            attempt();
-        });
-    });
-    copyFunction._clipboard = clipboard;
-    return copyFunction;
+function screenMediaWidthTypeIsActive(current, breakpoint) {
+    return compareScreenMediaWidthTypes(current, breakpoint, (a, b) => a >= b);
 }
 /**
- * Injects a {@link CopyToClipboardFunction} using Angular's dependency injection.
- *
- * Must be called in an Angular injection context.
- *
- * @param config - Optional timeout and retry settings.
- * @returns The clipboard copy function.
- *
- * @example
- * ```ts
- * const copy = injectCopyToClipboardFunction();
- * await copy('copied text');
- * ```
+ * Compares two {@link ScreenMediaWidthType} values using a custom comparator on their numeric sizes.
  *
- * @__NO_SIDE_EFFECTS__
+ * @param a - The first screen width type.
+ * @param b - The second screen width type.
+ * @param compare - A comparator function applied to the numeric size values of `a` and `b`
+ * @returns The result of applying the comparator to the mapped numeric sizes.
  */
-function injectCopyToClipboardFunction(config) {
-    return copyToClipboardFunction(inject(Clipboard), config);
+function compareScreenMediaWidthTypes(a, b, compare) {
+    return compare(SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP[a], SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP[b]);
 }
+
 /**
- * Injects a {@link CopyToClipboardFunctionWithSnackbarMessage} that copies text to the clipboard
- * and shows a Material snackbar with a success or failure message.
+ * Abstract configuration class for {@link DbxScreenMediaService} defining responsive breakpoints.
  *
- * Must be called in an Angular injection context.
+ * Provide a concrete instance via {@link provideDbxScreenMediaService} or supply values directly.
+ */
+class DbxScreenMediaServiceConfig {
+}
+/**
+ * Default responsive breakpoint configuration with standard mobile/tablet/desktop thresholds.
+ */
+const DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG = {
+    microScreenWidthMax: 360,
+    smallScreenWidthMax: 520,
+    tabletScreenWidthMax: 786,
+    largeScreenWidthMax: 1280,
+    tinyScreenHeightMax: 280
+};
+/**
+ * Reactive service that tracks the current screen width and height categories using CSS media queries.
  *
- * @param config - Optional configuration for copy behavior and snackbar messages.
- * @returns Clipboard copy function with snackbar notification support.
+ * Emits {@link ScreenMediaWidthType} and {@link ScreenMediaHeightType} values that update
+ * as the viewport is resized. Use {@link isBreakpointActive} to reactively check whether
+ * the screen meets a minimum width breakpoint.
  *
  * @example
  * ```ts
- * const copy = injectCopyToClipboardFunctionWithSnackbarMessage({
- *   successMessage: 'Link copied!',
- *   snackbarDuration: 2000
- * });
- * await copy('https://example.com');
+ * readonly screenService = inject(DbxScreenMediaService);
+ * readonly isTabletOrLarger$ = this.screenService.isBreakpointActive('tablet');
  * ```
  */
-function injectCopyToClipboardFunctionWithSnackbarMessage(config) {
-    // TODO: Add service for configuring global defaults for snackbar messages
-    const snackbar = inject(MatSnackBar);
-    const DEFAULT_SUCCESS_MESSAGE = 'Copied to clipboard';
-    const DEFAULT_FAILURE_MESSAGE = 'Content failed to copy...';
-    const DEFAULT_SNACKBAR_DURATION = 3 * MS_IN_SECOND;
-    let snackbarMessagesEnabled = true;
-    let successMessage = DEFAULT_SUCCESS_MESSAGE;
-    let failureMessage = DEFAULT_FAILURE_MESSAGE;
-    let snackbarDuration = DEFAULT_SNACKBAR_DURATION;
-    const _setSnackbarMessagesConfig = (config) => {
-        if (config != null) {
-            const { successMessage: inputSuccessMessage, failureMessage: inputFailureMessage, snackbarDuration: inputSnackbarDuration } = config;
-            successMessage = inputSuccessMessage ?? successMessage ?? DEFAULT_SUCCESS_MESSAGE;
-            failureMessage = inputFailureMessage ?? failureMessage ?? DEFAULT_FAILURE_MESSAGE;
-            snackbarDuration = inputSnackbarDuration ?? snackbarDuration ?? DEFAULT_SNACKBAR_DURATION;
-        }
-    };
-    if (config) {
-        _setSnackbarMessagesConfig(config);
+class DbxScreenMediaService {
+    _media = inject(MediaMatcher);
+    _microQuery;
+    _smallQuery;
+    _tabletQuery;
+    _largeQuery;
+    _tinyHeightQuery;
+    _updateWidth = new Subject();
+    _updateHeight = new Subject();
+    widthType$ = this._updateWidth.pipe(initialize(() => this._updateWidth.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map(() => this._readWidthType()), distinctUntilChanged(), shareReplay(1));
+    heightType$ = this._updateWidth.pipe(initialize(() => this._updateHeight.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map(() => this._readHeightType()), distinctUntilChanged(), shareReplay(1));
+    constructor() {
+        const { microScreenWidthMax, smallScreenWidthMax, tabletScreenWidthMax, largeScreenWidthMax } = inject(DbxScreenMediaServiceConfig);
+        this._microQuery = this._media.matchMedia(`screen and (max-width:${microScreenWidthMax}px)`);
+        this._smallQuery = this._media.matchMedia(`screen and (max-width:${smallScreenWidthMax}px)`);
+        this._tabletQuery = this._media.matchMedia(`screen and (max-width:${tabletScreenWidthMax}px)`);
+        this._largeQuery = this._media.matchMedia(`screen and (max-width:${largeScreenWidthMax}px)`);
+        this._tinyHeightQuery = this._media.matchMedia(`screen and (max-width:${largeScreenWidthMax}px)`);
+        const widthHandler = () => this._updateWidth.next();
+        const heightHandler = () => this._updateHeight.next();
+        this._microQuery.onchange = widthHandler;
+        this._smallQuery.onchange = widthHandler;
+        this._tabletQuery.onchange = widthHandler;
+        this._largeQuery.onchange = widthHandler;
+        this._tinyHeightQuery.onchange = heightHandler;
     }
-    const onCopyResult = (success, content) => {
-        config?.onCopyResult?.(success, content);
-        if (snackbarMessagesEnabled) {
-            const message = success ? getValueFromGetter(successMessage, content) : getValueFromGetter(failureMessage, content);
-            snackbar.open(message, undefined, { duration: snackbarDuration });
+    destroy() {
+        this._microQuery.onchange = null;
+        this._smallQuery.onchange = null;
+        this._tabletQuery.onchange = null;
+        this._largeQuery.onchange = null;
+        this._updateWidth.complete();
+        this._updateHeight.complete();
+    }
+    /**
+     * Returns an observable that emits `true` when the current screen width is at least as wide as the given breakpoint.
+     *
+     * @param inputBreakpoint - The minimum width type or an observable of it.
+     * @returns Observable of whether the breakpoint is currently active.
+     */
+    isBreakpointActive(inputBreakpoint) {
+        return combineLatest([this.widthType$, asObservable(inputBreakpoint)]).pipe(map(([current, breakpoint]) => screenMediaWidthTypeIsActive(current, breakpoint)), distinctUntilChanged(), shareReplay(1));
+    }
+    _readWidthType() {
+        let width;
+        if (this._microQuery.matches) {
+            width = 'micro';
         }
-    };
-    const result = copyToClipboardFunction(inject(Clipboard), { ...config, onCopyResult });
-    result.setSnackbarMessagesConfig = _setSnackbarMessagesConfig;
-    result.setSnackbarMessagesEnabled = (enabled) => {
-        snackbarMessagesEnabled = enabled;
-    };
-    return result;
+        else if (this._smallQuery.matches) {
+            width = 'small';
+        }
+        else if (this._tabletQuery.matches) {
+            width = 'tablet';
+        }
+        else if (this._largeQuery.matches) {
+            width = 'large';
+        }
+        else {
+            width = 'full';
+        }
+        return width;
+    }
+    _readHeightType() {
+        return this._tinyHeightQuery ? 'tiny' : 'normal';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxScreenMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxScreenMediaService });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxScreenMediaService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
 /**
- * Abstract base class for clipboard directives that provides copy-to-clipboard
- * functionality with configurable snackbar notifications.
- *
- * Subclasses should call `this._copyToClipboard(text)` to trigger a copy operation.
- */
-class AbstractDbxClipboardDirective {
-    _copyToClipboard = injectCopyToClipboardFunctionWithSnackbarMessage();
-    clipboardSnackbarMessagesConfig = input(undefined, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesConfig" }] : /* istanbul ignore next */ []));
-    clipboardSnackbarMessagesEnabled = input(true, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesEnabled" }] : /* istanbul ignore next */ []));
-    _configEffect = effect(() => {
-        this._copyToClipboard.setSnackbarMessagesConfig(this.clipboardSnackbarMessagesConfig());
-    }, ...(ngDevMode ? [{ debugName: "_configEffect" }] : /* istanbul ignore next */ []));
-    _enabledEffect = effect(() => {
-        this._copyToClipboard.setSnackbarMessagesEnabled(this.clipboardSnackbarMessagesEnabled());
-    }, ...(ngDevMode ? [{ debugName: "_enabledEffect" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractDbxClipboardDirective, isStandalone: true, inputs: { clipboardSnackbarMessagesConfig: { classPropertyName: "clipboardSnackbarMessagesConfig", publicName: "clipboardSnackbarMessagesConfig", isSignal: true, isRequired: false, transformFunction: null }, clipboardSnackbarMessagesEnabled: { classPropertyName: "clipboardSnackbarMessagesEnabled", publicName: "clipboardSnackbarMessagesEnabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxClipboardDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { clipboardSnackbarMessagesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesConfig", required: false }] }], clipboardSnackbarMessagesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesEnabled", required: false }] }] } });
-
-/**
- * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners.
- * Useful for displaying bounded content areas such as lists or previews with a constrained height.
- *
- * Pits round their corners by default. Pass `[square]="true"` to square the pit — this applies the
- * common `.dbx-corners-none` opt-out utility rather than a pit-specific class.
- *
- * When `[scrollable]` is set the pit frame (padding, background, corners) stays fixed and an inner
- * `.dbx-content-pit-scrollable-content` wrapper does the scrolling — wrap the body in that element so
- * the frame doesn't shift at the scroll extremes. The resolved max height is published as the
- * `--dbx-content-pit-scrollable-max-height` custom property, which the inner wrapper reads.
- *
- * @dbxWebComponent
- * @dbxWebSlug content-pit
- * @dbxWebCategory layout
- * @dbxWebRelated content-box, content-elevate
- * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
- * @dbxWebMinimalExample ```html
- * <dbx-content-pit>Body</dbx-content-pit>
- * ```
- *
- * @example
- * ```html
- * <div dbxContentPit>Inset block</div>
- * ```
- */
-class DbxContentPitDirective {
-    scrollable = input(...(ngDevMode ? [undefined, { debugName: "scrollable" }] : /* istanbul ignore next */ []));
-    square = input(false, ...(ngDevMode ? [{ debugName: "square" }] : /* istanbul ignore next */ []));
-    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;
-    }, ...(ngDevMode ? [{ debugName: "scrollableHeightSignal" }] : /* istanbul ignore next */ []));
-    // The pit always publishes its own scroll cap so the `.dbx-content-pit-scrollable-content`
-    // wrapper reads it directly rather than inheriting the global `--dbx-content-pit-scrollable-max-height`
-    // default (140px) from the theme root. `none` when not scrollable lets the wrapper grow freely.
-    scrollableMaxHeightSignal = computed(() => this.scrollableHeightSignal() ?? 'none', ...(ngDevMode ? [{ debugName: "scrollableMaxHeightSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollableHeightSignal() != null", "class.dbx-corners-none": "square()", "style.--dbx-content-pit-scrollable-max-height": "scrollableMaxHeightSignal()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'dbx-content-pit, [dbxContentPit]',
-                    host: {
-                        class: 'd-block dbx-content-pit',
-                        '[class.dbx-content-pit-scrollable]': 'scrollableHeightSignal() != null',
-                        '[class.dbx-corners-none]': 'square()',
-                        '[style.--dbx-content-pit-scrollable-max-height]': 'scrollableMaxHeightSignal()'
-                    },
-                    standalone: true
-                }]
-        }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }] } });
-
-/**
- * Displays a preview of text content with options to copy to clipboard and download as a file. Supports loading states for async content retrieval.
- *
- * @example
- * ```html
- * <dbx-download-text-view [content]="{ content: 'Hello World', name: 'greeting.txt', mimeType: 'text/plain' }" [showPreview]="true"></dbx-download-text-view>
- * ```
- */
-class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
-    downloadButton = viewChild('downloadButton', { ...(ngDevMode ? { debugName: "downloadButton" } : /* istanbul ignore next */ {}), read: ElementRef });
-    showDownloadButton = input(true, ...(ngDevMode ? [{ debugName: "showDownloadButton" }] : /* istanbul ignore next */ []));
-    loadingText = input(undefined, ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
-    linear = input(undefined, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
-    showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : /* istanbul ignore next */ []));
-    showPreview = input(true, ...(ngDevMode ? [{ debugName: "showPreview" }] : /* istanbul ignore next */ []));
-    showExpandPreviewButton = input(true, ...(ngDevMode ? [{ debugName: "showExpandPreviewButton" }] : /* istanbul ignore next */ []));
-    expandPreview = model(false, ...(ngDevMode ? [{ debugName: "expandPreview" }] : /* istanbul ignore next */ []));
-    content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
-    contentState = input(undefined, ...(ngDevMode ? [{ debugName: "contentState" }] : /* istanbul ignore next */ []));
-    contentState$ = toObservable(this.contentState).pipe(maybeValueFromObservableOrValue(), shareReplay(1));
-    contentStateSignal = toSignal(this.contentState$);
-    contentLoadingStateSignal = computed(() => {
-        const content = this.content();
-        const contentState = this.contentStateSignal();
-        let result;
-        if (contentState) {
-            result = contentState;
-        }
-        else if (content) {
-            result = successResult(content);
-        }
-        return result;
-    }, ...(ngDevMode ? [{ debugName: "contentLoadingStateSignal" }] : /* istanbul ignore next */ []));
-    contentLoadingState$ = toObservable(this.contentLoadingStateSignal);
-    content$ = this.contentLoadingState$.pipe(switchMap((x) => {
-        return x ? of(x).pipe(valueFromFinishedLoadingState()) : of(undefined);
-    }));
-    contentSignal = toSignal(this.content$);
-    contentDataSignal = computed(() => this.contentSignal()?.content, ...(ngDevMode ? [{ debugName: "contentDataSignal" }] : /* istanbul ignore next */ []));
-    fileNameSignal = computed(() => this.contentSignal()?.name ?? 'download.txt', ...(ngDevMode ? [{ debugName: "fileNameSignal" }] : /* istanbul ignore next */ []));
-    downloadConfigSignal = computed(() => {
-        const content = this.contentSignal();
-        const fileName = this.fileNameSignal();
-        let result = undefined;
-        if (content) {
-            result = {
-                blob: new Blob([content.content], { type: content.mimeType ?? 'application/octet-stream' }),
-                fileName
-            };
-        }
-        return result;
-    }, ...(ngDevMode ? [{ debugName: "downloadConfigSignal" }] : /* istanbul ignore next */ []));
-    context = loadingStateContext({ obs: this.contentLoadingState$ });
-    handleCopyToClipboard = () => {
-        return this.content$.pipe(first(), switchMap((downloadTextContent) => {
-            return downloadTextContent ? this._copyToClipboard(downloadTextContent.content) : of(false);
-        }));
-    };
-    toggleExpandPreview() {
-        this.expandPreview.update((value) => !value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        <div class=\"dbx-content-pit-scrollable-content\">\n          @if (showExpandPreviewButton()) {\n            <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n          }\n          {{ contentDataSignal() }}\n        </div>\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "square"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dbx-download-text-view', standalone: true, imports: [NgTemplateOutlet, DbxLoadingComponent, DbxActionModule, DbxActionButtonDirective, DbxButtonComponent, DbxButtonSpacerDirective, DbxDownloadBlobButtonComponent, DbxContentPitDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        <div class=\"dbx-content-pit-scrollable-content\">\n          @if (showExpandPreviewButton()) {\n            <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n          }\n          {{ contentDataSignal() }}\n        </div>\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { downloadButton: [{ type: i0.ViewChild, args: ['downloadButton', { ...{ read: ElementRef }, isSignal: true }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], showExpandPreviewButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandPreviewButton", required: false }] }], expandPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandPreview", required: false }] }, { type: i0.Output, args: ["expandPreviewChange"] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentState: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentState", required: false }] }] } });
-
-/**
- * Default entries to inject.
- */
-const DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN = new InjectionToken('DefaultDbxWebFilePreviewServiceEntries');
-/**
- * Creates a provider that registers the given entries with the {@link DbxWebFilePreviewService} via the {@link DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN}.
- *
- * @param entries - Array of preview service entries to register, each mapping a MIME type to its preview component.
- * @returns A provider configuration that supplies the entries via the injection token.
- *
- * @example
- * ```typescript
- * provideDbxWebFilePreviewServiceEntries([DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY]);
- * ```
- */
-function provideDbxWebFilePreviewServiceEntries(entries) {
-    return {
-        provide: DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN,
-        useValue: entries
-    };
-}
-// MARK: Default Functions
-/**
- * Default preview component function that embeds files using {@link DbxEmbedComponent}. Images are rendered with an `img` element; all other types use `embed`.
- *
- * @param input - The preview input containing blob data, source URL, and MIME type information.
- * @returns An injection component config that initializes a {@link DbxEmbedComponent} with the appropriate embed element and content.
- */
-const DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION = (input) => {
-    const { blob, srcUrl, embedMimeType, sanitizeSrcUrl } = input;
-    let embedElement = 'embed';
-    if (embedMimeType) {
-        // embed any image mime types to img
-        embedElement = embedMimeType.startsWith('image/') ? 'img' : 'embed';
-    }
-    return {
-        componentClass: DbxEmbedComponent,
-        init: (x) => {
-            x.embedElement.set(embedElement);
-            if (blob != null) {
-                x.blob.set(blob);
-            }
-            if (srcUrl != null) {
-                x.srcUrl.set(srcUrl);
-                x.sanitizeUrl.set(sanitizeSrcUrl ?? true);
-            }
-            if (embedMimeType != null) {
-                x.type.set(embedMimeType);
-            }
-        }
-    };
-};
-/**
- * Default dialog-with-component function that opens the preview component inside a {@link DbxInjectionDialogComponent} with a close button.
- *
- * @param input - The dialog input containing the MatDialog instance and the component config to display.
- * @returns A MatDialogRef for the opened injection dialog.
- */
-const DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION = (input) => {
-    const { matDialog, componentConfig } = input;
-    return DbxInjectionDialogComponent.openDialog(matDialog, {
-        componentConfig,
-        showCloseButton: true
-    });
-};
-// MARK: Service
-/**
- * Service used for previewing files with given mime types.
- */
-class DbxWebFilePreviewService {
-    matDialog = inject(MatDialog);
-    _entries = new Map();
-    constructor() {
-        const entries = inject(DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN, { optional: true });
-        if (entries) {
-            entries.forEach((x) => this.registerPreviewEntry(x));
-        }
-    }
-    _defaultPreviewComponentFunction = DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION;
-    _defaultPreviewDialogWithComponentFunction = DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION;
-    // Configuration
-    /**
-     * Registers one or more file preview entries, mapping MIME types to their preview components.
-     *
-     * @param entries - Single or array of preview entries to register.
-     */
-    registerPreviewEntries(entries) {
-        asArray(entries).forEach((entry) => this.registerPreviewEntry(entry));
-    }
-    /**
-     * Registers a single file preview entry for its MIME type(s).
-     *
-     * @param entry - The preview entry to register.
-     */
-    registerPreviewEntry(entry) {
-        asArray(entry.mimeType).forEach((mimeType) => this._entries.set(mimeType, entry));
-    }
-    /**
-     * Overrides the default preview component function used when no MIME-specific entry is registered.
-     *
-     * @param previewFunction - The preview component function to use as the new default.
-     */
-    setDefaultPreviewComponentFunction(previewFunction) {
-        this._defaultPreviewComponentFunction = previewFunction;
-    }
-    /**
-     * Overrides the default dialog-with-component function used when no MIME-specific dialog handler is registered.
-     *
-     * @param previewDialogWithComponentFunction - The dialog-with-component function to use as the new default.
-     */
-    setDefaultPreviewDialogWithComponentFunction(previewDialogWithComponentFunction) {
-        this._defaultPreviewDialogWithComponentFunction = previewDialogWithComponentFunction;
-    }
-    // Service
-    /**
-     * Creates an injection component config for previewing a file. Uses a MIME-specific preview function if registered, otherwise falls back to the default.
-     *
-     * @param input - The preview input containing blob, URL, and MIME type information.
-     * @returns An injection component config suitable for rendering the file preview.
-     */
-    createPreviewConfig(input) {
-        const { embedMimeType } = input;
-        const previewFunction = (embedMimeType ? this._entries.get(embedMimeType)?.previewComponentFunction : undefined) ?? this._defaultPreviewComponentFunction;
-        return previewFunction(input);
-    }
-    /**
-     * Opens a Material dialog to preview a file. Uses a MIME-specific dialog function if registered, otherwise creates a preview component and wraps it in the default dialog.
-     *
-     * @param input - The dialog input containing file data and MIME type.
-     * @returns Reference to the opened dialog.
-     */
-    openPreviewDialog(input) {
-        const { embedMimeType } = input;
-        const previewDialogFunction = embedMimeType ? this._entries.get(embedMimeType)?.previewDialogFunction : undefined;
-        let matDialogRef;
-        if (previewDialogFunction) {
-            matDialogRef = previewDialogFunction({
-                matDialog: this.matDialog,
-                ...input
-            });
-        }
-        else {
-            const componentConfig = this.createPreviewConfig(input);
-            matDialogRef = this._defaultPreviewDialogWithComponentFunction({
-                matDialog: this.matDialog,
-                ...input,
-                componentConfig
-            });
-        }
-        return matDialogRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * Previews a file by delegating to the {@link DbxWebFilePreviewService} to resolve the appropriate preview component for the given MIME type.
- *
- * @example
- * ```html
- * <dbx-web-file-preview [config]="{ srcUrl: 'https://example.com/doc.pdf', embedMimeType: 'application/pdf' }"></dbx-web-file-preview>
- * ```
- */
-class DbxWebFilePreviewComponent {
-    webFilePreviewService = inject(DbxWebFilePreviewService);
-    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
-    componentConfigSignal = computed(() => {
-        const config = this.config();
-        let componentConfig;
-        if (config) {
-            componentConfig = this.webFilePreviewService.createPreviewConfig(config);
-        }
-        return componentConfig;
-    }, ...(ngDevMode ? [{ debugName: "componentConfigSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxWebFilePreviewComponent, isStandalone: true, selector: "dbx-web-file-preview", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <dbx-injection [config]="componentConfigSignal()"></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: "21.2.11", ngImport: i0, type: DbxWebFilePreviewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dbx-web-file-preview',
-                    template: `
-    <dbx-injection [config]="componentConfigSignal()"></dbx-injection>
-  `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [DbxInjectionComponent]
-                }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
-
-/**
- * Builds a directory tree from an array of zip archive entries, enriching each node with MIME type detection and blob retrieval capability.
- *
- * @param entries - Array of zip archive entries to build the tree from, or null/undefined for an empty tree.
- * @returns The root node of the constructed directory tree with MIME types and blob getters attached.
- *
- * @example
- * ```typescript
- * const root = dbxZipBlobPreviewEntryTreeFromEntries(zipEntries);
- * // root.children contains the top-level files and directories
- * ```
- */
-function dbxZipBlobPreviewEntryTreeFromEntries(entries) {
-    const nodeValues = (entries ?? []).map((value) => {
-        const nodeSlashPathDetails = slashPathDetails(value.filename);
-        const mimeType = mimeTypeForFileExtension(nodeSlashPathDetails.typedFileExtension);
-        return {
-            value,
-            mimeType,
-            slashPathDetails: nodeSlashPathDetails,
-            getBlob: value.getData ? () => value.getData(new BlobWriter(mimeType ?? undefined)) : undefined
-        };
-    });
-    return slashPathDirectoryTree(nodeValues);
-}
-
-/**
- * Ordered numeric mapping of {@link ScreenMediaWidthType} for size comparisons.
- */
-const SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP = {
-    micro: 0,
-    small: 1,
-    tablet: 2,
-    large: 3,
-    full: 4
-};
-/**
- * Returns `true` if the current screen width type is at least as wide as the given breakpoint.
- *
- * @param current - The current screen width type.
- * @param breakpoint - The minimum width type to check against.
- * @returns `true` if the current width type meets or exceeds the breakpoint.
- *
- * @example
- * ```ts
- * screenMediaWidthTypeIsActive('tablet', 'small'); // true
- * screenMediaWidthTypeIsActive('micro', 'tablet'); // false
- * ```
- */
-function screenMediaWidthTypeIsActive(current, breakpoint) {
-    return compareScreenMediaWidthTypes(current, breakpoint, (a, b) => a >= b);
-}
-/**
- * Compares two {@link ScreenMediaWidthType} values using a custom comparator on their numeric sizes.
- *
- * @param a - The first screen width type.
- * @param b - The second screen width type.
- * @param compare - A comparator function applied to the numeric size values of `a` and `b`
- * @returns The result of applying the comparator to the mapped numeric sizes.
- */
-function compareScreenMediaWidthTypes(a, b, compare) {
-    return compare(SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP[a], SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP[b]);
-}
-
-/**
- * Abstract configuration class for {@link DbxScreenMediaService} defining responsive breakpoints.
- *
- * Provide a concrete instance via {@link provideDbxScreenMediaService} or supply values directly.
- */
-class DbxScreenMediaServiceConfig {
-}
-/**
- * Default responsive breakpoint configuration with standard mobile/tablet/desktop thresholds.
- */
-const DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG = {
-    microScreenWidthMax: 360,
-    smallScreenWidthMax: 520,
-    tabletScreenWidthMax: 786,
-    largeScreenWidthMax: 1280,
-    tinyScreenHeightMax: 280
-};
-/**
- * Reactive service that tracks the current screen width and height categories using CSS media queries.
- *
- * Emits {@link ScreenMediaWidthType} and {@link ScreenMediaHeightType} values that update
- * as the viewport is resized. Use {@link isBreakpointActive} to reactively check whether
- * the screen meets a minimum width breakpoint.
- *
- * @example
- * ```ts
- * readonly screenService = inject(DbxScreenMediaService);
- * readonly isTabletOrLarger$ = this.screenService.isBreakpointActive('tablet');
- * ```
- */
-class DbxScreenMediaService {
-    _media = inject(MediaMatcher);
-    _microQuery;
-    _smallQuery;
-    _tabletQuery;
-    _largeQuery;
-    _tinyHeightQuery;
-    _updateWidth = new Subject();
-    _updateHeight = new Subject();
-    widthType$ = this._updateWidth.pipe(initialize(() => this._updateWidth.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map(() => this._readWidthType()), distinctUntilChanged(), shareReplay(1));
-    heightType$ = this._updateWidth.pipe(initialize(() => this._updateHeight.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map(() => this._readHeightType()), distinctUntilChanged(), shareReplay(1));
-    constructor() {
-        const { microScreenWidthMax, smallScreenWidthMax, tabletScreenWidthMax, largeScreenWidthMax } = inject(DbxScreenMediaServiceConfig);
-        this._microQuery = this._media.matchMedia(`screen and (max-width:${microScreenWidthMax}px)`);
-        this._smallQuery = this._media.matchMedia(`screen and (max-width:${smallScreenWidthMax}px)`);
-        this._tabletQuery = this._media.matchMedia(`screen and (max-width:${tabletScreenWidthMax}px)`);
-        this._largeQuery = this._media.matchMedia(`screen and (max-width:${largeScreenWidthMax}px)`);
-        this._tinyHeightQuery = this._media.matchMedia(`screen and (max-width:${largeScreenWidthMax}px)`);
-        const widthHandler = () => this._updateWidth.next();
-        const heightHandler = () => this._updateHeight.next();
-        this._microQuery.onchange = widthHandler;
-        this._smallQuery.onchange = widthHandler;
-        this._tabletQuery.onchange = widthHandler;
-        this._largeQuery.onchange = widthHandler;
-        this._tinyHeightQuery.onchange = heightHandler;
-    }
-    destroy() {
-        this._microQuery.onchange = null;
-        this._smallQuery.onchange = null;
-        this._tabletQuery.onchange = null;
-        this._largeQuery.onchange = null;
-        this._updateWidth.complete();
-        this._updateHeight.complete();
-    }
-    /**
-     * Returns an observable that emits `true` when the current screen width is at least as wide as the given breakpoint.
-     *
-     * @param inputBreakpoint - The minimum width type or an observable of it.
-     * @returns Observable of whether the breakpoint is currently active.
-     */
-    isBreakpointActive(inputBreakpoint) {
-        return combineLatest([this.widthType$, asObservable(inputBreakpoint)]).pipe(map(([current, breakpoint]) => screenMediaWidthTypeIsActive(current, breakpoint)), distinctUntilChanged(), shareReplay(1));
-    }
-    _readWidthType() {
-        let width;
-        if (this._microQuery.matches) {
-            width = 'micro';
-        }
-        else if (this._smallQuery.matches) {
-            width = 'small';
-        }
-        else if (this._tabletQuery.matches) {
-            width = 'tablet';
-        }
-        else if (this._largeQuery.matches) {
-            width = 'large';
-        }
-        else {
-            width = 'full';
-        }
-        return width;
-    }
-    _readHeightType() {
-        return this._tinyHeightQuery ? 'tiny' : 'normal';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxScreenMediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxScreenMediaService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxScreenMediaService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-/**
- * Calculates and applies a dynamic height to a Material expansion panel header based on text content.
+ * Calculates and applies a dynamic height to a Material expansion panel header based on text content.
  *
  * Sets the `--mat-expansion-header-collapsed-state-height` and `--mat-expansion-header-expanded-state-height`
  * CSS custom properties. On small screens, the estimated line count is scaled up to account for text wrapping.
@@ -12357,16 +11905,95 @@ class DbxContentPageDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: DbxContentPageDirective, isStandalone: true, selector: "dbx-content-page,[dbxContentPage]", host: { classAttribute: "d-block dbx-content-page" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dbx-content-page,[dbxContentPage]',
+                    host: {
+                        class: 'd-block dbx-content-page'
+                    },
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners.
+ * Useful for displaying bounded content areas such as lists or previews with a constrained height.
+ *
+ * Pits round their corners by default. Pass `[square]="true"` to square the pit — this applies the
+ * common `.dbx-corners-none` opt-out utility rather than a pit-specific class.
+ *
+ * When `[scrollable]` is set the pit frame (padding, background, corners) stays fixed and an inner
+ * `.dbx-content-pit-scrollable-content` wrapper does the scrolling — wrap the body in that element so
+ * the frame doesn't shift at the scroll extremes. The resolved max height is published as the
+ * `--dbx-content-pit-scrollable-max-height` custom property, which the inner wrapper reads.
+ *
+ * @dbxWebComponent
+ * @dbxWebSlug content-pit
+ * @dbxWebCategory layout
+ * @dbxWebRelated content-box, content-elevate
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-content-pit>Body</dbx-content-pit>
+ * ```
+ *
+ * @example
+ * ```html
+ * <div dbxContentPit>Inset block</div>
+ * ```
+ */
+class DbxContentPitDirective {
+    scrollable = input(...(ngDevMode ? [undefined, { debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    square = input(false, ...(ngDevMode ? [{ debugName: "square" }] : /* istanbul ignore next */ []));
+    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;
+    }, ...(ngDevMode ? [{ debugName: "scrollableHeightSignal" }] : /* istanbul ignore next */ []));
+    // The pit always publishes its own scroll cap so the `.dbx-content-pit-scrollable-content`
+    // wrapper reads it directly rather than inheriting the global `--dbx-content-pit-scrollable-max-height`
+    // default (140px) from the theme root. `none` when not scrollable lets the wrapper grow freely.
+    scrollableMaxHeightSignal = computed(() => this.scrollableHeightSignal() ?? 'none', ...(ngDevMode ? [{ debugName: "scrollableMaxHeightSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollableHeightSignal() != null", "class.dbx-corners-none": "square()", "style.--dbx-content-pit-scrollable-max-height": "scrollableMaxHeightSignal()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'dbx-content-page,[dbxContentPage]',
+                    selector: 'dbx-content-pit, [dbxContentPit]',
                     host: {
-                        class: 'd-block dbx-content-page'
+                        class: 'd-block dbx-content-pit',
+                        '[class.dbx-content-pit-scrollable]': 'scrollableHeightSignal() != null',
+                        '[class.dbx-corners-none]': 'square()',
+                        '[style.--dbx-content-pit-scrollable-max-height]': 'scrollableMaxHeightSignal()'
                     },
                     standalone: true
                 }]
-        }] });
+        }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }] } });
 
 const importsAndExports$8 = [
     //
@@ -15458,974 +15085,1624 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
     </div>
   `,
                     host: {
-                        class: 'dbx-detail-block d-block',
-                        '[class.dbx-detail-block-big-header]': 'bigHeader()'
+                        class: 'dbx-detail-block d-block',
+                        '[class.dbx-detail-block-big-header]': 'bigHeader()'
+                    },
+                    imports: [DbxDetailBlockHeaderComponent],
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], alignHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignHeader", required: false }] }], bigHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "bigHeader", required: false }] }] } });
+
+/**
+ * Rounded, padded leading-icon tile. Renders a `<mat-icon>` from the
+ * `icon` input centered inside a flex tile, or projects custom content
+ * when `icon` is not supplied. Apply `[dbxColor]` (optionally with
+ * `[dbxColorTone]`) directly on the host to give the tile a tonal or
+ * full-color background — the tile itself sets layout only.
+ *
+ * Set `[round]="true"` to apply the `dbx-icon-tile-round` modifier and
+ * render a circle instead of the default 12px-rounded square.
+ *
+ * Equivalent to writing `<div dbxIconTile [dbxColor]="'…'"><mat-icon>…</mat-icon></div>`,
+ * but with the icon name as a single input. Backed by the same
+ * `dbx-icon-tile` host class as {@link DbxIconTileDirective}, so the CSS
+ * utility, the directive form, and this component all share styling.
+ *
+ * Sizing, padding, border radius, font, and inner `.mat-icon` size are
+ * all configurable via CSS custom properties on the host:
+ * `--dbx-icon-tile-width`, `--dbx-icon-tile-height`,
+ * `--dbx-icon-tile-min-width`, `--dbx-icon-tile-padding`,
+ * `--dbx-icon-tile-border-radius`, `--dbx-icon-tile-font-size`,
+ * `--dbx-icon-tile-font-weight`, `--dbx-icon-tile-icon-size`.
+ *
+ * @dbxWebComponent
+ * @dbxWebSlug icon-tile
+ * @dbxWebCategory layout
+ * @dbxWebRelated icon-tile-host, dbx-color, list-two-line-item
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebContentProjection Optional fallback content rendered when `icon` is not supplied (e.g. a custom icon component).
+ * @dbxWebMinimalExample ```html
+ * <dbx-icon-tile [icon]="'verified'" dbxColor="success"></dbx-icon-tile>
+ * ```
+ *
+ * @example
+ * ```html
+ * <dbx-icon-tile [icon]="'check'" dbxColor="primary" [dbxColorTone]="18"></dbx-icon-tile>
+ *
+ * <dbx-icon-tile [icon]="'star'" [round]="true" dbxColor="accent"></dbx-icon-tile>
+ *
+ * <dbx-icon-tile dbxColor="accent">
+ *   <my-custom-glyph></my-custom-glyph>
+ * </dbx-icon-tile>
+ * ```
+ */
+class DbxIconTileComponent {
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    round = input(false, ...(ngDevMode ? [{ debugName: "round" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxIconTileComponent, isStandalone: true, selector: "dbx-icon-tile", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-icon-tile-round": "round()" }, classAttribute: "dbx-icon-tile" }, ngImport: i0, template: `
+    @if (icon(); as iconValue) {
+      <mat-icon>{{ iconValue }}</mat-icon>
+    } @else {
+      <ng-content></ng-content>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-icon-tile',
+                    template: `
+    @if (icon(); as iconValue) {
+      <mat-icon>{{ iconValue }}</mat-icon>
+    } @else {
+      <ng-content></ng-content>
+    }
+  `,
+                    host: {
+                        class: 'dbx-icon-tile',
+                        '[class.dbx-icon-tile-round]': 'round()'
+                    },
+                    imports: [MatIconModule],
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], round: [{ type: i0.Input, args: [{ isSignal: true, alias: "round", required: false }] }] } });
+
+/**
+ * Host-class form of the icon tile — applies the `dbx-icon-tile` utility
+ * (flex-centered, 12px rounded, 8px padded) to an existing element. Use
+ * this when an existing slot (e.g. a list row's `.item-icon` div) needs
+ * the tile presentation without introducing a wrapping component, or
+ * when stacking with another component that already owns the host (so a
+ * `<dbx-icon-tile>` child element isn't possible).
+ *
+ * Pair with `[dbxColor]` (optionally `[dbxColorTone]`) on the same host
+ * for a tonal/full-color background. The host has no background of its
+ * own — only layout. For the convenient component form that renders the
+ * `<mat-icon>` for you, use {@link DbxIconTileComponent} (`<dbx-icon-tile>`).
+ *
+ * Sizing, padding, border radius, font, and inner `.mat-icon` size are
+ * all configurable via CSS custom properties on the host:
+ * `--dbx-icon-tile-width`, `--dbx-icon-tile-height`,
+ * `--dbx-icon-tile-min-width`, `--dbx-icon-tile-padding`,
+ * `--dbx-icon-tile-border-radius`, `--dbx-icon-tile-font-size`,
+ * `--dbx-icon-tile-font-weight`, `--dbx-icon-tile-icon-size`.
+ *
+ * @dbxWebComponent
+ * @dbxWebSlug icon-tile-host
+ * @dbxWebCategory layout
+ * @dbxWebRelated icon-tile, dbx-color, list-two-line-item
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <div dbxIconTile dbxColor="primary" [dbxColorTone]="18">
+ *   <mat-icon>star</mat-icon>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```html
+ * <div class="dbx-list-two-line-item dbx-list-two-line-item-with-icon">
+ *   <div class="item-icon" dbxIconTile dbxColor="primary" [dbxColorTone]="18">
+ *     <mat-icon>check_circle</mat-icon>
+ *   </div>
+ *   <div class="item-left">
+ *     <span class="item-title">Title</span>
+ *     <span class="item-details">Details</span>
+ *   </div>
+ * </div>
+ * ```
+ */
+class DbxIconTileDirective {
+    /**
+     * When `true`, applies the `dbx-icon-tile-round` modifier to render the
+     * tile as a circle instead of a 12px-rounded square.
+     */
+    dbxIconTileRound = input(false, ...(ngDevMode ? [{ debugName: "dbxIconTileRound" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxIconTileDirective, isStandalone: true, selector: "[dbxIconTile]", inputs: { dbxIconTileRound: { classPropertyName: "dbxIconTileRound", publicName: "dbxIconTileRound", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-icon-tile-round": "dbxIconTileRound()" }, classAttribute: "dbx-icon-tile" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxIconTile]',
+                    host: {
+                        class: 'dbx-icon-tile',
+                        '[class.dbx-icon-tile-round]': 'dbxIconTileRound()'
+                    },
+                    standalone: true
+                }]
+        }], propDecorators: { dbxIconTileRound: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxIconTileRound", required: false }] }] } });
+
+/**
+ * A step-oriented content block that displays a numbered circle badge on the left
+ * with header, hint, and projected content on the right.
+ *
+ * Use the `icon` input to replace the step number with a Material icon.
+ * Use the `[header]` content slot for extra header-level content (like `dbx-detail-block`).
+ * Use the `color` input to customize the badge color (defaults to `'primary'`).
+ *
+ * Use the `center` input to vertically center the badge with the content.
+ *
+ * Accepts either individual inputs or a single `config` object. Individual inputs
+ * take precedence over config values when both are provided.
+ *
+ * @example
+ * ```html
+ * <dbx-step-block [step]="1" header="Create Account" hint="Fill in the registration form.">
+ *   <p>Enter your email and password to get started.</p>
+ * </dbx-step-block>
+ *
+ * <dbx-step-block [config]="stepConfig">
+ *   <p>Content using a config object.</p>
+ * </dbx-step-block>
+ *
+ * <dbx-step-block [step]="2" color="accent" header="Custom Header Content">
+ *   <span header>Extra header content</span>
+ *   <p>Detail content goes here.</p>
+ * </dbx-step-block>
+ * ```
+ */
+class DbxStepBlockComponent {
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    center = input(...(ngDevMode ? [undefined, { debugName: "center" }] : /* istanbul ignore next */ []));
+    stepSignal = computed(() => {
+        const config = this.config();
+        return this.step() ?? config?.step ?? 1;
+    }, ...(ngDevMode ? [{ debugName: "stepSignal" }] : /* istanbul ignore next */ []));
+    iconSignal = computed(() => {
+        const config = this.config();
+        return this.icon() ?? config?.icon;
+    }, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
+    headerSignal = computed(() => {
+        const config = this.config();
+        return this.header() ?? config?.header;
+    }, ...(ngDevMode ? [{ debugName: "headerSignal" }] : /* istanbul ignore next */ []));
+    hintSignal = computed(() => {
+        const config = this.config();
+        return this.hint() ?? config?.hint;
+    }, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    colorSignal = computed(() => {
+        const config = this.config();
+        return this.color() ?? config?.color ?? 'primary';
+    }, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
+    centerSignal = computed(() => {
+        const config = this.config();
+        return this.center() ?? config?.center ?? false;
+    }, ...(ngDevMode ? [{ debugName: "centerSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStepBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStepBlockComponent, isStandalone: true, selector: "dbx-step-block", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-step-block-center": "centerSignal()" }, classAttribute: "dbx-step-block d-block" }, ngImport: i0, template: `
+    <dbx-icon-tile class="dbx-step-block-badge" [icon]="iconSignal()" [dbxColor]="colorSignal()">
+      @if (!iconSignal()) {
+        {{ stepSignal() }}
+      }
+    </dbx-icon-tile>
+    <div class="dbx-step-block-content dbx-flex-fill-0">
+      @if (headerSignal()) {
+        <div class="dbx-step-block-header">
+          <span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
+          <ng-content select="[header]"></ng-content>
+        </div>
+      }
+      @if (hintSignal()) {
+        <span class="dbx-step-block-hint">{{ hintSignal() }}</span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxIconTileComponent, selector: "dbx-icon-tile", inputs: ["icon", "round"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStepBlockComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-step-block',
+                    template: `
+    <dbx-icon-tile class="dbx-step-block-badge" [icon]="iconSignal()" [dbxColor]="colorSignal()">
+      @if (!iconSignal()) {
+        {{ stepSignal() }}
+      }
+    </dbx-icon-tile>
+    <div class="dbx-step-block-content dbx-flex-fill-0">
+      @if (headerSignal()) {
+        <div class="dbx-step-block-header">
+          <span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
+          <ng-content select="[header]"></ng-content>
+        </div>
+      }
+      @if (hintSignal()) {
+        <span class="dbx-step-block-hint">{{ hintSignal() }}</span>
+      }
+      <ng-content></ng-content>
+    </div>
+  `,
+                    host: {
+                        class: 'dbx-step-block d-block',
+                        '[class.dbx-step-block-center]': 'centerSignal()'
                     },
-                    imports: [DbxDetailBlockHeaderComponent],
+                    imports: [DbxIconTileComponent, DbxColorDirective],
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], alignHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignHeader", required: false }] }], bigHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "bigHeader", required: false }] }] } });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
 
 /**
- * Rounded, padded leading-icon tile. Renders a `<mat-icon>` from the
- * `icon` input centered inside a flex tile, or projects custom content
- * when `icon` is not supplied. Apply `[dbxColor]` (optionally with
- * `[dbxColorTone]`) directly on the host to give the tile a tonal or
- * full-color background — the tile itself sets layout only.
- *
- * Set `[round]="true"` to apply the `dbx-icon-tile-round` modifier and
- * render a circle instead of the default 12px-rounded square.
- *
- * Equivalent to writing `<div dbxIconTile [dbxColor]="'…'"><mat-icon>…</mat-icon></div>`,
- * but with the icon name as a single input. Backed by the same
- * `dbx-icon-tile` host class as {@link DbxIconTileDirective}, so the CSS
- * utility, the directive form, and this component all share styling.
- *
- * Sizing, padding, border radius, font, and inner `.mat-icon` size are
- * all configurable via CSS custom properties on the host:
- * `--dbx-icon-tile-width`, `--dbx-icon-tile-height`,
- * `--dbx-icon-tile-min-width`, `--dbx-icon-tile-padding`,
- * `--dbx-icon-tile-border-radius`, `--dbx-icon-tile-font-size`,
- * `--dbx-icon-tile-font-weight`, `--dbx-icon-tile-icon-size`.
- *
- * @dbxWebComponent
- * @dbxWebSlug icon-tile
- * @dbxWebCategory layout
- * @dbxWebRelated icon-tile-host, dbx-color, list-two-line-item
- * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
- * @dbxWebContentProjection Optional fallback content rendered when `icon` is not supplied (e.g. a custom icon component).
- * @dbxWebMinimalExample ```html
- * <dbx-icon-tile [icon]="'verified'" dbxColor="success"></dbx-icon-tile>
- * ```
+ * Adds inline spacing sized for icons, typically used to align text that sits next to icon-bearing siblings.
  *
  * @example
  * ```html
- * <dbx-icon-tile [icon]="'check'" dbxColor="primary" [dbxColorTone]="18"></dbx-icon-tile>
- *
- * <dbx-icon-tile [icon]="'star'" [round]="true" dbxColor="accent"></dbx-icon-tile>
- *
- * <dbx-icon-tile dbxColor="accent">
- *   <my-custom-glyph></my-custom-glyph>
- * </dbx-icon-tile>
+ * <dbx-icon-spacer></dbx-icon-spacer>
+ * <span>Text aligned with icon spacing</span>
  * ```
  */
-class DbxIconTileComponent {
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    round = input(false, ...(ngDevMode ? [{ debugName: "round" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxIconTileComponent, isStandalone: true, selector: "dbx-icon-tile", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-icon-tile-round": "round()" }, classAttribute: "dbx-icon-tile" }, ngImport: i0, template: `
-    @if (icon(); as iconValue) {
-      <mat-icon>{{ iconValue }}</mat-icon>
-    } @else {
-      <ng-content></ng-content>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class DbxIconSpacerDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: DbxIconSpacerDirective, isStandalone: true, selector: "dbx-icon-spacer,[dbxIconSpacer]", host: { classAttribute: "dbx-icon-spacer d-inline" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconSpacerDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'dbx-icon-tile',
-                    template: `
-    @if (icon(); as iconValue) {
-      <mat-icon>{{ iconValue }}</mat-icon>
-    } @else {
-      <ng-content></ng-content>
-    }
-  `,
+                    selector: 'dbx-icon-spacer,[dbxIconSpacer]',
                     host: {
-                        class: 'dbx-icon-tile',
-                        '[class.dbx-icon-tile-round]': 'round()'
+                        class: 'dbx-icon-spacer d-inline'
                     },
-                    imports: [MatIconModule],
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    standalone: true
                 }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], round: [{ type: i0.Input, args: [{ isSignal: true, alias: "round", required: false }] }] } });
+        }] });
 
 /**
- * Host-class form of the icon tile — applies the `dbx-icon-tile` utility
- * (flex-centered, 12px rounded, 8px padded) to an existing element. Use
- * this when an existing slot (e.g. a list row's `.item-icon` div) needs
- * the tile presentation without introducing a wrapping component, or
- * when stacking with another component that already owns the host (so a
- * `<dbx-icon-tile>` child element isn't possible).
+ * The default linkify string type.
+ */
+const DEFAULT_DBX_LINKIFY_STRING_TYPE = 'DEFAULT';
+
+/**
+ * Configuration provided in the root module for configuring entries.
+ */
+class DbxLinkifyServiceConfig {
+}
+/**
+ * Service used to register and retrieve linkify configurations by type.
  *
- * Pair with `[dbxColor]` (optionally `[dbxColorTone]`) on the same host
- * for a tonal/full-color background. The host has no background of its
- * own — only layout. For the convenient component form that renders the
- * `<mat-icon>` for you, use {@link DbxIconTileComponent} (`<dbx-icon-tile>`).
+ * It has a default entry that is used when no type is specified or the requested type is not found.
+ * By default, the default entry uses `{ defaultProtocol: 'https', target: { url: '_blank' } }`.
  *
- * Sizing, padding, border radius, font, and inner `.mat-icon` size are
- * all configurable via CSS custom properties on the host:
- * `--dbx-icon-tile-width`, `--dbx-icon-tile-height`,
- * `--dbx-icon-tile-min-width`, `--dbx-icon-tile-padding`,
- * `--dbx-icon-tile-border-radius`, `--dbx-icon-tile-font-size`,
- * `--dbx-icon-tile-font-weight`, `--dbx-icon-tile-icon-size`.
+ * Apps can override the default and register additional types via DbxLinkifyServiceConfig
+ * (provided by provideDbxLinkify()) or by calling register()/registerDefaultEntry() directly.
+ */
+class DbxLinkifyService {
+    _entries = new Map();
+    constructor() {
+        const initialConfig = inject(DbxLinkifyServiceConfig, { optional: true });
+        if (initialConfig?.defaultEntry) {
+            this.registerDefaultEntry(initialConfig.defaultEntry);
+        }
+        if (initialConfig?.entries) {
+            this.register(initialConfig.entries);
+        }
+        // If no default was provided, register inline defaults
+        if (!this._entries.has(DEFAULT_DBX_LINKIFY_STRING_TYPE)) {
+            this.registerDefaultEntry({ options: { defaultProtocol: 'https', target: { url: '_blank' } } });
+        }
+    }
+    /**
+     * Registers the default entry.
+     *
+     * @param entry - Entry without the type field.
+     */
+    registerDefaultEntry(entry) {
+        this._entries.set(DEFAULT_DBX_LINKIFY_STRING_TYPE, {
+            ...entry,
+            type: DEFAULT_DBX_LINKIFY_STRING_TYPE
+        });
+    }
+    /**
+     * Registers one or more entries by type.
+     *
+     * @param entries - One or more entries to register.
+     * @param override - Whether to override existing entries (default: true)
+     */
+    register(entries, override = true) {
+        useIterableOrValue(entries, (entry) => {
+            if (override || !this._entries.has(entry.type)) {
+                this._entries.set(entry.type, entry);
+            }
+        });
+    }
+    // MARK: Get
+    /**
+     * Returns the default entry.
+     *
+     * @returns The default linkify service entry, or undefined if none is registered.
+     */
+    getDefaultEntry() {
+        return this._entries.get(DEFAULT_DBX_LINKIFY_STRING_TYPE);
+    }
+    /**
+     * Returns the entry for the given type.
+     *
+     * @param type - The linkify string type to look up.
+     * @returns The registered entry for the given type, or undefined if not found.
+     */
+    getEntryRegisteredForType(type) {
+        return this._entries.get(type);
+    }
+    /**
+     * Returns the entry for the given type, or the default type if there is no entry registered or the input type is null/undefined.
+     *
+     * @param type - The linkify string type to look up, or nullish to retrieve the default entry.
+     * @returns The matching entry, or the default entry if the type is not provided.
+     */
+    getEntry(type) {
+        return type ? this._entries.get(type) : this.getDefaultEntry();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyService, providedIn: 'root' // does not need to be strictly provided/configured. Works out of the box.
+     });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root' // does not need to be strictly provided/configured. Works out of the box.
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Converts URLs and email addresses in plain text into clickable HTML links using the linkify-string library.
  *
- * @dbxWebComponent
- * @dbxWebSlug icon-tile-host
- * @dbxWebCategory layout
- * @dbxWebRelated icon-tile, dbx-color, list-two-line-item
- * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
- * @dbxWebMinimalExample ```html
- * <div dbxIconTile dbxColor="primary" [dbxColorTone]="18">
- *   <mat-icon>star</mat-icon>
- * </div>
- * ```
+ * Options are resolved from {@link DbxLinkifyService} by type, then merged with any inline config overrides.
  *
  * @example
  * ```html
- * <div class="dbx-list-two-line-item dbx-list-two-line-item-with-icon">
- *   <div class="item-icon" dbxIconTile dbxColor="primary" [dbxColorTone]="18">
- *     <mat-icon>check_circle</mat-icon>
- *   </div>
- *   <div class="item-left">
- *     <span class="item-title">Title</span>
- *     <span class="item-details">Details</span>
- *   </div>
- * </div>
+ * <dbx-linkify [text]="'Visit https://example.com for more info.'"></dbx-linkify>
+ * <dbx-linkify [text]="description" [type]="'product-description'"></dbx-linkify>
  * ```
  */
-class DbxIconTileDirective {
-    /**
-     * When `true`, applies the `dbx-icon-tile-round` modifier to render the
-     * tile as a circle instead of a 12px-rounded square.
-     */
-    dbxIconTileRound = input(false, ...(ngDevMode ? [{ debugName: "dbxIconTileRound" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxIconTileDirective, isStandalone: true, selector: "[dbxIconTile]", inputs: { dbxIconTileRound: { classPropertyName: "dbxIconTileRound", publicName: "dbxIconTileRound", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-icon-tile-round": "dbxIconTileRound()" }, classAttribute: "dbx-icon-tile" }, ngImport: i0 });
+class DbxLinkifyComponent {
+    sanitizer = inject(DomSanitizer);
+    dbxLinkifyService = inject(DbxLinkifyService);
+    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    linkifiedTextSignal = computed(() => {
+        const text = this.text();
+        const type = this.type();
+        const config = this.config();
+        // Resolve base options from the service
+        const entry = this.dbxLinkifyService.getEntry(type ?? config?.type);
+        const baseOptions = entry?.options;
+        // Merge base options with inline options (inline overrides base)
+        const options = mergeObjects([baseOptions, config?.options]);
+        return text ? linkifyStr(text, options) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "linkifiedTextSignal" }] : /* istanbul ignore next */ []));
+    linkifiedBodySignal = computed(() => {
+        const linkifiedText = this.linkifiedTextSignal();
+        return linkifiedText ? this.sanitizer.bypassSecurityTrustHtml(linkifiedText) : undefined;
+    }, ...(ngDevMode ? [{ debugName: "linkifiedBodySignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxLinkifyComponent, isStandalone: true, selector: "dbx-linkify", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-i dbx-linkify" }, ngImport: i0, template: `
+    <span [innerHTML]="linkifiedBodySignal()"></span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconTileDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[dbxIconTile]',
+                    selector: 'dbx-linkify',
+                    template: `
+    <span [innerHTML]="linkifiedBodySignal()"></span>
+  `,
                     host: {
-                        class: 'dbx-icon-tile',
-                        '[class.dbx-icon-tile-round]': 'dbxIconTileRound()'
+                        class: 'dbx-i dbx-linkify'
                     },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], propDecorators: { dbxIconTileRound: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxIconTileRound", required: false }] }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
 /**
- * A step-oriented content block that displays a numbered circle badge on the left
- * with header, hint, and projected content on the right.
+ * Creates environment-level providers for configuring {@link DbxLinkifyService} with a custom factory.
  *
- * Use the `icon` input to replace the step number with a Material icon.
- * Use the `[header]` content slot for extra header-level content (like `dbx-detail-block`).
- * Use the `color` input to customize the badge color (defaults to `'primary'`).
+ * @param config - Configuration containing the factory function for creating the linkify service config.
+ * @returns Environment providers that register the DbxLinkifyServiceConfig.
  *
- * Use the `center` input to vertically center the badge with the content.
+ * @example
+ * ```ts
+ * provideDbxLinkify({
+ *   dbxLinkifyServiceConfigFactory: (injector) => ({
+ *     defaultEntry: { options: { defaultProtocol: 'https' } },
+ *     entries: [{ type: 'bio', options: { target: { url: '_blank' } } }]
+ *   })
+ * });
+ * ```
+ */
+function provideDbxLinkify(config) {
+    const { dbxLinkifyServiceConfigFactory } = config;
+    const providers = [
+        {
+            provide: DbxLinkifyServiceConfig,
+            useFactory: dbxLinkifyServiceConfigFactory
+        }
+    ];
+    return makeEnvironmentProviders(providers);
+}
+
+/**
+ * Default background tone percentage for tonal chip coloring.
+ */
+const DEFAULT_DBX_CHIP_TONE = 18;
+/**
+ * Renders a styled chip element with optional small, block, and color modes.
  *
- * Accepts either individual inputs or a single `config` object. Individual inputs
- * take precedence over config values when both are provided.
+ * Hosts a {@link DbxColorDirective} that provides the color tokens + `.dbx-color` marker the chip's
+ * `.dbx-chip.dbx-color` SCSS paints from. The color can be supplied either through the {@link color}/{@link display}
+ * inputs (pushed into the host directive) or by binding `[dbxColor]` directly; the chip's tone handling (default
+ * {@link DEFAULT_DBX_CHIP_TONE} → tonal text) applies to both.
+ *
+ * @dbxWebComponent
+ * @dbxWebSlug chip
+ * @dbxWebCategory text
+ * @dbxWebRelated chip-list
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-chip text="Tag"></dbx-chip>
+ * ```
  *
  * @example
  * ```html
- * <dbx-step-block [step]="1" header="Create Account" hint="Fill in the registration form.">
- *   <p>Enter your email and password to get started.</p>
- * </dbx-step-block>
- *
- * <dbx-step-block [config]="stepConfig">
- *   <p>Content using a config object.</p>
- * </dbx-step-block>
- *
- * <dbx-step-block [step]="2" color="accent" header="Custom Header Content">
- *   <span header>Extra header content</span>
- *   <p>Detail content goes here.</p>
- * </dbx-step-block>
+ * <dbx-chip text="Active" icon="check" color="primary"></dbx-chip>
  * ```
  */
-class DbxStepBlockComponent {
-    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
-    step = input(...(ngDevMode ? [undefined, { debugName: "step" }] : /* istanbul ignore next */ []));
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
-    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+class DbxChipDirective {
+    _dbxColorDirective = inject(DbxColorDirective, { self: true });
+    constructor() {
+        let originalColor;
+        let overridden = false;
+        // Pushes the chip's resolved color (color input > display config) into the host DbxColorDirective so it stays the
+        // single token provider on the element. The directive's own value is restored once the chip stops supplying a color.
+        effect(() => {
+            const color = this.colorSignal();
+            if (color != null) {
+                if (!overridden) {
+                    originalColor = untracked(this._dbxColorDirective.dbxColor);
+                    overridden = true;
+                }
+                this._dbxColorDirective.dbxColor.set(color);
+            }
+            else if (overridden) {
+                this._dbxColorDirective.dbxColor.set(originalColor);
+                overridden = false;
+            }
+        });
+    }
+    small = input(...(ngDevMode ? [undefined, { debugName: "small" }] : /* istanbul ignore next */ []));
+    block = input(...(ngDevMode ? [undefined, { debugName: "block" }] : /* istanbul ignore next */ []));
+    /**
+     * Theme color or {@link DbxColorConfig} applied to the chip, pushed into the host {@link DbxColorDirective}.
+     *
+     * When {@link display} is also set, its color is used as a fallback.
+     */
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
-    center = input(...(ngDevMode ? [undefined, { debugName: "center" }] : /* istanbul ignore next */ []));
-    stepSignal = computed(() => {
-        const config = this.config();
-        return this.step() ?? config?.step ?? 1;
-    }, ...(ngDevMode ? [{ debugName: "stepSignal" }] : /* istanbul ignore next */ []));
-    iconSignal = computed(() => {
-        const config = this.config();
-        return this.icon() ?? config?.icon;
-    }, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
-    headerSignal = computed(() => {
-        const config = this.config();
-        return this.header() ?? config?.header;
-    }, ...(ngDevMode ? [{ debugName: "headerSignal" }] : /* istanbul ignore next */ []));
-    hintSignal = computed(() => {
-        const config = this.config();
-        return this.hint() ?? config?.hint;
-    }, ...(ngDevMode ? [{ debugName: "hintSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Display configuration that provides color (and optionally label/value metadata).
+     *
+     * The color from `display` is used as a fallback when `color` is not explicitly set.
+     */
+    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
+    /**
+     * Background tone level for tonal appearance. Defaults to {@link DEFAULT_DBX_CHIP_TONE}.
+     *
+     * Set to `100` for fully opaque background.
+     */
+    tone = input(...(ngDevMode ? [undefined, { debugName: "tone" }] : /* istanbul ignore next */ []));
     colorSignal = computed(() => {
-        const config = this.config();
-        return this.color() ?? config?.color ?? 'primary';
+        const display = this.display();
+        return this.color() ?? display?.color;
     }, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
-    centerSignal = computed(() => {
-        const config = this.config();
-        return this.center() ?? config?.center ?? false;
-    }, ...(ngDevMode ? [{ debugName: "centerSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStepBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxStepBlockComponent, isStandalone: true, selector: "dbx-step-block", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-step-block-center": "centerSignal()" }, classAttribute: "dbx-step-block d-block" }, ngImport: i0, template: `
-    <dbx-icon-tile class="dbx-step-block-badge" [icon]="iconSignal()" [dbxColor]="colorSignal()">
-      @if (!iconSignal()) {
-        {{ stepSignal() }}
-      }
-    </dbx-icon-tile>
-    <div class="dbx-step-block-content dbx-flex-fill-0">
-      @if (headerSignal()) {
-        <div class="dbx-step-block-header">
-          <span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
-          <ng-content select="[header]"></ng-content>
-        </div>
-      }
-      @if (hintSignal()) {
-        <span class="dbx-step-block-hint">{{ hintSignal() }}</span>
-      }
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxIconTileComponent, selector: "dbx-icon-tile", inputs: ["icon", "round"] }, { kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    /**
+     * The effective color on the host {@link DbxColorDirective} — either pushed from {@link colorSignal} or bound
+     * directly via `[dbxColor]`. Drives the chip's tone/tonal handling.
+     */
+    effectiveColorSignal = computed(() => this._dbxColorDirective.dbxColor(), ...(ngDevMode ? [{ debugName: "effectiveColorSignal" }] : /* istanbul ignore next */ []));
+    toneSignal = computed(() => {
+        const display = this.display();
+        return this.tone() ?? display?.tone ?? this._dbxColorDirective.effectiveToneSignal() ?? DEFAULT_DBX_CHIP_TONE;
+    }, ...(ngDevMode ? [{ debugName: "toneSignal" }] : /* istanbul ignore next */ []));
+    styleSignal = computed(() => {
+        const display = this.display();
+        const small = this.small() ?? display?.small;
+        const block = this.block() ?? display?.block;
+        let style = small ? 'dbx-chip-small' : '';
+        if (block) {
+            style = style + ' dbx-chip-block';
+        }
+        return style;
+    }, ...(ngDevMode ? [{ debugName: "styleSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Sets `--dbx-color-bg-tone` on the host to control the background opacity of the painted chip surface.
+     * Only applied when a color is set.
+     */
+    bgToneStyleSignal = computed(() => {
+        const tone = this.toneSignal();
+        const color = this.effectiveColorSignal();
+        if (color) {
+            return `${tone}%`;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "bgToneStyleSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether tonal mode is active (color is set and tone < 100). Adds the `dbx-color-tonal`
+     * CSS class which overrides text color to the vibrant theme color via CSS rather than
+     * an inline style binding (which would conflict with `[ngStyle]`).
+     */
+    isTonalSignal = computed(() => {
+        const tone = this.toneSignal();
+        const color = this.effectiveColorSignal();
+        return Boolean(color) && tone < 100;
+    }, ...(ngDevMode ? [{ debugName: "isTonalSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxChipDirective, isStandalone: true, selector: "dbx-chip", inputs: { small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "styleSignal()", "class.dbx-color-tonal": "isTonalSignal()", "style.--dbx-color-bg-tone": "bgToneStyleSignal()" }, classAttribute: "dbx-chip" }, hostDirectives: [{ directive: DbxColorDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxStepBlockComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'dbx-step-block',
-                    template: `
-    <dbx-icon-tile class="dbx-step-block-badge" [icon]="iconSignal()" [dbxColor]="colorSignal()">
-      @if (!iconSignal()) {
-        {{ stepSignal() }}
-      }
-    </dbx-icon-tile>
-    <div class="dbx-step-block-content dbx-flex-fill-0">
-      @if (headerSignal()) {
-        <div class="dbx-step-block-header">
-          <span class="dbx-step-block-header-label">{{ headerSignal() }}</span>
-          <ng-content select="[header]"></ng-content>
-        </div>
-      }
-      @if (hintSignal()) {
-        <span class="dbx-step-block-hint">{{ hintSignal() }}</span>
-      }
-      <ng-content></ng-content>
-    </div>
-  `,
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'dbx-chip',
                     host: {
-                        class: 'dbx-step-block d-block',
-                        '[class.dbx-step-block-center]': 'centerSignal()'
+                        class: 'dbx-chip',
+                        '[class]': 'styleSignal()',
+                        '[class.dbx-color-tonal]': 'isTonalSignal()',
+                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()'
                     },
-                    imports: [DbxIconTileComponent, DbxColorDirective],
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    hostDirectives: [DbxColorDirective],
+                    standalone: true
                 }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
 
 /**
- * Adds inline spacing sized for icons, typically used to align text that sits next to icon-bearing siblings.
+ * Renders a row of colored chips from an array of {@link DbxChipDisplay} items.
+ *
+ * Uses {@link DbxChipDirective} internally with `dbx-chip-spacer` class for spacing.
+ *
+ * @dbxWebComponent
+ * @dbxWebSlug chip-list
+ * @dbxWebCategory text
+ * @dbxWebRelated chip
+ * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
+ * @dbxWebMinimalExample ```html
+ * <dbx-chip-list></dbx-chip-list>
+ * ```
  *
  * @example
  * ```html
- * <dbx-icon-spacer></dbx-icon-spacer>
- * <span>Text aligned with icon spacing</span>
+ * <dbx-chip-list>
+ *   <dbx-chip text="Tag1"></dbx-chip>
+ *   <dbx-chip text="Tag2"></dbx-chip>
+ * </dbx-chip-list>
  * ```
  */
-class DbxIconSpacerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: DbxIconSpacerDirective, isStandalone: true, selector: "dbx-icon-spacer,[dbxIconSpacer]", host: { classAttribute: "dbx-icon-spacer d-inline" }, ngImport: i0 });
+class DbxChipListComponent {
+    chips = input(...(ngDevMode ? [undefined, { debugName: "chips" }] : /* istanbul ignore next */ []));
+    small = input(...(ngDevMode ? [undefined, { debugName: "small" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxChipListComponent, isStandalone: true, selector: "dbx-chip-list", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"inline\"" }, classAttribute: "dbx-chip-list" }, ngImport: i0, template: `
+    @for (chip of chips(); track chip.key ?? chip.label) {
+      <dbx-chip class="dbx-chip-spacer" [display]="chip" [small]="small()">{{ chip.label }}</dbx-chip>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxIconSpacerDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipListComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: 'dbx-icon-spacer,[dbxIconSpacer]',
+                    selector: 'dbx-chip-list',
+                    template: `
+    @for (chip of chips(); track chip.key ?? chip.label) {
+      <dbx-chip class="dbx-chip-spacer" [display]="chip" [small]="small()">{{ chip.label }}</dbx-chip>
+    }
+  `,
                     host: {
-                        class: 'dbx-icon-spacer d-inline'
+                        class: 'dbx-chip-list',
+                        '[style.display]': '"inline"'
                     },
-                    standalone: true
+                    imports: [DbxChipDirective],
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
-
-/**
- * The default linkify string type.
- */
-const DEFAULT_DBX_LINKIFY_STRING_TYPE = 'DEFAULT';
+        }], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }] } });
 
 /**
- * Configuration provided in the root module for configuring entries.
- */
-class DbxLinkifyServiceConfig {
-}
-/**
- * Service used to register and retrieve linkify configurations by type.
- *
- * It has a default entry that is used when no type is specified or the requested type is not found.
- * By default, the default entry uses `{ defaultProtocol: 'https', target: { url: '_blank' } }`.
+ * Renders a read-only list of Material chip options from an array of {@link TextChip} objects.
  *
- * Apps can override the default and register additional types via DbxLinkifyServiceConfig
- * (provided by provideDbxLinkify()) or by calling register()/registerDefaultEntry() directly.
+ * @example
+ * ```html
+ * <dbx-text-chips [chips]="[{ label: 'Active', value: 'active', selected: true, color: 'primary' }]"></dbx-text-chips>
+ * ```
  */
-class DbxLinkifyService {
-    _entries = new Map();
-    constructor() {
-        const initialConfig = inject(DbxLinkifyServiceConfig, { optional: true });
-        if (initialConfig?.defaultEntry) {
-            this.registerDefaultEntry(initialConfig.defaultEntry);
-        }
-        if (initialConfig?.entries) {
-            this.register(initialConfig.entries);
-        }
-        // If no default was provided, register inline defaults
-        if (!this._entries.has(DEFAULT_DBX_LINKIFY_STRING_TYPE)) {
-            this.registerDefaultEntry({ options: { defaultProtocol: 'https', target: { url: '_blank' } } });
-        }
-    }
+class DbxTextChipsComponent {
+    _colorService = inject(DbxColorService, { optional: true });
+    defaultSelection = input(...(ngDevMode ? [undefined, { debugName: "defaultSelection" }] : /* istanbul ignore next */ []));
+    chips = input(...(ngDevMode ? [undefined, { debugName: "chips" }] : /* istanbul ignore next */ []));
     /**
-     * Registers the default entry.
+     * Returns the themed background CSS class for a chip's color.
      *
-     * @param entry - Entry without the type field.
+     * @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.
      */
-    registerDefaultEntry(entry) {
-        this._entries.set(DEFAULT_DBX_LINKIFY_STRING_TYPE, {
-            ...entry,
-            type: DEFAULT_DBX_LINKIFY_STRING_TYPE
-        });
+    chipColorClass(chip) {
+        return chip.color ? dbxColorBackground(chip.color) : '';
     }
     /**
-     * Registers one or more entries by type.
+     * Returns the inline `--dbx-bg-color-current` value for a chip when its color is a {@link DbxColorConfig}; otherwise null.
      *
-     * @param entries - One or more entries to register.
-     * @param override - Whether to override existing entries (default: true)
+     * @param chip - The chip.
+     * @returns The background color CSS value, or null for named-color strings.
      */
-    register(entries, override = true) {
-        useIterableOrValue(entries, (entry) => {
-            if (override || !this._entries.has(entry.type)) {
-                this._entries.set(entry.type, entry);
-            }
-        });
+    chipBgColorStyle(chip) {
+        return this._expandedChipConfig(chip)?.color ?? null;
     }
-    // MARK: Get
     /**
-     * Returns the default entry.
+     * Returns the inline `--dbx-color-current` value for a chip when its color is a {@link DbxColorConfig}; otherwise null.
      *
-     * @returns The default linkify service entry, or undefined if none is registered.
+     * @param chip - The chip.
+     * @returns The contrast color CSS value, or null for named-color strings.
      */
-    getDefaultEntry() {
-        return this._entries.get(DEFAULT_DBX_LINKIFY_STRING_TYPE);
+    chipColorStyle(chip) {
+        return this._expandedChipConfig(chip)?.contrast ?? null;
     }
-    /**
-     * Returns the entry for the given type.
-     *
-     * @param type - The linkify string type to look up.
-     * @returns The registered entry for the given type, or undefined if not found.
-     */
-    getEntryRegisteredForType(type) {
-        return this._entries.get(type);
+    _expandedChipConfig(chip) {
+        const value = chip.color;
+        return isDbxColorConfig(value) ? (this._colorService?.expandColorConfig(value) ?? value) : undefined;
     }
-    /**
-     * Returns the entry for the given type, or the default type if there is no entry registered or the input type is null/undefined.
-     *
-     * @param type - The linkify string type to look up, or nullish to retrieve the default entry.
-     * @returns The matching entry, or the default entry if the type is not provided.
-     */
-    getEntry(type) {
-        return type ? this._entries.get(type) : this.getDefaultEntry();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxTextChipsComponent, isStandalone: true, selector: "dbx-text-chips", inputs: { defaultSelection: { classPropertyName: "defaultSelection", publicName: "defaultSelection", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (chips()) {
+      <mat-chip-listbox class="dbx-text-chips-listbox">
+        @for (chip of chips(); track chip.key ?? chip.label) {
+          <mat-chip-option [selected]="chip.selected ?? defaultSelection()" [class]="chipColorClass(chip)" [style.--dbx-bg-color-current]="chipBgColorStyle(chip)" [style.--dbx-color-current]="chipColorStyle(chip)" [matTooltip]="chip.tooltip!" matTooltipPosition="above">
+            {{ chip.label }}
+          </mat-chip-option>
+        }
+      </mat-chip-listbox>
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyService, providedIn: 'root' // does not need to be strictly provided/configured. Works out of the box.
-     });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextChipsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-text-chips',
+                    template: `
+    @if (chips()) {
+      <mat-chip-listbox class="dbx-text-chips-listbox">
+        @for (chip of chips(); track chip.key ?? chip.label) {
+          <mat-chip-option [selected]="chip.selected ?? defaultSelection()" [class]="chipColorClass(chip)" [style.--dbx-bg-color-current]="chipBgColorStyle(chip)" [style.--dbx-color-current]="chipColorStyle(chip)" [matTooltip]="chip.tooltip!" matTooltipPosition="above">
+            {{ chip.label }}
+          </mat-chip-option>
+        }
+      </mat-chip-listbox>
+    }
+  `,
+                    imports: [MatChipsModule, MatTooltipModule],
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { defaultSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelection", required: false }] }], chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }] } });
+
+/**
+ * Displays a number value with an optional limit, automatically applying color-coded
+ * theming based on the ratio of value to limit (ok, notice, warn).
+ *
+ * @example
+ * ```html
+ * <dbx-number-with-limit [number]="{ value: 7, limit: 10 }"></dbx-number-with-limit>
+ * <dbx-number-with-limit [number]="{ value: 3, limit: 5, prefix: '$' }" [rounded]="true"></dbx-number-with-limit>
+ * ```
+ */
+class DbxNumberWithLimitComponent {
+    number = input(...(ngDevMode ? [undefined, { debugName: "number" }] : /* istanbul ignore next */ []));
+    rounded = input(...(ngDevMode ? [undefined, { debugName: "rounded" }] : /* istanbul ignore next */ []));
+    valueSignal = computed(() => {
+        const number = this.number();
+        return number?.formatNumber ? number.formatNumber(number.value) : number?.value;
+    }, ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
+    limitSignal = computed(() => {
+        const number = this.number();
+        return number?.limit == null ? undefined : number?.formatNumber ? number.formatNumber(number.limit) : number?.limit;
+    }, ...(ngDevMode ? [{ debugName: "limitSignal" }] : /* istanbul ignore next */ []));
+    hasLimitSignal = computed(() => {
+        return this.number()?.limit != null;
+    }, ...(ngDevMode ? [{ debugName: "hasLimitSignal" }] : /* istanbul ignore next */ []));
+    prefixSignal = computed(() => {
+        return this.number()?.prefix;
+    }, ...(ngDevMode ? [{ debugName: "prefixSignal" }] : /* istanbul ignore next */ []));
+    suffixSignal = computed(() => {
+        return this.number()?.suffix;
+    }, ...(ngDevMode ? [{ debugName: "suffixSignal" }] : /* istanbul ignore next */ []));
+    colorSignal = computed(() => {
+        const number = this.number();
+        let color;
+        if (number != null) {
+            const { value, limit } = number;
+            if (limit != null) {
+                if (value > limit) {
+                    color = 'warn';
+                }
+                else if (value === limit) {
+                    color = 'notice';
+                }
+                else {
+                    const ratio = limit === 0 ? 1 : value / limit;
+                    if (ratio > 0.8) {
+                        color = 'notice';
+                    }
+                    else {
+                        color = 'ok';
+                    }
+                }
+            }
+        }
+        return color;
+    }, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxNumberWithLimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxNumberWithLimitComponent, isStandalone: true, selector: "dbx-number-with-limit", inputs: { number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="dbx-number-with-limit" [class]="{ 'dbx-number-with-limit-rounded': rounded() }" [dbxColor]="colorSignal()">
+      <span>{{ prefixSignal() }}</span>
+      <span>{{ valueSignal() }}</span>
+      @if (hasLimitSignal()) {
+        <span class="dbx-number-with-limit-divider">/</span>
+        <span>{{ limitSignal() }}</span>
+      }
+      <span>{{ suffixSignal() }}</span>
+    </span>
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxNumberWithLimitComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root' // does not need to be strictly provided/configured. Works out of the box.
+                    selector: 'dbx-number-with-limit',
+                    template: `
+    <span class="dbx-number-with-limit" [class]="{ 'dbx-number-with-limit-rounded': rounded() }" [dbxColor]="colorSignal()">
+      <span>{{ prefixSignal() }}</span>
+      <span>{{ valueSignal() }}</span>
+      @if (hasLimitSignal()) {
+        <span class="dbx-number-with-limit-divider">/</span>
+        <span>{{ limitSignal() }}</span>
+      }
+      <span>{{ suffixSignal() }}</span>
+    </span>
+  `,
+                    imports: [DbxColorDirective],
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [] });
+        }], propDecorators: { number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
 /**
- * Converts URLs and email addresses in plain text into clickable HTML links using the linkify-string library.
+ * Creates a {@link CopyToClipboardFunction} that retries the copy operation until success or timeout.
  *
- * Options are resolved from {@link DbxLinkifyService} by type, then merged with any inline config overrides.
+ * @param clipboard - The Angular CDK Clipboard instance.
+ * @param config - Optional timeout and retry settings.
+ * @returns Copies text to the clipboard.
  *
  * @example
- * ```html
- * <dbx-linkify [text]="'Visit https://example.com for more info.'"></dbx-linkify>
- * <dbx-linkify [text]="description" [type]="'product-description'"></dbx-linkify>
+ * ```ts
+ * const copy = copyToClipboardFunction(clipboard, { copyTimeoutSeconds: 10 });
+ * const success = await copy('some text');
  * ```
+ *
+ * @__NO_SIDE_EFFECTS__
  */
-class DbxLinkifyComponent {
-    sanitizer = inject(DomSanitizer);
-    dbxLinkifyService = inject(DbxLinkifyService);
-    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
-    type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
-    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
-    linkifiedTextSignal = computed(() => {
-        const text = this.text();
-        const type = this.type();
-        const config = this.config();
-        // Resolve base options from the service
-        const entry = this.dbxLinkifyService.getEntry(type ?? config?.type);
-        const baseOptions = entry?.options;
-        // Merge base options with inline options (inline overrides base)
-        const options = mergeObjects([baseOptions, config?.options]);
-        return text ? linkifyStr(text, options) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "linkifiedTextSignal" }] : /* istanbul ignore next */ []));
-    linkifiedBodySignal = computed(() => {
-        const linkifiedText = this.linkifiedTextSignal();
-        return linkifiedText ? this.sanitizer.bypassSecurityTrustHtml(linkifiedText) : undefined;
-    }, ...(ngDevMode ? [{ debugName: "linkifiedBodySignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxLinkifyComponent, isStandalone: true, selector: "dbx-linkify", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-i dbx-linkify" }, ngImport: i0, template: `
-    <span [innerHTML]="linkifiedBodySignal()"></span>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+function copyToClipboardFunction(clipboard, config) {
+    const copyTimeoutSeconds = config?.copyTimeoutSeconds ?? 15;
+    const delayBetweenCopyAttempts = config?.delayBetweenCopyAttempts ?? MS_IN_SECOND;
+    const onCopyResult = config?.onCopyResult;
+    const copyFunction = ((content) => {
+        return new Promise((resolve, reject) => {
+            const pending = clipboard.beginCopy(content);
+            const copyTimeoutAt = addMilliseconds(new Date(), copyTimeoutSeconds * MS_IN_SECOND);
+            const attempt = () => {
+                const copyIsFinished = pending.copy();
+                if (!copyIsFinished && !isPast(copyTimeoutAt)) {
+                    setTimeout(attempt, delayBetweenCopyAttempts);
+                }
+                else {
+                    // Destroy the pending copy
+                    pending.destroy();
+                    if (copyIsFinished) {
+                        resolve(true);
+                        onCopyResult?.(true, content);
+                    }
+                    else {
+                        reject(new Error('Failed to copy content to clipboard'));
+                        onCopyResult?.(false, content);
+                    }
+                }
+            };
+            attempt();
+        });
+    });
+    copyFunction._clipboard = clipboard;
+    return copyFunction;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLinkifyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dbx-linkify',
-                    template: `
-    <span [innerHTML]="linkifiedBodySignal()"></span>
-  `,
-                    host: {
-                        class: 'dbx-i dbx-linkify'
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
-
 /**
- * Creates environment-level providers for configuring {@link DbxLinkifyService} with a custom factory.
+ * Injects a {@link CopyToClipboardFunction} using Angular's dependency injection.
  *
- * @param config - Configuration containing the factory function for creating the linkify service config.
- * @returns Environment providers that register the DbxLinkifyServiceConfig.
+ * Must be called in an Angular injection context.
+ *
+ * @param config - Optional timeout and retry settings.
+ * @returns The clipboard copy function.
  *
  * @example
  * ```ts
- * provideDbxLinkify({
- *   dbxLinkifyServiceConfigFactory: (injector) => ({
- *     defaultEntry: { options: { defaultProtocol: 'https' } },
- *     entries: [{ type: 'bio', options: { target: { url: '_blank' } } }]
- *   })
+ * const copy = injectCopyToClipboardFunction();
+ * await copy('copied text');
+ * ```
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+function injectCopyToClipboardFunction(config) {
+    return copyToClipboardFunction(inject(Clipboard), config);
+}
+/**
+ * Injects a {@link CopyToClipboardFunctionWithSnackbarMessage} that copies text to the clipboard
+ * and shows a Material snackbar with a success or failure message.
+ *
+ * Must be called in an Angular injection context.
+ *
+ * @param config - Optional configuration for copy behavior and snackbar messages.
+ * @returns Clipboard copy function with snackbar notification support.
+ *
+ * @example
+ * ```ts
+ * const copy = injectCopyToClipboardFunctionWithSnackbarMessage({
+ *   successMessage: 'Link copied!',
+ *   snackbarDuration: 2000
  * });
+ * await copy('https://example.com');
  * ```
  */
-function provideDbxLinkify(config) {
-    const { dbxLinkifyServiceConfigFactory } = config;
-    const providers = [
-        {
-            provide: DbxLinkifyServiceConfig,
-            useFactory: dbxLinkifyServiceConfigFactory
+function injectCopyToClipboardFunctionWithSnackbarMessage(config) {
+    // TODO: Add service for configuring global defaults for snackbar messages
+    const snackbar = inject(MatSnackBar);
+    const DEFAULT_SUCCESS_MESSAGE = 'Copied to clipboard';
+    const DEFAULT_FAILURE_MESSAGE = 'Content failed to copy...';
+    const DEFAULT_SNACKBAR_DURATION = 3 * MS_IN_SECOND;
+    let snackbarMessagesEnabled = true;
+    let successMessage = DEFAULT_SUCCESS_MESSAGE;
+    let failureMessage = DEFAULT_FAILURE_MESSAGE;
+    let snackbarDuration = DEFAULT_SNACKBAR_DURATION;
+    const _setSnackbarMessagesConfig = (config) => {
+        if (config != null) {
+            const { successMessage: inputSuccessMessage, failureMessage: inputFailureMessage, snackbarDuration: inputSnackbarDuration } = config;
+            successMessage = inputSuccessMessage ?? successMessage ?? DEFAULT_SUCCESS_MESSAGE;
+            failureMessage = inputFailureMessage ?? failureMessage ?? DEFAULT_FAILURE_MESSAGE;
+            snackbarDuration = inputSnackbarDuration ?? snackbarDuration ?? DEFAULT_SNACKBAR_DURATION;
         }
-    ];
-    return makeEnvironmentProviders(providers);
+    };
+    if (config) {
+        _setSnackbarMessagesConfig(config);
+    }
+    const onCopyResult = (success, content) => {
+        config?.onCopyResult?.(success, content);
+        if (snackbarMessagesEnabled) {
+            const message = success ? getValueFromGetter(successMessage, content) : getValueFromGetter(failureMessage, content);
+            snackbar.open(message, undefined, { duration: snackbarDuration });
+        }
+    };
+    const result = copyToClipboardFunction(inject(Clipboard), { ...config, onCopyResult });
+    result.setSnackbarMessagesConfig = _setSnackbarMessagesConfig;
+    result.setSnackbarMessagesEnabled = (enabled) => {
+        snackbarMessagesEnabled = enabled;
+    };
+    return result;
 }
 
 /**
- * Default background tone percentage for tonal chip coloring.
+ * Abstract base class for clipboard directives that provides copy-to-clipboard
+ * functionality with configurable snackbar notifications.
+ *
+ * Subclasses should call `this._copyToClipboard(text)` to trigger a copy operation.
  */
-const DEFAULT_DBX_CHIP_TONE = 18;
+class AbstractDbxClipboardDirective {
+    _copyToClipboard = injectCopyToClipboardFunctionWithSnackbarMessage();
+    clipboardSnackbarMessagesConfig = input(undefined, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesConfig" }] : /* istanbul ignore next */ []));
+    clipboardSnackbarMessagesEnabled = input(true, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesEnabled" }] : /* istanbul ignore next */ []));
+    _configEffect = effect(() => {
+        this._copyToClipboard.setSnackbarMessagesConfig(this.clipboardSnackbarMessagesConfig());
+    }, ...(ngDevMode ? [{ debugName: "_configEffect" }] : /* istanbul ignore next */ []));
+    _enabledEffect = effect(() => {
+        this._copyToClipboard.setSnackbarMessagesEnabled(this.clipboardSnackbarMessagesEnabled());
+    }, ...(ngDevMode ? [{ debugName: "_enabledEffect" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractDbxClipboardDirective, isStandalone: true, inputs: { clipboardSnackbarMessagesConfig: { classPropertyName: "clipboardSnackbarMessagesConfig", publicName: "clipboardSnackbarMessagesConfig", isSignal: true, isRequired: false, transformFunction: null }, clipboardSnackbarMessagesEnabled: { classPropertyName: "clipboardSnackbarMessagesEnabled", publicName: "clipboardSnackbarMessagesEnabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxClipboardDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { clipboardSnackbarMessagesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesConfig", required: false }] }], clipboardSnackbarMessagesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesEnabled", required: false }] }] } });
+
 /**
- * Renders a styled chip element with optional small, block, and color modes.
- *
- * Hosts a {@link DbxColorDirective} that provides the color tokens + `.dbx-color` marker the chip's
- * `.dbx-chip.dbx-color` SCSS paints from. The color can be supplied either through the {@link color}/{@link display}
- * inputs (pushed into the host directive) or by binding `[dbxColor]` directly; the chip's tone handling (default
- * {@link DEFAULT_DBX_CHIP_TONE} → tonal text) applies to both.
+ * Makes the host element clickable to copy text to the clipboard.
  *
- * @dbxWebComponent
- * @dbxWebSlug chip
- * @dbxWebCategory text
- * @dbxWebRelated chip-list
- * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
- * @dbxWebMinimalExample ```html
- * <dbx-chip text="Tag"></dbx-chip>
- * ```
+ * If no explicit `dbxClickToCopyText` value is provided, copies the element's text content.
+ * Optionally highlights the element to indicate it is copyable.
  *
  * @example
  * ```html
- * <dbx-chip text="Active" icon="check" color="primary"></dbx-chip>
- * ```
- */
-class DbxChipDirective {
-    _dbxColorDirective = inject(DbxColorDirective, { self: true });
-    constructor() {
-        let originalColor;
-        let overridden = false;
-        // Pushes the chip's resolved color (color input > display config) into the host DbxColorDirective so it stays the
-        // single token provider on the element. The directive's own value is restored once the chip stops supplying a color.
-        effect(() => {
-            const color = this.colorSignal();
-            if (color != null) {
-                if (!overridden) {
-                    originalColor = untracked(this._dbxColorDirective.dbxColor);
-                    overridden = true;
-                }
-                this._dbxColorDirective.dbxColor.set(color);
-            }
-            else if (overridden) {
-                this._dbxColorDirective.dbxColor.set(originalColor);
-                overridden = false;
-            }
-        });
-    }
-    small = input(...(ngDevMode ? [undefined, { debugName: "small" }] : /* istanbul ignore next */ []));
-    block = input(...(ngDevMode ? [undefined, { debugName: "block" }] : /* istanbul ignore next */ []));
-    /**
-     * Theme color or {@link DbxColorConfig} applied to the chip, pushed into the host {@link DbxColorDirective}.
-     *
-     * When {@link display} is also set, its color is used as a fallback.
-     */
-    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+ * <span [dbxClickToCopyText]="'Copy this value'">Copy this value</span>
+ * <span dbxClickToCopyText [highlighted]="false">Subtle copy</span>
+ * ```
+ */
+class DbxClickToCopyTextDirective extends AbstractDbxClipboardDirective {
+    copyTextFromElement = model(...(ngDevMode ? [undefined, { debugName: "copyTextFromElement" }] : /* istanbul ignore next */ []));
     /**
-     * Display configuration that provides color (and optionally label/value metadata).
-     *
-     * The color from `display` is used as a fallback when `color` is not explicitly set.
+     * If the input is null, then copy from the element's text content.
      */
-    display = input(...(ngDevMode ? [undefined, { debugName: "display" }] : /* istanbul ignore next */ []));
+    copyText = input(undefined, { ...(ngDevMode ? { debugName: "copyText" } : /* istanbul ignore next */ {}), alias: 'dbxClickToCopyText' });
     /**
-     * Background tone level for tonal appearance. Defaults to {@link DEFAULT_DBX_CHIP_TONE}.
-     *
-     * Set to `100` for fully opaque background.
+     * If true, the click events will be ignored.
      */
-    tone = input(...(ngDevMode ? [undefined, { debugName: "tone" }] : /* istanbul ignore next */ []));
-    colorSignal = computed(() => {
-        const display = this.display();
-        return this.color() ?? display?.color;
-    }, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
+    disableCopy = input(false, ...(ngDevMode ? [{ debugName: "disableCopy" }] : /* istanbul ignore next */ []));
     /**
-     * The effective color on the host {@link DbxColorDirective} — either pushed from {@link colorSignal} or bound
-     * directly via `[dbxColor]`. Drives the chip's tone/tonal handling.
+     * Highlight the text visually.
      */
-    effectiveColorSignal = computed(() => this._dbxColorDirective.dbxColor(), ...(ngDevMode ? [{ debugName: "effectiveColorSignal" }] : /* istanbul ignore next */ []));
-    toneSignal = computed(() => {
-        const display = this.display();
-        return this.tone() ?? display?.tone ?? this._dbxColorDirective.effectiveToneSignal() ?? DEFAULT_DBX_CHIP_TONE;
-    }, ...(ngDevMode ? [{ debugName: "toneSignal" }] : /* istanbul ignore next */ []));
-    styleSignal = computed(() => {
-        const display = this.display();
-        const small = this.small() ?? display?.small;
-        const block = this.block() ?? display?.block;
-        let style = small ? 'dbx-chip-small' : '';
-        if (block) {
-            style = style + ' dbx-chip-block';
+    highlighted = input(true, ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    handleClick(event) {
+        const disabled = this.disableCopy();
+        if (!disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            const eventElement = event.currentTarget;
+            this._copyText(eventElement);
         }
-        return style;
-    }, ...(ngDevMode ? [{ debugName: "styleSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Sets `--dbx-color-bg-tone` on the host to control the background opacity of the painted chip surface.
-     * Only applied when a color is set.
-     */
-    bgToneStyleSignal = computed(() => {
-        const tone = this.toneSignal();
-        const color = this.effectiveColorSignal();
-        if (color) {
-            return `${tone}%`;
+    }
+    _copyText(eventElement) {
+        let copyText = this.copyText();
+        // If the input is null, then copy from the element's text content.
+        if (copyText !== null && !copyText) {
+            const element = this.copyTextFromElement()?.nativeElement;
+            copyText = (element ?? eventElement)?.textContent ?? undefined;
         }
-        return null;
-    }, ...(ngDevMode ? [{ debugName: "bgToneStyleSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether tonal mode is active (color is set and tone < 100). Adds the `dbx-color-tonal`
-     * CSS class which overrides text color to the vibrant theme color via CSS rather than
-     * an inline style binding (which would conflict with `[ngStyle]`).
-     */
-    isTonalSignal = computed(() => {
-        const tone = this.toneSignal();
-        const color = this.effectiveColorSignal();
-        return Boolean(color) && tone < 100;
-    }, ...(ngDevMode ? [{ debugName: "isTonalSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxChipDirective, isStandalone: true, selector: "dbx-chip", inputs: { small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "styleSignal()", "class.dbx-color-tonal": "isTonalSignal()", "style.--dbx-color-bg-tone": "bgToneStyleSignal()" }, classAttribute: "dbx-chip" }, hostDirectives: [{ directive: DbxColorDirective }], ngImport: i0 });
+        if (copyText) {
+            void this._copyToClipboard(copyText);
+        }
+        return copyText;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxClickToCopyTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxClickToCopyTextDirective, isStandalone: true, selector: "[dbxClickToCopyText]", inputs: { copyTextFromElement: { classPropertyName: "copyTextFromElement", publicName: "copyTextFromElement", isSignal: true, isRequired: false, transformFunction: null }, copyText: { classPropertyName: "copyText", publicName: "dbxClickToCopyText", isSignal: true, isRequired: false, transformFunction: null }, disableCopy: { classPropertyName: "disableCopy", publicName: "disableCopy", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copyTextFromElement: "copyTextFromElementChange" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.dbx-click-to-copy-text-highlighted": "highlighted()" }, classAttribute: "dbx-click-to-copy-text" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxClickToCopyTextDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'dbx-chip',
+                    selector: '[dbxClickToCopyText]',
                     host: {
-                        class: 'dbx-chip',
-                        '[class]': 'styleSignal()',
-                        '[class.dbx-color-tonal]': 'isTonalSignal()',
-                        '[style.--dbx-color-bg-tone]': 'bgToneStyleSignal()'
+                        class: 'dbx-click-to-copy-text',
+                        '[class.dbx-click-to-copy-text-highlighted]': 'highlighted()'
                     },
-                    hostDirectives: [DbxColorDirective],
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+        }], propDecorators: { copyTextFromElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyTextFromElement", required: false }] }, { type: i0.Output, args: ["copyTextFromElementChange"] }], copyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxClickToCopyText", required: false }] }], disableCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCopy", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], handleClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
- * Renders a row of colored chips from an array of {@link DbxChipDisplay} items.
+ * Wraps projected content with click-to-copy functionality and a copy icon button.
  *
- * Uses {@link DbxChipDirective} internally with `dbx-chip-spacer` class for spacing.
+ * Clicking the text or the icon copies the text to the clipboard and optionally shows a snackbar confirmation.
  *
  * @dbxWebComponent
- * @dbxWebSlug chip-list
+ * @dbxWebSlug click-to-copy-text
  * @dbxWebCategory text
  * @dbxWebRelated chip
  * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
  * @dbxWebMinimalExample ```html
- * <dbx-chip-list></dbx-chip-list>
+ * <dbx-click-to-copy-text [text]="value"></dbx-click-to-copy-text>
  * ```
  *
  * @example
  * ```html
- * <dbx-chip-list>
- *   <dbx-chip text="Tag1"></dbx-chip>
- *   <dbx-chip text="Tag2"></dbx-chip>
- * </dbx-chip-list>
+ * <dbx-click-to-copy-text [text]="userId"></dbx-click-to-copy-text>
  * ```
  */
-class DbxChipListComponent {
-    chips = input(...(ngDevMode ? [undefined, { debugName: "chips" }] : /* istanbul ignore next */ []));
-    small = input(...(ngDevMode ? [undefined, { debugName: "small" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxChipListComponent, isStandalone: true, selector: "dbx-chip-list", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"inline\"" }, classAttribute: "dbx-chip-list" }, ngImport: i0, template: `
-    @for (chip of chips(); track chip.key ?? chip.label) {
-      <dbx-chip class="dbx-chip-spacer" [display]="chip" [small]="small()">{{ chip.label }}</dbx-chip>
+class DbxClickToCopyTextComponent {
+    contentElementRef = viewChild('content', ...(ngDevMode ? [{ debugName: "contentElementRef" }] : /* istanbul ignore next */ []));
+    dbxClickToCopyText = viewChild(DbxClickToCopyTextDirective, ...(ngDevMode ? [{ debugName: "dbxClickToCopyText" }] : /* istanbul ignore next */ []));
+    copyText = input(undefined, ...(ngDevMode ? [{ debugName: "copyText" }] : /* istanbul ignore next */ []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    highlighted = input(false, ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    clipboardSnackbarMessagesConfig = input(undefined, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesConfig" }] : /* istanbul ignore next */ []));
+    clipboardSnackbarMessagesEnabled = input(true, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesEnabled" }] : /* istanbul ignore next */ []));
+    clickToCopyIcon = input('content_copy', ...(ngDevMode ? [{ debugName: "clickToCopyIcon" }] : /* istanbul ignore next */ []));
+    clickIconToCopyOnly = input(false, ...(ngDevMode ? [{ debugName: "clickIconToCopyOnly" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxClickToCopyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxClickToCopyTextComponent, isStandalone: true, selector: "dbx-click-to-copy-text", inputs: { copyText: { classPropertyName: "copyText", publicName: "copyText", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, clipboardSnackbarMessagesConfig: { classPropertyName: "clipboardSnackbarMessagesConfig", publicName: "clipboardSnackbarMessagesConfig", isSignal: true, isRequired: false, transformFunction: null }, clipboardSnackbarMessagesEnabled: { classPropertyName: "clipboardSnackbarMessagesEnabled", publicName: "clipboardSnackbarMessagesEnabled", isSignal: true, isRequired: false, transformFunction: null }, clickToCopyIcon: { classPropertyName: "clickToCopyIcon", publicName: "clickToCopyIcon", isSignal: true, isRequired: false, transformFunction: null }, clickIconToCopyOnly: { classPropertyName: "clickIconToCopyOnly", publicName: "clickIconToCopyOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-click-to-copy-text-component" }, viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "dbxClickToCopyText", first: true, predicate: DbxClickToCopyTextDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span #content [dbxClickToCopyText]="copyText()" [disableCopy]="clickIconToCopyOnly()" [highlighted]="highlighted()" [clipboardSnackbarMessagesEnabled]="clipboardSnackbarMessagesEnabled()" [clipboardSnackbarMessagesConfig]="clipboardSnackbarMessagesConfig()" [copyTextFromElement]="contentElementRef()">
+      <ng-content></ng-content>
+    </span>
+    @if (showIcon()) {
+      <mat-icon class="dbx-click-to-copy-text-icon" (click)="dbxClickToCopyText()?._copyText()">{{ clickToCopyIcon() }}</mat-icon>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxClickToCopyTextDirective, selector: "[dbxClickToCopyText]", inputs: ["copyTextFromElement", "dbxClickToCopyText", "disableCopy", "highlighted"], outputs: ["copyTextFromElementChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxClickToCopyTextComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dbx-chip-list',
+                    selector: 'dbx-click-to-copy-text',
                     template: `
-    @for (chip of chips(); track chip.key ?? chip.label) {
-      <dbx-chip class="dbx-chip-spacer" [display]="chip" [small]="small()">{{ chip.label }}</dbx-chip>
+    <span #content [dbxClickToCopyText]="copyText()" [disableCopy]="clickIconToCopyOnly()" [highlighted]="highlighted()" [clipboardSnackbarMessagesEnabled]="clipboardSnackbarMessagesEnabled()" [clipboardSnackbarMessagesConfig]="clipboardSnackbarMessagesConfig()" [copyTextFromElement]="contentElementRef()">
+      <ng-content></ng-content>
+    </span>
+    @if (showIcon()) {
+      <mat-icon class="dbx-click-to-copy-text-icon" (click)="dbxClickToCopyText()?._copyText()">{{ clickToCopyIcon() }}</mat-icon>
     }
   `,
                     host: {
-                        class: 'dbx-chip-list',
-                        '[style.display]': '"inline"'
+                        class: 'dbx-click-to-copy-text-component'
                     },
-                    imports: [DbxChipDirective],
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    imports: [DbxClickToCopyTextDirective, MatIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }] } });
+        }], propDecorators: { contentElementRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], dbxClickToCopyText: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DbxClickToCopyTextDirective), { isSignal: true }] }], copyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyText", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], clipboardSnackbarMessagesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesConfig", required: false }] }], clipboardSnackbarMessagesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesEnabled", required: false }] }], clickToCopyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickToCopyIcon", required: false }] }], clickIconToCopyOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickIconToCopyOnly", required: false }] }] } });
 
+const importsAndExports$1 = [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective];
 /**
- * Renders a read-only list of Material chip options from an array of {@link TextChip} objects.
+ * Angular module that bundles all text-related layout components and directives, including
+ * address display, chips, detail blocks, copy-to-clipboard, linkify, and number-with-limit.
+ */
+class DbxTextModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, imports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective], exports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, imports: [DbxClickToCopyTextComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxTextChipsComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: importsAndExports$1,
+                    exports: importsAndExports$1
+                }]
+        }] });
+
+class DbxLayoutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, imports: [DbxCompactDirective, DbxFlexGroupDirective, DbxFlexSizeDirective], exports: [DbxBarLayoutModule, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxContentLayoutModule, DbxFlagLayoutModule, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxSectionLayoutModule, DbxStyleLayoutModule, DbxTextModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, imports: [DbxBarLayoutModule, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxContentLayoutModule, DbxFlagLayoutModule, DbxSectionLayoutModule, DbxStyleLayoutModule, DbxTextModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DbxCompactDirective, DbxFlexGroupDirective, DbxFlexSizeDirective],
+                    exports: [DbxBarLayoutModule, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxContentLayoutModule, DbxFlagLayoutModule, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxSectionLayoutModule, DbxStyleLayoutModule, DbxTextModule]
+                }]
+        }] });
+
+/**
+ * One row of a file listing: an optional leading icon, the file's name, an optional details line, and
+ * whatever controls the caller projects into the row's trailing slot.
+ *
+ * Renders the `dbx-list-two-line-item` layout, which is a flat utility rather than something scoped to a
+ * dbx-list, so the same row works both as the item component of a dbx-list and inside a plain list of its
+ * own. That is the point of the component: the two file listings that exist differ in their list machinery
+ * and in their controls, and share only this row.
  *
  * @example
  * ```html
- * <dbx-text-chips [chips]="[{ label: 'Active', value: 'active', selected: true, color: 'primary' }]"></dbx-text-chips>
+ * <dbx-file-list-item name="report.pdf" details="Uploaded" [detailsDate]="uploadedAt" detailsDateStyle="distance">
+ *   <dbx-download-blob-button [config]="downloadConfig"></dbx-download-blob-button>
+ * </dbx-file-list-item>
  * ```
  */
-class DbxTextChipsComponent {
-    _colorService = inject(DbxColorService, { optional: true });
-    defaultSelection = input(...(ngDevMode ? [undefined, { debugName: "defaultSelection" }] : /* istanbul ignore next */ []));
-    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) : '';
-    }
-    /**
-     * Returns the inline `--dbx-bg-color-current` value for a chip when its color is a {@link DbxColorConfig}; otherwise null.
-     *
-     * @param chip - The chip.
-     * @returns The background color CSS value, or null for named-color strings.
-     */
-    chipBgColorStyle(chip) {
-        return this._expandedChipConfig(chip)?.color ?? null;
-    }
-    /**
-     * Returns the inline `--dbx-color-current` value for a chip when its color is a {@link DbxColorConfig}; otherwise null.
+class DbxFileListItemComponent {
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    details = input(...(ngDevMode ? [undefined, { debugName: "details" }] : /* istanbul ignore next */ []));
+    detailsDate = input(...(ngDevMode ? [undefined, { debugName: "detailsDate" }] : /* istanbul ignore next */ []));
+    detailsDateStyle = input(...(ngDevMode ? [undefined, { debugName: "detailsDateStyle" }] : /* istanbul ignore next */ []));
+    detailsClass = input(...(ngDevMode ? [undefined, { debugName: "detailsClass" }] : /* istanbul ignore next */ []));
+    nameSignal = computed(() => {
+        const config = this.config();
+        return this.name() ?? config?.name;
+    }, ...(ngDevMode ? [{ debugName: "nameSignal" }] : /* istanbul ignore next */ []));
+    iconSignal = computed(() => {
+        const config = this.config();
+        return this.icon() ?? config?.icon;
+    }, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
+    detailsSignal = computed(() => {
+        const config = this.config();
+        return this.details() ?? config?.details;
+    }, ...(ngDevMode ? [{ debugName: "detailsSignal" }] : /* istanbul ignore next */ []));
+    detailsDateSignal = computed(() => {
+        const config = this.config();
+        return this.detailsDate() ?? config?.detailsDate;
+    }, ...(ngDevMode ? [{ debugName: "detailsDateSignal" }] : /* istanbul ignore next */ []));
+    detailsDateStyleSignal = computed(() => {
+        const config = this.config();
+        return this.detailsDateStyle() ?? config?.detailsDateStyle ?? DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_DATE_STYLE;
+    }, ...(ngDevMode ? [{ debugName: "detailsDateStyleSignal" }] : /* istanbul ignore next */ []));
+    detailsClassSignal = computed(() => {
+        const config = this.config();
+        return this.detailsClass() ?? config?.detailsClass ?? DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_CLASS;
+    }, ...(ngDevMode ? [{ debugName: "detailsClassSignal" }] : /* istanbul ignore next */ []));
+    isDetailsDateDistanceSignal = computed(() => {
+        const detailsDateStyle = this.detailsDateStyleSignal();
+        return detailsDateStyle === 'distance' || detailsDateStyle === 'distance-past';
+    }, ...(ngDevMode ? [{ debugName: "isDetailsDateDistanceSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * The date the row actually renders.
      *
-     * @param chip - The chip.
-     * @returns The contrast color CSS value, or null for named-color strings.
+     * A `'distance-past'` date is pinned to now once it runs ahead of the clock, so a timestamp that landed
+     * marginally in the future reads as "less than a minute ago" rather than as something yet to happen.
      */
-    chipColorStyle(chip) {
-        return this._expandedChipConfig(chip)?.contrast ?? null;
-    }
-    _expandedChipConfig(chip) {
-        const value = chip.color;
-        return isDbxColorConfig(value) ? (this._colorService?.expandColorConfig(value) ?? value) : undefined;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxTextChipsComponent, isStandalone: true, selector: "dbx-text-chips", inputs: { defaultSelection: { classPropertyName: "defaultSelection", publicName: "defaultSelection", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (chips()) {
-      <mat-chip-listbox class="dbx-text-chips-listbox">
-        @for (chip of chips(); track chip.key ?? chip.label) {
-          <mat-chip-option [selected]="chip.selected ?? defaultSelection()" [class]="chipColorClass(chip)" [style.--dbx-bg-color-current]="chipBgColorStyle(chip)" [style.--dbx-color-current]="chipColorStyle(chip)" [matTooltip]="chip.tooltip!" matTooltipPosition="above">
-            {{ chip.label }}
-          </mat-chip-option>
+    renderedDetailsDateSignal = computed(() => {
+        const detailsDateStyle = this.detailsDateStyleSignal();
+        const detailsDate = this.detailsDateSignal();
+        const now = new Date();
+        let result = detailsDate;
+        if (detailsDate != null && detailsDateStyle === 'distance-past' && detailsDate > now) {
+            result = now;
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "renderedDetailsDateSignal" }] : /* istanbul ignore next */ []));
+    hasDetailsSignal = computed(() => {
+        const detailsDate = this.detailsDateSignal();
+        return Boolean(this.detailsSignal() || detailsDate);
+    }, ...(ngDevMode ? [{ debugName: "hasDetailsSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFileListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFileListItemComponent, isStandalone: true, selector: "dbx-file-list-item", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: false, transformFunction: null }, detailsDate: { classPropertyName: "detailsDate", publicName: "detailsDate", isSignal: true, isRequired: false, transformFunction: null }, detailsDateStyle: { classPropertyName: "detailsDateStyle", publicName: "detailsDateStyle", isSignal: true, isRequired: false, transformFunction: null }, detailsClass: { classPropertyName: "detailsClass", publicName: "detailsClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-file-list-item d-block" }, ngImport: i0, template: `
+    <div class="dbx-list-item-padded dbx-list-two-line-item">
+      @if (iconSignal(); as icon) {
+        <mat-icon class="item-icon">{{ icon }}</mat-icon>
+      }
+      <div class="item-left">
+        <div class="mat-subtitle-2 dbx-text-truncate" [title]="nameSignal()">{{ nameSignal() }}</div>
+        @if (hasDetailsSignal()) {
+          <div class="item-details" [ngClass]="detailsClassSignal()">
+            @if (detailsSignal(); as details) {
+              <!-- The trailing &ngsp; is the separator from the date that follows, and belongs to the text
+                   rather than sitting between the spans: the details read as one sentence with the date
+                   ("Uploaded 3 hours ago"), and Angular drops a whitespace-only text node between two
+                   elements, running the words together. Carried here rather than led on the date so a row
+                   with only a date does not open on a space. -->
+              <span>{{ details }}&ngsp;</span>
+            }
+            @if (renderedDetailsDateSignal(); as detailsDate) {
+              @if (isDetailsDateDistanceSignal()) {
+                <span>{{ detailsDate | timeDistance }}</span>
+              } @else {
+                <span>{{ detailsDate | date: detailsDateStyleSignal() }}</span>
+              }
+            }
+          </div>
         }
-      </mat-chip-listbox>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+      </div>
+      <dbx-spacer></dbx-spacer>
+      <div class="item-right"><ng-content></ng-content></div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFileListItemComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dbx-text-chips',
+                    selector: 'dbx-file-list-item',
                     template: `
-    @if (chips()) {
-      <mat-chip-listbox class="dbx-text-chips-listbox">
-        @for (chip of chips(); track chip.key ?? chip.label) {
-          <mat-chip-option [selected]="chip.selected ?? defaultSelection()" [class]="chipColorClass(chip)" [style.--dbx-bg-color-current]="chipBgColorStyle(chip)" [style.--dbx-color-current]="chipColorStyle(chip)" [matTooltip]="chip.tooltip!" matTooltipPosition="above">
-            {{ chip.label }}
-          </mat-chip-option>
+    <div class="dbx-list-item-padded dbx-list-two-line-item">
+      @if (iconSignal(); as icon) {
+        <mat-icon class="item-icon">{{ icon }}</mat-icon>
+      }
+      <div class="item-left">
+        <div class="mat-subtitle-2 dbx-text-truncate" [title]="nameSignal()">{{ nameSignal() }}</div>
+        @if (hasDetailsSignal()) {
+          <div class="item-details" [ngClass]="detailsClassSignal()">
+            @if (detailsSignal(); as details) {
+              <!-- The trailing &ngsp; is the separator from the date that follows, and belongs to the text
+                   rather than sitting between the spans: the details read as one sentence with the date
+                   ("Uploaded 3 hours ago"), and Angular drops a whitespace-only text node between two
+                   elements, running the words together. Carried here rather than led on the date so a row
+                   with only a date does not open on a space. -->
+              <span>{{ details }}&ngsp;</span>
+            }
+            @if (renderedDetailsDateSignal(); as detailsDate) {
+              @if (isDetailsDateDistanceSignal()) {
+                <span>{{ detailsDate | timeDistance }}</span>
+              } @else {
+                <span>{{ detailsDate | date: detailsDateStyleSignal() }}</span>
+              }
+            }
+          </div>
         }
-      </mat-chip-listbox>
-    }
+      </div>
+      <dbx-spacer></dbx-spacer>
+      <div class="item-right"><ng-content></ng-content></div>
+    </div>
   `,
-                    imports: [MatChipsModule, MatTooltipModule],
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    host: {
+                        class: 'dbx-file-list-item d-block'
+                    },
+                    imports: [DatePipe, NgClass, MatIconModule, TimeDistancePipe, DbxSpacerDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { defaultSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelection", required: false }] }], chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }] } });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], details: [{ type: i0.Input, args: [{ isSignal: true, alias: "details", required: false }] }], detailsDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsDate", required: false }] }], detailsDateStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsDateStyle", required: false }] }], detailsClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsClass", required: false }] }] } });
 
 /**
- * Displays a number value with an optional limit, automatically applying color-coded
- * theming based on the ratio of value to limit (ok, notice, warn).
+ * Lists files described by {@link DbxFileListEntry} values, giving each entry that carries a download
+ * configuration a download button.
+ *
+ * For a listing whose rows need controls of their own, build the list from {@link DbxFileListItemComponent}
+ * directly and project those controls into each row.
  *
  * @example
  * ```html
- * <dbx-number-with-limit [number]="{ value: 7, limit: 10 }"></dbx-number-with-limit>
- * <dbx-number-with-limit [number]="{ value: 3, limit: 5, prefix: '$' }" [rounded]="true"></dbx-number-with-limit>
+ * <dbx-file-list [entries]="entriesSignal()" emptyText="No files yet."></dbx-file-list>
  * ```
  */
-class DbxNumberWithLimitComponent {
-    number = input(...(ngDevMode ? [undefined, { debugName: "number" }] : /* istanbul ignore next */ []));
-    rounded = input(...(ngDevMode ? [undefined, { debugName: "rounded" }] : /* istanbul ignore next */ []));
-    valueSignal = computed(() => {
-        const number = this.number();
-        return number?.formatNumber ? number.formatNumber(number.value) : number?.value;
-    }, ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
-    limitSignal = computed(() => {
-        const number = this.number();
-        return number?.limit == null ? undefined : number?.formatNumber ? number.formatNumber(number.limit) : number?.limit;
-    }, ...(ngDevMode ? [{ debugName: "limitSignal" }] : /* istanbul ignore next */ []));
-    hasLimitSignal = computed(() => {
-        return this.number()?.limit != null;
-    }, ...(ngDevMode ? [{ debugName: "hasLimitSignal" }] : /* istanbul ignore next */ []));
-    prefixSignal = computed(() => {
-        return this.number()?.prefix;
-    }, ...(ngDevMode ? [{ debugName: "prefixSignal" }] : /* istanbul ignore next */ []));
-    suffixSignal = computed(() => {
-        return this.number()?.suffix;
-    }, ...(ngDevMode ? [{ debugName: "suffixSignal" }] : /* istanbul ignore next */ []));
-    colorSignal = computed(() => {
-        const number = this.number();
-        let color;
-        if (number != null) {
-            const { value, limit } = number;
-            if (limit != null) {
-                if (value > limit) {
-                    color = 'warn';
-                }
-                else if (value === limit) {
-                    color = 'notice';
-                }
-                else {
-                    const ratio = limit === 0 ? 1 : value / limit;
-                    if (ratio > 0.8) {
-                        color = 'notice';
-                    }
-                    else {
-                        color = 'ok';
-                    }
-                }
-            }
-        }
-        return color;
-    }, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxNumberWithLimitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxNumberWithLimitComponent, isStandalone: true, selector: "dbx-number-with-limit", inputs: { number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span class="dbx-number-with-limit" [class]="{ 'dbx-number-with-limit-rounded': rounded() }" [dbxColor]="colorSignal()">
-      <span>{{ prefixSignal() }}</span>
-      <span>{{ valueSignal() }}</span>
-      @if (hasLimitSignal()) {
-        <span class="dbx-number-with-limit-divider">/</span>
-        <span>{{ limitSignal() }}</span>
+class DbxFileListComponent {
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    entries = input(...(ngDevMode ? [undefined, { debugName: "entries" }] : /* istanbul ignore next */ []));
+    emptyText = input(...(ngDevMode ? [undefined, { debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    entriesSignal = computed(() => {
+        const config = this.config();
+        return this.entries() ?? config?.entries ?? [];
+    }, ...(ngDevMode ? [{ debugName: "entriesSignal" }] : /* istanbul ignore next */ []));
+    emptyTextSignal = computed(() => {
+        const config = this.config();
+        return this.emptyText() ?? config?.emptyText;
+    }, ...(ngDevMode ? [{ debugName: "emptyTextSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFileListComponent, isStandalone: true, selector: "dbx-file-list", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-file-list d-block" }, ngImport: i0, template: `
+    @if (entriesSignal().length) {
+      @for (entry of entriesSignal(); track entry.key) {
+        <dbx-file-list-item [config]="entry">
+          @if (entry.download; as download) {
+            <dbx-download-blob-button [config]="download"></dbx-download-blob-button>
+          }
+        </dbx-file-list-item>
       }
-      <span>{{ suffixSignal() }}</span>
-    </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxColorDirective, selector: "[dbxColor]", inputs: ["dbxColor", "dbxColorTone"], outputs: ["dbxColorChange", "dbxColorToneChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    } @else if (emptyTextSignal(); as emptyText) {
+      <dbx-list-empty-content>{{ emptyText }}</dbx-list-empty-content>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxFileListItemComponent, selector: "dbx-file-list-item", inputs: ["config", "name", "icon", "details", "detailsDate", "detailsDateStyle", "detailsClass"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "component", type: DbxListEmptyContentComponent, selector: "dbx-list-empty-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxNumberWithLimitComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFileListComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dbx-number-with-limit',
+                    selector: 'dbx-file-list',
                     template: `
-    <span class="dbx-number-with-limit" [class]="{ 'dbx-number-with-limit-rounded': rounded() }" [dbxColor]="colorSignal()">
-      <span>{{ prefixSignal() }}</span>
-      <span>{{ valueSignal() }}</span>
-      @if (hasLimitSignal()) {
-        <span class="dbx-number-with-limit-divider">/</span>
-        <span>{{ limitSignal() }}</span>
+    @if (entriesSignal().length) {
+      @for (entry of entriesSignal(); track entry.key) {
+        <dbx-file-list-item [config]="entry">
+          @if (entry.download; as download) {
+            <dbx-download-blob-button [config]="download"></dbx-download-blob-button>
+          }
+        </dbx-file-list-item>
       }
-      <span>{{ suffixSignal() }}</span>
-    </span>
+    } @else if (emptyTextSignal(); as emptyText) {
+      <dbx-list-empty-content>{{ emptyText }}</dbx-list-empty-content>
+    }
   `,
-                    imports: [DbxColorDirective],
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    host: {
+                        class: 'dbx-file-list d-block'
+                    },
+                    imports: [DbxFileListItemComponent, DbxDownloadBlobButtonComponent, DbxListEmptyContentComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], propDecorators: { number: [{ type: i0.Input, args: [{ isSignal: true, alias: "number", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }] } });
 
 /**
- * Makes the host element clickable to copy text to the clipboard.
- *
- * If no explicit `dbxClickToCopyText` value is provided, copies the element's text content.
- * Optionally highlights the element to indicate it is copyable.
+ * Displays a preview of text content with options to copy to clipboard and download as a file. Supports loading states for async content retrieval.
  *
  * @example
  * ```html
- * <span [dbxClickToCopyText]="'Copy this value'">Copy this value</span>
- * <span dbxClickToCopyText [highlighted]="false">Subtle copy</span>
+ * <dbx-download-text-view [content]="{ content: 'Hello World', name: 'greeting.txt', mimeType: 'text/plain' }" [showPreview]="true"></dbx-download-text-view>
+ * ```
+ */
+class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
+    downloadButton = viewChild('downloadButton', { ...(ngDevMode ? { debugName: "downloadButton" } : /* istanbul ignore next */ {}), read: ElementRef });
+    showDownloadButton = input(true, ...(ngDevMode ? [{ debugName: "showDownloadButton" }] : /* istanbul ignore next */ []));
+    loadingText = input(undefined, ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+    linear = input(undefined, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
+    showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : /* istanbul ignore next */ []));
+    showPreview = input(true, ...(ngDevMode ? [{ debugName: "showPreview" }] : /* istanbul ignore next */ []));
+    showExpandPreviewButton = input(true, ...(ngDevMode ? [{ debugName: "showExpandPreviewButton" }] : /* istanbul ignore next */ []));
+    expandPreview = model(false, ...(ngDevMode ? [{ debugName: "expandPreview" }] : /* istanbul ignore next */ []));
+    content = input(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    contentState = input(undefined, ...(ngDevMode ? [{ debugName: "contentState" }] : /* istanbul ignore next */ []));
+    contentState$ = toObservable(this.contentState).pipe(maybeValueFromObservableOrValue(), shareReplay(1));
+    contentStateSignal = toSignal(this.contentState$);
+    contentLoadingStateSignal = computed(() => {
+        const content = this.content();
+        const contentState = this.contentStateSignal();
+        let result;
+        if (contentState) {
+            result = contentState;
+        }
+        else if (content) {
+            result = successResult(content);
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "contentLoadingStateSignal" }] : /* istanbul ignore next */ []));
+    contentLoadingState$ = toObservable(this.contentLoadingStateSignal);
+    content$ = this.contentLoadingState$.pipe(switchMap((x) => {
+        return x ? of(x).pipe(valueFromFinishedLoadingState()) : of(undefined);
+    }));
+    contentSignal = toSignal(this.content$);
+    contentDataSignal = computed(() => this.contentSignal()?.content, ...(ngDevMode ? [{ debugName: "contentDataSignal" }] : /* istanbul ignore next */ []));
+    fileNameSignal = computed(() => this.contentSignal()?.name ?? 'download.txt', ...(ngDevMode ? [{ debugName: "fileNameSignal" }] : /* istanbul ignore next */ []));
+    downloadConfigSignal = computed(() => {
+        const content = this.contentSignal();
+        const fileName = this.fileNameSignal();
+        let result = undefined;
+        if (content) {
+            result = {
+                blob: new Blob([content.content], { type: content.mimeType ?? 'application/octet-stream' }),
+                fileName
+            };
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "downloadConfigSignal" }] : /* istanbul ignore next */ []));
+    context = loadingStateContext({ obs: this.contentLoadingState$ });
+    handleCopyToClipboard = () => {
+        return this.content$.pipe(first(), switchMap((downloadTextContent) => {
+            return downloadTextContent ? this._copyToClipboard(downloadTextContent.content) : of(false);
+        }));
+    };
+    toggleExpandPreview() {
+        this.expandPreview.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        <div class=\"dbx-content-pit-scrollable-content\">\n          @if (showExpandPreviewButton()) {\n            <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n          }\n          {{ contentDataSignal() }}\n        </div>\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "square"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-download-text-view', standalone: true, imports: [NgTemplateOutlet, DbxLoadingComponent, DbxActionModule, DbxActionButtonDirective, DbxButtonComponent, DbxButtonSpacerDirective, DbxDownloadBlobButtonComponent, DbxContentPitDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        <div class=\"dbx-content-pit-scrollable-content\">\n          @if (showExpandPreviewButton()) {\n            <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n          }\n          {{ contentDataSignal() }}\n        </div>\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { downloadButton: [{ type: i0.ViewChild, args: ['downloadButton', { ...{ read: ElementRef }, isSignal: true }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], showExpandPreviewButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandPreviewButton", required: false }] }], expandPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandPreview", required: false }] }, { type: i0.Output, args: ["expandPreviewChange"] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentState: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentState", required: false }] }] } });
+
+/**
+ * Default entries to inject.
+ */
+const DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN = new InjectionToken('DefaultDbxWebFilePreviewServiceEntries');
+/**
+ * Creates a provider that registers the given entries with the {@link DbxWebFilePreviewService} via the {@link DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN}.
+ *
+ * @param entries - Array of preview service entries to register, each mapping a MIME type to its preview component.
+ * @returns A provider configuration that supplies the entries via the injection token.
+ *
+ * @example
+ * ```typescript
+ * provideDbxWebFilePreviewServiceEntries([DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY]);
  * ```
  */
-class DbxClickToCopyTextDirective extends AbstractDbxClipboardDirective {
-    copyTextFromElement = model(...(ngDevMode ? [undefined, { debugName: "copyTextFromElement" }] : /* istanbul ignore next */ []));
+function provideDbxWebFilePreviewServiceEntries(entries) {
+    return {
+        provide: DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN,
+        useValue: entries
+    };
+}
+// MARK: Default Functions
+/**
+ * Default preview component function that embeds files using {@link DbxEmbedComponent}. Images are rendered with an `img` element; all other types use `embed`.
+ *
+ * @param input - The preview input containing blob data, source URL, and MIME type information.
+ * @returns An injection component config that initializes a {@link DbxEmbedComponent} with the appropriate embed element and content.
+ */
+const DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION = (input) => {
+    const { blob, srcUrl, embedMimeType, sanitizeSrcUrl } = input;
+    let embedElement = 'embed';
+    if (embedMimeType) {
+        // embed any image mime types to img
+        embedElement = embedMimeType.startsWith('image/') ? 'img' : 'embed';
+    }
+    return {
+        componentClass: DbxEmbedComponent,
+        init: (x) => {
+            x.embedElement.set(embedElement);
+            if (blob != null) {
+                x.blob.set(blob);
+            }
+            if (srcUrl != null) {
+                x.srcUrl.set(srcUrl);
+                x.sanitizeUrl.set(sanitizeSrcUrl ?? true);
+            }
+            if (embedMimeType != null) {
+                x.type.set(embedMimeType);
+            }
+        }
+    };
+};
+/**
+ * Default dialog-with-component function that opens the preview component inside a {@link DbxInjectionDialogComponent} with a close button.
+ *
+ * @param input - The dialog input containing the MatDialog instance and the component config to display.
+ * @returns A MatDialogRef for the opened injection dialog.
+ */
+const DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION = (input) => {
+    const { matDialog, componentConfig } = input;
+    return DbxInjectionDialogComponent.openDialog(matDialog, {
+        componentConfig,
+        showCloseButton: true
+    });
+};
+// MARK: Service
+/**
+ * Service used for previewing files with given mime types.
+ */
+class DbxWebFilePreviewService {
+    matDialog = inject(MatDialog);
+    _entries = new Map();
+    constructor() {
+        const entries = inject(DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN, { optional: true });
+        if (entries) {
+            entries.forEach((x) => this.registerPreviewEntry(x));
+        }
+    }
+    _defaultPreviewComponentFunction = DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION;
+    _defaultPreviewDialogWithComponentFunction = DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION;
+    // Configuration
     /**
-     * If the input is null, then copy from the element's text content.
+     * Registers one or more file preview entries, mapping MIME types to their preview components.
+     *
+     * @param entries - Single or array of preview entries to register.
      */
-    copyText = input(undefined, { ...(ngDevMode ? { debugName: "copyText" } : /* istanbul ignore next */ {}), alias: 'dbxClickToCopyText' });
+    registerPreviewEntries(entries) {
+        asArray(entries).forEach((entry) => this.registerPreviewEntry(entry));
+    }
     /**
-     * If true, the click events will be ignored.
+     * Registers a single file preview entry for its MIME type(s).
+     *
+     * @param entry - The preview entry to register.
      */
-    disableCopy = input(false, ...(ngDevMode ? [{ debugName: "disableCopy" }] : /* istanbul ignore next */ []));
+    registerPreviewEntry(entry) {
+        asArray(entry.mimeType).forEach((mimeType) => this._entries.set(mimeType, entry));
+    }
     /**
-     * Highlight the text visually.
+     * Overrides the default preview component function used when no MIME-specific entry is registered.
+     *
+     * @param previewFunction - The preview component function to use as the new default.
      */
-    highlighted = input(true, ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-    handleClick(event) {
-        const disabled = this.disableCopy();
-        if (!disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            const eventElement = event.currentTarget;
-            this._copyText(eventElement);
-        }
+    setDefaultPreviewComponentFunction(previewFunction) {
+        this._defaultPreviewComponentFunction = previewFunction;
     }
-    _copyText(eventElement) {
-        let copyText = this.copyText();
-        // If the input is null, then copy from the element's text content.
-        if (copyText !== null && !copyText) {
-            const element = this.copyTextFromElement()?.nativeElement;
-            copyText = (element ?? eventElement)?.textContent ?? undefined;
+    /**
+     * Overrides the default dialog-with-component function used when no MIME-specific dialog handler is registered.
+     *
+     * @param previewDialogWithComponentFunction - The dialog-with-component function to use as the new default.
+     */
+    setDefaultPreviewDialogWithComponentFunction(previewDialogWithComponentFunction) {
+        this._defaultPreviewDialogWithComponentFunction = previewDialogWithComponentFunction;
+    }
+    // Service
+    /**
+     * Creates an injection component config for previewing a file. Uses a MIME-specific preview function if registered, otherwise falls back to the default.
+     *
+     * @param input - The preview input containing blob, URL, and MIME type information.
+     * @returns An injection component config suitable for rendering the file preview.
+     */
+    createPreviewConfig(input) {
+        const { embedMimeType } = input;
+        const previewFunction = (embedMimeType ? this._entries.get(embedMimeType)?.previewComponentFunction : undefined) ?? this._defaultPreviewComponentFunction;
+        return previewFunction(input);
+    }
+    /**
+     * Opens a Material dialog to preview a file. Uses a MIME-specific dialog function if registered, otherwise creates a preview component and wraps it in the default dialog.
+     *
+     * @param input - The dialog input containing file data and MIME type.
+     * @returns Reference to the opened dialog.
+     */
+    openPreviewDialog(input) {
+        const { embedMimeType } = input;
+        const previewDialogFunction = embedMimeType ? this._entries.get(embedMimeType)?.previewDialogFunction : undefined;
+        let matDialogRef;
+        if (previewDialogFunction) {
+            matDialogRef = previewDialogFunction({
+                matDialog: this.matDialog,
+                ...input
+            });
         }
-        if (copyText) {
-            void this._copyToClipboard(copyText);
+        else {
+            const componentConfig = this.createPreviewConfig(input);
+            matDialogRef = this._defaultPreviewDialogWithComponentFunction({
+                matDialog: this.matDialog,
+                ...input,
+                componentConfig
+            });
         }
-        return copyText;
+        return matDialogRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxClickToCopyTextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxClickToCopyTextDirective, isStandalone: true, selector: "[dbxClickToCopyText]", inputs: { copyTextFromElement: { classPropertyName: "copyTextFromElement", publicName: "copyTextFromElement", isSignal: true, isRequired: false, transformFunction: null }, copyText: { classPropertyName: "copyText", publicName: "dbxClickToCopyText", isSignal: true, isRequired: false, transformFunction: null }, disableCopy: { classPropertyName: "disableCopy", publicName: "disableCopy", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copyTextFromElement: "copyTextFromElementChange" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class.dbx-click-to-copy-text-highlighted": "highlighted()" }, classAttribute: "dbx-click-to-copy-text" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxClickToCopyTextDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[dbxClickToCopyText]',
-                    host: {
-                        class: 'dbx-click-to-copy-text',
-                        '[class.dbx-click-to-copy-text-highlighted]': 'highlighted()'
-                    },
-                    standalone: true
+                    providedIn: 'root'
                 }]
-        }], propDecorators: { copyTextFromElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyTextFromElement", required: false }] }, { type: i0.Output, args: ["copyTextFromElementChange"] }], copyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dbxClickToCopyText", required: false }] }], disableCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableCopy", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], handleClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
- * Wraps projected content with click-to-copy functionality and a copy icon button.
- *
- * Clicking the text or the icon copies the text to the clipboard and optionally shows a snackbar confirmation.
- *
- * @dbxWebComponent
- * @dbxWebSlug click-to-copy-text
- * @dbxWebCategory text
- * @dbxWebRelated chip
- * @dbxWebSkillRefs dbx__ref__dbx-ui-building-blocks
- * @dbxWebMinimalExample ```html
- * <dbx-click-to-copy-text [text]="value"></dbx-click-to-copy-text>
- * ```
+ * Previews a file by delegating to the {@link DbxWebFilePreviewService} to resolve the appropriate preview component for the given MIME type.
  *
  * @example
  * ```html
- * <dbx-click-to-copy-text [text]="userId"></dbx-click-to-copy-text>
+ * <dbx-web-file-preview [config]="{ srcUrl: 'https://example.com/doc.pdf', embedMimeType: 'application/pdf' }"></dbx-web-file-preview>
  * ```
  */
-class DbxClickToCopyTextComponent {
-    contentElementRef = viewChild('content', ...(ngDevMode ? [{ debugName: "contentElementRef" }] : /* istanbul ignore next */ []));
-    dbxClickToCopyText = viewChild(DbxClickToCopyTextDirective, ...(ngDevMode ? [{ debugName: "dbxClickToCopyText" }] : /* istanbul ignore next */ []));
-    copyText = input(undefined, ...(ngDevMode ? [{ debugName: "copyText" }] : /* istanbul ignore next */ []));
-    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
-    highlighted = input(false, ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
-    clipboardSnackbarMessagesConfig = input(undefined, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesConfig" }] : /* istanbul ignore next */ []));
-    clipboardSnackbarMessagesEnabled = input(true, ...(ngDevMode ? [{ debugName: "clipboardSnackbarMessagesEnabled" }] : /* istanbul ignore next */ []));
-    clickToCopyIcon = input('content_copy', ...(ngDevMode ? [{ debugName: "clickToCopyIcon" }] : /* istanbul ignore next */ []));
-    clickIconToCopyOnly = input(false, ...(ngDevMode ? [{ debugName: "clickIconToCopyOnly" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxClickToCopyTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxClickToCopyTextComponent, isStandalone: true, selector: "dbx-click-to-copy-text", inputs: { copyText: { classPropertyName: "copyText", publicName: "copyText", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, clipboardSnackbarMessagesConfig: { classPropertyName: "clipboardSnackbarMessagesConfig", publicName: "clipboardSnackbarMessagesConfig", isSignal: true, isRequired: false, transformFunction: null }, clipboardSnackbarMessagesEnabled: { classPropertyName: "clipboardSnackbarMessagesEnabled", publicName: "clipboardSnackbarMessagesEnabled", isSignal: true, isRequired: false, transformFunction: null }, clickToCopyIcon: { classPropertyName: "clickToCopyIcon", publicName: "clickToCopyIcon", isSignal: true, isRequired: false, transformFunction: null }, clickIconToCopyOnly: { classPropertyName: "clickIconToCopyOnly", publicName: "clickIconToCopyOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-click-to-copy-text-component" }, viewQueries: [{ propertyName: "contentElementRef", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "dbxClickToCopyText", first: true, predicate: DbxClickToCopyTextDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <span #content [dbxClickToCopyText]="copyText()" [disableCopy]="clickIconToCopyOnly()" [highlighted]="highlighted()" [clipboardSnackbarMessagesEnabled]="clipboardSnackbarMessagesEnabled()" [clipboardSnackbarMessagesConfig]="clipboardSnackbarMessagesConfig()" [copyTextFromElement]="contentElementRef()">
-      <ng-content></ng-content>
-    </span>
-    @if (showIcon()) {
-      <mat-icon class="dbx-click-to-copy-text-icon" (click)="dbxClickToCopyText()?._copyText()">{{ clickToCopyIcon() }}</mat-icon>
-    }
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxClickToCopyTextDirective, selector: "[dbxClickToCopyText]", inputs: ["copyTextFromElement", "dbxClickToCopyText", "disableCopy", "highlighted"], outputs: ["copyTextFromElementChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class DbxWebFilePreviewComponent {
+    webFilePreviewService = inject(DbxWebFilePreviewService);
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    componentConfigSignal = computed(() => {
+        const config = this.config();
+        let componentConfig;
+        if (config) {
+            componentConfig = this.webFilePreviewService.createPreviewConfig(config);
+        }
+        return componentConfig;
+    }, ...(ngDevMode ? [{ debugName: "componentConfigSignal" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: DbxWebFilePreviewComponent, isStandalone: true, selector: "dbx-web-file-preview", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <dbx-injection [config]="componentConfigSignal()"></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: "21.2.11", ngImport: i0, type: DbxClickToCopyTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxWebFilePreviewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dbx-click-to-copy-text',
+                    selector: 'dbx-web-file-preview',
                     template: `
-    <span #content [dbxClickToCopyText]="copyText()" [disableCopy]="clickIconToCopyOnly()" [highlighted]="highlighted()" [clipboardSnackbarMessagesEnabled]="clipboardSnackbarMessagesEnabled()" [clipboardSnackbarMessagesConfig]="clipboardSnackbarMessagesConfig()" [copyTextFromElement]="contentElementRef()">
-      <ng-content></ng-content>
-    </span>
-    @if (showIcon()) {
-      <mat-icon class="dbx-click-to-copy-text-icon" (click)="dbxClickToCopyText()?._copyText()">{{ clickToCopyIcon() }}</mat-icon>
-    }
+    <dbx-injection [config]="componentConfigSignal()"></dbx-injection>
   `,
-                    host: {
-                        class: 'dbx-click-to-copy-text-component'
-                    },
-                    imports: [DbxClickToCopyTextDirective, MatIcon],
+                    standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
+                    imports: [DbxInjectionComponent]
                 }]
-        }], propDecorators: { contentElementRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], dbxClickToCopyText: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DbxClickToCopyTextDirective), { isSignal: true }] }], copyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyText", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], clipboardSnackbarMessagesConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesConfig", required: false }] }], clipboardSnackbarMessagesEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboardSnackbarMessagesEnabled", required: false }] }], clickToCopyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickToCopyIcon", required: false }] }], clickIconToCopyOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickIconToCopyOnly", required: false }] }] } });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
-const importsAndExports$1 = [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective];
 /**
- * Angular module that bundles all text-related layout components and directives, including
- * address display, chips, detail blocks, copy-to-clipboard, linkify, and number-with-limit.
+ * Builds a directory tree from an array of zip archive entries, enriching each node with MIME type detection and blob retrieval capability.
+ *
+ * @param entries - Array of zip archive entries to build the tree from, or null/undefined for an empty tree.
+ * @returns The root node of the constructed directory tree with MIME types and blob getters attached.
+ *
+ * @example
+ * ```typescript
+ * const root = dbxZipBlobPreviewEntryTreeFromEntries(zipEntries);
+ * // root.children contains the top-level files and directories
+ * ```
  */
-class DbxTextModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, imports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective], exports: [DbxUnitedStatesAddressComponent, DbxNumberWithLimitComponent, DbxClickToCopyTextDirective, DbxClickToCopyTextComponent, DbxChipDirective, DbxChipListComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxLabelBlockComponent, DbxLinkifyComponent, DbxTextChipsComponent, DbxIconSpacerDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, imports: [DbxClickToCopyTextComponent, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxStepBlockComponent, DbxTextChipsComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: importsAndExports$1,
-                    exports: importsAndExports$1
-                }]
-        }] });
-
-class DbxLayoutModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, imports: [DbxCompactDirective, DbxFlexGroupDirective, DbxFlexSizeDirective], exports: [DbxBarLayoutModule, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxContentLayoutModule, DbxFlagLayoutModule, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxSectionLayoutModule, DbxStyleLayoutModule, DbxTextModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, imports: [DbxBarLayoutModule, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxContentLayoutModule, DbxFlagLayoutModule, DbxSectionLayoutModule, DbxStyleLayoutModule, DbxTextModule] });
+function dbxZipBlobPreviewEntryTreeFromEntries(entries) {
+    const nodeValues = (entries ?? []).map((value) => {
+        const nodeSlashPathDetails = slashPathDetails(value.filename);
+        const mimeType = mimeTypeForFileExtension(nodeSlashPathDetails.typedFileExtension);
+        return {
+            value,
+            mimeType,
+            slashPathDetails: nodeSlashPathDetails,
+            getBlob: value.getData ? () => value.getData(new BlobWriter(mimeType ?? undefined)) : undefined
+        };
+    });
+    return slashPathDirectoryTree(nodeValues);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [DbxCompactDirective, DbxFlexGroupDirective, DbxFlexSizeDirective],
-                    exports: [DbxBarLayoutModule, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxContentLayoutModule, DbxFlagLayoutModule, DbxFlexGroupDirective, DbxFlexSizeDirective, DbxSectionLayoutModule, DbxStyleLayoutModule, DbxTextModule]
-                }]
-        }] });
 
 /**
  * Returns the appropriate Material icon name for a zip entry tree node: "folder" for directories, "note" for files with a known MIME type, or "question_mark" for unknown files.
@@ -16497,7 +16774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class DbxZipPreviewEntryListViewItemComponent extends AbstractDbxValueListViewItemComponent {
     get name() {
-        return this.itemValue.value.value.filename ?? 'hello';
+        return this.itemValue.value.value.filename;
     }
     get lastModDate() {
         return this.itemValue.value.value.lastModDate ?? undefined;
@@ -16525,43 +16802,25 @@ class DbxZipPreviewEntryListViewItemComponent extends AbstractDbxValueListViewIt
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxZipPreviewEntryListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxZipPreviewEntryListViewItemComponent, isStandalone: true, selector: "dbx-zip-preview-file-entry-list-view-item", usesInheritance: true, ngImport: i0, template: `
-    <div class="dbx-list-item-padded dbx-list-two-line-item">
-      <div class="item-left">
-        <div class="mat-subtitle-2">{{ name }}</div>
-        @if (lastModDate) {
-          <div class="item-details">{{ lastModDate | date: 'short' }}</div>
-        }
-      </div>
-      <dbx-spacer></dbx-spacer>
-      <div class="item-right">
-        @if (canDownload) {
-          <dbx-download-blob-button [config]="downloadBlobButtonConfig"></dbx-download-blob-button>
-        }
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    <dbx-file-list-item [name]="name" [detailsDate]="lastModDate">
+      @if (canDownload) {
+        <dbx-download-blob-button [config]="downloadBlobButtonConfig"></dbx-download-blob-button>
+      }
+    </dbx-file-list-item>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxFileListItemComponent, selector: "dbx-file-list-item", inputs: ["config", "name", "icon", "details", "detailsDate", "detailsDateStyle", "detailsClass"] }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxZipPreviewEntryListViewItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-zip-preview-file-entry-list-view-item',
                     template: `
-    <div class="dbx-list-item-padded dbx-list-two-line-item">
-      <div class="item-left">
-        <div class="mat-subtitle-2">{{ name }}</div>
-        @if (lastModDate) {
-          <div class="item-details">{{ lastModDate | date: 'short' }}</div>
-        }
-      </div>
-      <dbx-spacer></dbx-spacer>
-      <div class="item-right">
-        @if (canDownload) {
-          <dbx-download-blob-button [config]="downloadBlobButtonConfig"></dbx-download-blob-button>
-        }
-      </div>
-    </div>
+    <dbx-file-list-item [name]="name" [detailsDate]="lastModDate">
+      @if (canDownload) {
+        <dbx-download-blob-button [config]="downloadBlobButtonConfig"></dbx-download-blob-button>
+      }
+    </dbx-file-list-item>
   `,
-                    imports: [DatePipe, DbxSpacerDirective, DbxDownloadBlobButtonComponent],
+                    imports: [DbxFileListItemComponent, DbxDownloadBlobButtonComponent],
                     standalone: true
                 }]
         }] });
@@ -21669,5 +21928,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxClipboardDirective, AbstractDbxErrorWidgetComponent, AbstractDbxFileUploadComponent, AbstractDbxHelpWidgetDirective, AbstractDbxListAccordionViewDirective, 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_COLOR_CUSTOM_BG_CSS_CLASS, DBX_COLOR_CUSTOM_TEXT_CSS_CLASS, DBX_CURATED_COLOR_COUNT, DBX_CURATED_COLOR_TEMPLATES, DBX_CURATED_COLOR_TEMPLATE_KEY_PREFIX, DBX_DARK_STYLE_CLASS_SUFFIX, DBX_HELP_WIDGET_ENTRY_DATA_TOKEN, DBX_LIST_ACCORDION_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_GRID_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN, DBX_PDF_MERGE_EDITOR_CONFIG, DBX_PDF_MERGE_EDITOR_INITIAL_STATE, DBX_PDF_MERGE_EDITOR_PRESERVE_ENTRIES_ON_SLOT_DESTROY, DBX_PDF_MERGE_ENCRYPTED_ERROR_MESSAGE, DBX_PDF_MERGE_ENCRYPTED_NOT_EDITABLE_MESSAGE, DBX_PDF_MERGE_IGNORED_ENTRY_MESSAGE, DBX_PDF_MERGE_IMPORT_ERROR_MESSAGES, DBX_PDF_MERGE_SUPERSEDED_SLOT_MESSAGE, DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_ANCHOR_COMPONENTS, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_VALUE_LIST_VIEW_ITEM, DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_COMPONENT_PRESET, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY, DBX_WEB_PAGE_TITLE_SERVICE_CONFIG, DEFAULT_DBX_CHIP_TONE, DEFAULT_DBX_DETACH_KEY, DEFAULT_DBX_ERROR_SNACKBAR_CONFIG, DEFAULT_DBX_HELP_VIEW_POPOVER_KEY, DEFAULT_DBX_LINKIFY_STRING_TYPE, DEFAULT_DBX_LIST_ACCORDION_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_GRID_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_ITEM_DISABLE_FUNCTION, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_LIST_SCROLL_DISTANCE, DEFAULT_DBX_LIST_THROTTLE_SCROLL, DEFAULT_DBX_LIST_VIEW_META_ICON, DEFAULT_DBX_PDF_MERGE_ENCRYPTED_HANDLING, DEFAULT_DBX_PDF_MERGE_PAGE_EDITING, DEFAULT_DBX_PDF_MERGE_RESTORE_IMPORT_ON_CLEAR, DEFAULT_DBX_PDF_MERGE_SIDECAR, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_STYLE_CONFIG_TOKEN, DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION, DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_IMAGE_BITMAP_TO_BLOB_ENCODER, DEFAULT_IMAGE_JPEG_QUALITY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_PDF_MERGE_ACCEPT, DEFAULT_PDF_MERGE_PAGE_GROUP_KEY, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION, DbxAccordionHeaderHeightDirective, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarErrorDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxAvatarComponent, DbxAvatarViewComponent, DbxAvatarViewService, DbxAvatarViewServiceConfig, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBodyDirective, DbxButtonComponent, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerDirective, DbxCardBoxLayoutModule, DbxChipDirective, DbxChipListComponent, DbxClickToCopyTextComponent, DbxClickToCopyTextDirective, DbxColorDirective, DbxColorService, DbxColorServiceConfig, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetachContentComponent, DbxDetachControlButtonsComponent, DbxDetachController, DbxDetachControlsComponent, DbxDetachInitDirective, DbxDetachInteractionModule, DbxDetachOutletComponent, DbxDetachOverlayComponent, DbxDetachService, DbxDetachWindowState, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDialogModule, DbxDownloadBlobButtonComponent, DbxDownloadTextViewComponent, DbxEmbedComponent, DbxErrorComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorSnackbarComponent, DbxErrorSnackbarService, DbxErrorViewComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFileUploadActionCompatable, DbxFileUploadActionSyncDirective, DbxFileUploadAreaComponent, DbxFileUploadButtonComponent, DbxFileUploadComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHelpContextDirective, DbxHelpContextService, DbxHelpViewListComponent, DbxHelpViewListEntryComponent, DbxHelpViewPopoverButtonComponent, DbxHelpViewPopoverComponent, DbxHelpWidgetService, DbxHelpWidgetServiceConfig, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIconTileComponent, DbxIconTileDirective, DbxIfSidenavDisplayModeDirective, DbxIframeComponent, DbxInjectionDialogComponent, DbxInteractionModule, DbxIntroActionSectionComponent, DbxLabelBlockComponent, DbxLayoutModule, DbxLinkComponent, DbxLinkifyComponent, DbxLinkifyService, DbxLinkifyServiceConfig, DbxListAccordionViewComponentImportsModule, DbxListComponent, DbxListEmptyContentComponent, DbxListGridViewComponentImportsModule, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, 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, DbxPdfMergeEditorComponent, DbxPdfMergeEditorFileUploadComponent, DbxPdfMergeEditorFileUploadHasStateDirective, DbxPdfMergeEditorFileUploadValidatorDirective, DbxPdfMergeEditorStore, DbxPdfMergeEditorStoreDirective, DbxPdfMergeEntryComponent, DbxPdfMergeImportComponent, DbxPdfMergeListComponent, DbxPdfMergePageComponent, DbxPdfMergePageListComponent, DbxPdfMergeUploadActionDirective, DbxPdfMergeUploadButtonDirective, DbxPdfMergeUploadDialogComponent, DbxPdfPreviewComponent, 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, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListViewComponent, DbxSelectionValueListViewComponentImportsModule, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepBlockComponent, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxTextChipsComponent, DbxTextColorDirective, DbxTextModule, DbxTwoBlockComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadDirective, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListAccordionViewComponent, DbxValueListAccordionViewContentComponent, DbxValueListAccordionViewContentGroupComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListGridViewContentGroupComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewComponentImportsModule, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWebFilePreviewComponent, DbxWebFilePreviewService, DbxWebModule, DbxWebPageTitleInfoDirective, DbxWebPageTitleService, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, DbxZipBlobPreviewComponent, DbxZipPreviewComponent, PDF_MERGE_PAGE_ID_SEPARATOR, PDF_MERGE_PAGE_TAG_KEY, PDF_MERGE_RESULT_MIME_TYPE, PDF_MERGE_SIDECAR_DESCRIPTION, PDF_MERGE_SIDECAR_FILE_NAME, PDF_MERGE_SIDECAR_VERSION, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SIDE_NAV_DISPLAY_MODE_ORDER, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, UNKNOWN_ERROR_WIDGET_CODE, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, asPdfMergeFile, attachPdfMergeSidecar, buildPdfMergeEntriesFromSidecar, buildPdfMergeEntry, buildPdfMergeEntrySync, buildPdfMergePagePlan, catchErrorServerParams, classifyPdfMergeFile, compactModeFromInput, compareScreenMediaWidthTypes, compressImageFile, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, copyToClipboardFunction, dbxColorBackground, dbxCuratedColorConfigForString, dbxListAccordionViewComponentImportsAndExports, dbxListGridViewComponentImportsAndExports, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxStyleClassCleanSuffix, dbxThemeColorCssToken, dbxThemeColorCssTokenVar, dbxThemeColorCssVariable, dbxThemeColorCssVariableVar, dbxValueListItemDecisionFunction, dbxValueListItemKeyForItemValue, dbxWebDefaultPageTitleDelegate, dbxZipBlobPreviewEntryTreeFromEntries, defaultDbxModelViewTrackerStorageAccessorFactory, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, entryIdForPdfMergePageId, fileAcceptFilterTypeStringArray, fileAcceptFunction, fileAcceptString, fileArrayAcceptMatchFunction, flattenAccordionGroups, formatPdfMergeEntrySize, index as fromDbxModel, injectCopyToClipboardFunction, injectCopyToClipboardFunctionWithSnackbarMessage, isDbxColorConfig, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, makePdfMergePageId, makePdfMergeSidecar, makePdfMergeSidecarPageTag, mapCompactModeObs, mapValuesToValuesListItemConfigObs, mergePdfMergeEntries, index$1 as onDbxModel, openEmbedDialog, openIframeDialog, openPdfPreviewDialog, openZipPreviewDialog, overrideClickElementEffect, pdfMergeEntriesUseEncryptedPassthrough, pdfMergePageGroupKeyForSlotId, provideDbxDetachController, provideDbxFileUploadActionCompatable, provideDbxHelpServices, provideDbxLinkify, provideDbxListView, provideDbxListViewWrapper, provideDbxModelService, provideDbxPdfMergeEditorConfig, provideDbxPdfMergeEditorPreserveEntriesOnSlotDestroy, provideDbxProgressButtonGlobalConfig, provideDbxPromptConfirm, provideDbxRouterWebAngularRouterProviderConfig, provideDbxRouterWebUiRouterProviderConfig, provideDbxScreenMediaService, provideDbxStyleService, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideDbxWebFilePreviewServiceEntries, provideDbxWebPageTitleService, provideTwoColumnsContext, readPdfMergeEntryPageMetas, readPdfMergePageTag, readPdfMergeSidecar, registerHelpContextKeysWithDbxHelpContextService, resizeSignal, resolveSideNavDisplayMode, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, splitPdfMergeSidecarDocuments, trackByModelKeyRef, trackByUniqueIdentifier, validatePdfMergeEntry, writePdfMergePageTag };
+export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxClipboardDirective, AbstractDbxErrorWidgetComponent, AbstractDbxFileUploadComponent, AbstractDbxHelpWidgetDirective, AbstractDbxListAccordionViewDirective, 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_COLOR_CUSTOM_BG_CSS_CLASS, DBX_COLOR_CUSTOM_TEXT_CSS_CLASS, DBX_CURATED_COLOR_COUNT, DBX_CURATED_COLOR_TEMPLATES, DBX_CURATED_COLOR_TEMPLATE_KEY_PREFIX, DBX_DARK_STYLE_CLASS_SUFFIX, DBX_HELP_WIDGET_ENTRY_DATA_TOKEN, DBX_LIST_ACCORDION_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_GRID_VIEW_COMPONENT_IMPORTS_AND_EXPORTS, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN, DBX_PDF_MERGE_EDITOR_CONFIG, DBX_PDF_MERGE_EDITOR_INITIAL_STATE, DBX_PDF_MERGE_EDITOR_PRESERVE_ENTRIES_ON_SLOT_DESTROY, DBX_PDF_MERGE_ENCRYPTED_ERROR_MESSAGE, DBX_PDF_MERGE_ENCRYPTED_NOT_EDITABLE_MESSAGE, DBX_PDF_MERGE_IGNORED_ENTRY_MESSAGE, DBX_PDF_MERGE_IMPORT_ERROR_MESSAGES, DBX_PDF_MERGE_SUPERSEDED_SLOT_MESSAGE, DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_ANCHOR_COMPONENTS, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_VALUE_LIST_VIEW_ITEM, DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_COMPONENT_PRESET, DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY, DBX_WEB_PAGE_TITLE_SERVICE_CONFIG, DEFAULT_DBX_CHIP_TONE, DEFAULT_DBX_DETACH_KEY, DEFAULT_DBX_ERROR_SNACKBAR_CONFIG, DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_CLASS, DEFAULT_DBX_FILE_LIST_ITEM_DETAILS_DATE_STYLE, DEFAULT_DBX_HELP_VIEW_POPOVER_KEY, DEFAULT_DBX_LINKIFY_STRING_TYPE, DEFAULT_DBX_LIST_ACCORDION_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_GRID_VIEW_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_LIST_ITEM_DISABLE_FUNCTION, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_LIST_SCROLL_DISTANCE, DEFAULT_DBX_LIST_THROTTLE_SCROLL, DEFAULT_DBX_LIST_VIEW_META_ICON, DEFAULT_DBX_PDF_MERGE_ENCRYPTED_HANDLING, DEFAULT_DBX_PDF_MERGE_PAGE_EDITING, DEFAULT_DBX_PDF_MERGE_RESTORE_IMPORT_ON_CLEAR, DEFAULT_DBX_PDF_MERGE_SIDECAR, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_STYLE_CONFIG_TOKEN, DEFAULT_DBX_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_DIALOG_WITH_COMPONENT_FUNCTION, DEFAULT_DBX_WEB_FILE_PREVIEW_SERVICE_PREVIEW_COMPONENT_FUNCTION, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_IMAGE_BITMAP_TO_BLOB_ENCODER, DEFAULT_IMAGE_JPEG_QUALITY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_PDF_MERGE_ACCEPT, DEFAULT_PDF_MERGE_PAGE_GROUP_KEY, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DEFAULT_VALUE_LIST_VIEW_CONTENT_COMPONENT_TRACK_BY_FUNCTION, DbxAccordionHeaderHeightDirective, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarErrorDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxAvatarComponent, DbxAvatarViewComponent, DbxAvatarViewService, DbxAvatarViewServiceConfig, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBodyDirective, DbxButtonComponent, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerDirective, DbxCardBoxLayoutModule, DbxChipDirective, DbxChipListComponent, DbxClickToCopyTextComponent, DbxClickToCopyTextDirective, DbxColorDirective, DbxColorService, DbxColorServiceConfig, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetachContentComponent, DbxDetachControlButtonsComponent, DbxDetachController, DbxDetachControlsComponent, DbxDetachInitDirective, DbxDetachInteractionModule, DbxDetachOutletComponent, DbxDetachOverlayComponent, DbxDetachService, DbxDetachWindowState, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDialogModule, DbxDownloadBlobButtonComponent, DbxDownloadTextViewComponent, DbxEmbedComponent, DbxErrorComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorSnackbarComponent, DbxErrorSnackbarService, DbxErrorViewComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFileListComponent, DbxFileListItemComponent, DbxFileUploadActionCompatable, DbxFileUploadActionSyncDirective, DbxFileUploadAreaComponent, DbxFileUploadButtonComponent, DbxFileUploadComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHelpContextDirective, DbxHelpContextService, DbxHelpViewListComponent, DbxHelpViewListEntryComponent, DbxHelpViewPopoverButtonComponent, DbxHelpViewPopoverComponent, DbxHelpWidgetService, DbxHelpWidgetServiceConfig, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIconTileComponent, DbxIconTileDirective, DbxIfSidenavDisplayModeDirective, DbxIframeComponent, DbxInjectionDialogComponent, DbxInteractionModule, DbxIntroActionSectionComponent, DbxLabelBlockComponent, DbxLayoutModule, DbxLinkComponent, DbxLinkifyComponent, DbxLinkifyService, DbxLinkifyServiceConfig, DbxListAccordionViewComponentImportsModule, DbxListComponent, DbxListEmptyContentComponent, DbxListGridViewComponentImportsModule, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, 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, DbxPdfMergeEditorComponent, DbxPdfMergeEditorFileUploadComponent, DbxPdfMergeEditorFileUploadHasStateDirective, DbxPdfMergeEditorFileUploadValidatorDirective, DbxPdfMergeEditorStore, DbxPdfMergeEditorStoreDirective, DbxPdfMergeEntryComponent, DbxPdfMergeImportComponent, DbxPdfMergeListComponent, DbxPdfMergePageComponent, DbxPdfMergePageListComponent, DbxPdfMergeUploadActionDirective, DbxPdfMergeUploadButtonDirective, DbxPdfMergeUploadDialogComponent, DbxPdfPreviewComponent, 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, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListViewComponent, DbxSelectionValueListViewComponentImportsModule, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepBlockComponent, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxTextChipsComponent, DbxTextColorDirective, DbxTextModule, DbxTwoBlockComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadDirective, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListAccordionViewComponent, DbxValueListAccordionViewContentComponent, DbxValueListAccordionViewContentGroupComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListGridViewContentGroupComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewComponentImportsModule, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWebFilePreviewComponent, DbxWebFilePreviewService, DbxWebModule, DbxWebPageTitleInfoDirective, DbxWebPageTitleService, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, DbxZipBlobPreviewComponent, DbxZipPreviewComponent, PDF_MERGE_PAGE_ID_SEPARATOR, PDF_MERGE_PAGE_TAG_KEY, PDF_MERGE_RESULT_MIME_TYPE, PDF_MERGE_SIDECAR_DESCRIPTION, PDF_MERGE_SIDECAR_FILE_NAME, PDF_MERGE_SIDECAR_VERSION, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SIDE_NAV_DISPLAY_MODE_ORDER, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, UNKNOWN_ERROR_WIDGET_CODE, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, asPdfMergeFile, attachPdfMergeSidecar, buildPdfMergeEntriesFromSidecar, buildPdfMergeEntry, buildPdfMergeEntrySync, buildPdfMergePagePlan, catchErrorServerParams, classifyPdfMergeFile, compactModeFromInput, compareScreenMediaWidthTypes, compressImageFile, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, copyToClipboardFunction, dbxColorBackground, dbxCuratedColorConfigForString, dbxListAccordionViewComponentImportsAndExports, dbxListGridViewComponentImportsAndExports, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxStyleClassCleanSuffix, dbxThemeColorCssToken, dbxThemeColorCssTokenVar, dbxThemeColorCssVariable, dbxThemeColorCssVariableVar, dbxValueListItemDecisionFunction, dbxValueListItemKeyForItemValue, dbxWebDefaultPageTitleDelegate, dbxZipBlobPreviewEntryTreeFromEntries, defaultDbxModelViewTrackerStorageAccessorFactory, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, entryIdForPdfMergePageId, fileAcceptFilterTypeStringArray, fileAcceptFunction, fileAcceptString, fileArrayAcceptMatchFunction, fileArrayAcceptMaxFiles, flattenAccordionGroups, formatPdfMergeEntrySize, index as fromDbxModel, injectCopyToClipboardFunction, injectCopyToClipboardFunctionWithSnackbarMessage, isDbxColorConfig, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, makePdfMergePageId, makePdfMergeSidecar, makePdfMergeSidecarPageTag, mapCompactModeObs, mapValuesToValuesListItemConfigObs, mergePdfMergeEntries, index$1 as onDbxModel, openEmbedDialog, openIframeDialog, openPdfPreviewDialog, openZipPreviewDialog, overrideClickElementEffect, pdfMergeEntriesUseEncryptedPassthrough, pdfMergePageGroupKeyForSlotId, provideDbxDetachController, provideDbxFileUploadActionCompatable, provideDbxHelpServices, provideDbxLinkify, provideDbxListView, provideDbxListViewWrapper, provideDbxModelService, provideDbxPdfMergeEditorConfig, provideDbxPdfMergeEditorPreserveEntriesOnSlotDestroy, provideDbxProgressButtonGlobalConfig, provideDbxPromptConfirm, provideDbxRouterWebAngularRouterProviderConfig, provideDbxRouterWebUiRouterProviderConfig, provideDbxScreenMediaService, provideDbxStyleService, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideDbxWebFilePreviewServiceEntries, provideDbxWebPageTitleService, provideTwoColumnsContext, readPdfMergeEntryPageMetas, readPdfMergePageTag, readPdfMergeSidecar, registerHelpContextKeysWithDbxHelpContextService, resizeSignal, resolveSideNavDisplayMode, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, splitPdfMergeSidecarDocuments, trackByModelKeyRef, trackByUniqueIdentifier, validatePdfMergeEntry, writePdfMergePageTag };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map