@dereekb/dbx-web 1.1.0 → 2.1.0

package/fesm2020/dereekb-dbx-web.mjs

@@ -1,24 +1,29 @@
-import * as i3$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { filterMaybe, LoadingStateType, loadingStateType, skipFirstMaybe, initialize, asObservable, SubscriptionObject, ListLoadingStateContextInstance, loadingStateHasFinishedLoading, beginLoading, getter, LoadingStateContextInstance, switchMapMaybeObs, LockSet } from '@dereekb/rxjs';
+import { Subject, BehaviorSubject, of, switchMap, startWith, shareReplay, distinctUntilChanged, first, combineLatest, map as map$1, delay, throttleTime, filter as filter$1, merge, exhaustMap, catchError, from, race } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Directive, Optional, Inject, Input, InjectionToken, Injectable, NgModule, Component, TemplateRef, ViewChild, ChangeDetectionStrategy, ElementRef, EventEmitter, Output, HostListener, Host, forwardRef } from '@angular/core';
-import * as i1$1 from '@angular/material/dialog';
+import { Component, Input, Directive, Inject, InjectionToken, Injectable, Optional, Host, NgModule, TemplateRef, ViewChild, ChangeDetectionStrategy, ElementRef, EventEmitter, Output, HostListener, forwardRef } from '@angular/core';
+import * as i1$1 from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
+import { map, filter, shareReplay as shareReplay$1, distinctUntilChanged as distinctUntilChanged$1, distinct, catchError as catchError$1, delay as delay$1, first as first$1, startWith as startWith$1, throttleTime as throttleTime$1, mergeMap, tap } from 'rxjs/operators';
+import * as i1$2 from '@dereekb/dbx-core';
+import { AbstractDbxButtonDirective, ProvideDbxButton, AbstractSubscriptionDirective, DbxCoreButtonModule, AbstractTransitionWatcherDirective, AbstractDbxActionValueOnTriggerDirective, safeDetectChanges, AbstractDbxAnchorDirective, DbxInjectedComponentModule, expandClickableAnchorLinkTrees, AbstractTransitionDirective, tapDetectChanges, checkNgContentWrapperHasContent, anchorTypeForAnchor, AnchorType, DbxCoreActionModule, DbxCoreFilterModule, isIdleActionState, canTriggerAction } from '@dereekb/dbx-core';
+import ms from 'ms';
+import * as i1 from 'mat-progress-buttons';
+import { MatProgressButtonsModule } from 'mat-progress-buttons';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { getValueFromObjectOrGetter, mergeObjects, splitCommaSeparatedStringToSet, applyBestFit, convertToReadableError, ServerErrorResponse, UnauthorizedServerErrorResponse } from '@dereekb/util';
+import * as i1$3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
-import * as i1 from '@dereekb/dbx-core';
-import { AbstractTransitionWatcherDirective, AbstractSubscriptionDirective, safeDetectChanges, AbstractDbxAnchorDirective, DbxInjectedComponentModule, expandClickableAnchorLinkTrees, AbstractTransitionDirective, tapDetectChanges, AbstractDbxButtonDirective, ProvideDbxButton, checkNgContentWrapperHasContent, anchorTypeForAnchor, AnchorType, DbxActionButtonDirective, ActionState, DbxCoreActionModule, DbxCoreFilterModule, isIdleActionState, canTriggerAction } from '@dereekb/dbx-core';
-import { splitCommaSeparatedStringToSet, applyBestFit, convertToReadableError, ServerErrorResponse, UnauthorizedServerErrorResponse } from '@dereekb/util';
-import { BehaviorSubject, switchMap, distinctUntilChanged, shareReplay, combineLatest, map, delay, Subject, throttleTime, first, of, startWith, filter, merge, exhaustMap, catchError, from, race } from 'rxjs';
-import { filterMaybe, skipFirstMaybe, initialize, asObservable, SubscriptionObject, ListLoadingStateContextInstance, loadingStateHasFinishedLoading, beginLoading, getter, switchMapMaybeObs, LockSet } from '@dereekb/rxjs';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$a from 'ng-overlay-container';
+import * as i1$b from 'ng-overlay-container';
 import { NgOverlayContainerService, NgOverlayContainerModule } from 'ng-overlay-container';
-import { shareReplay as shareReplay$1, map as map$1, distinctUntilChanged as distinctUntilChanged$1, distinct, catchError as catchError$1, delay as delay$1, first as first$1, startWith as startWith$1, filter as filter$1, throttleTime as throttleTime$1, switchMap as switchMap$1, mergeMap, tap } from 'rxjs/operators';
-import * as i1$2 from '@angular/material/toolbar';
+import * as i1$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i3 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$3 from '@angular/material/list';
+import * as i1$5 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i7 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -28,18 +33,16 @@ import * as i4 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i6 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
-import * as i1$4 from '@angular/cdk/layout';
+import * as i1$6 from '@angular/cdk/layout';
 import * as i3$2 from '@angular/material/sidenav';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import * as i2$1 from '@uirouter/angular';
 import { UIRouterModule } from '@uirouter/angular';
-import * as i1$5 from 'mat-progress-buttons';
-import { MatProgressButtonsModule } from 'mat-progress-buttons';
-import * as i1$6 from 'angular-resize-event';
+import * as i1$7 from 'angular-resize-event';
 import { AngularResizeEventModule } from 'angular-resize-event';
 import { ComponentStore } from '@ngrx/component-store';
 import { isBoolean } from 'class-validator';
-import * as i1$7 from '@angular/material/progress-bar';
+import * as i1$8 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i2$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -47,20 +50,528 @@ import * as i3$3 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { HttpErrorResponse } from '@angular/common/http';
 import linkifyStr from 'linkify-string';
-import * as i1$8 from '@angular/platform-browser';
-import * as i1$9 from '@angular/material/chips';
+import * as i1$9 from '@angular/platform-browser';
+import * as i1$a from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i3$4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$b from '@angular/cdk/overlay';
+import * as i1$c from '@angular/cdk/overlay';
 import { GlobalPositionStrategy } from '@angular/cdk/overlay';
-import * as i1$c from '@angular/material/snack-bar';
-import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
-import ms from 'ms';
 import * as i3$5 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i2$3 from '@uirouter/core';
 
+var DbxButtonDisplayType;
+(function (DbxButtonDisplayType) {
+    DbxButtonDisplayType[DbxButtonDisplayType["RAISED"] = 0] = "RAISED";
+    DbxButtonDisplayType[DbxButtonDisplayType["STROKED"] = 1] = "STROKED";
+    DbxButtonDisplayType[DbxButtonDisplayType["FLAT"] = 2] = "FLAT";
+})(DbxButtonDisplayType || (DbxButtonDisplayType = {}));
+/**
+ * Complex button that supports loading states.
+ */
+class DbxButtonComponent extends AbstractDbxButtonDirective {
+    constructor() {
+        super(...arguments);
+        this.color = 'primary';
+    }
+    get raised() {
+        return this.type === DbxButtonDisplayType.RAISED;
+    }
+    set raised(raised) {
+        if (raised) {
+            this.type = DbxButtonDisplayType.RAISED;
+        }
+    }
+    get stroked() {
+        return this.type === DbxButtonDisplayType.STROKED;
+    }
+    set stroked(stroked) {
+        if (stroked) {
+            this.type = DbxButtonDisplayType.STROKED;
+        }
+    }
+    get flat() {
+        return this.type === DbxButtonDisplayType.FLAT;
+    }
+    set flat(flat) {
+        if (flat) {
+            this.type = DbxButtonDisplayType.FLAT;
+        }
+    }
+    get btnOptions() {
+        const buttonIcon = (this.icon) ? {
+            fontIcon: this.icon
+        } : undefined;
+        return {
+            fab: false,
+            active: this.working,
+            buttonIcon,
+            customClass: 'dbx-button ' + ((buttonIcon && !this.text) ? 'dbx-button-no-text' : ''),
+            // buttonIcon: icon,
+            text: this.text ?? '',
+            buttonColor: this.color,
+            barColor: 'accent',
+            raised: this.raised,
+            stroked: this.stroked,
+            flat: this.flat,
+            mode: 'indeterminate',
+            spinnerSize: 18,
+            spinnerColor: 'accent',
+            // Only disabled if we're not working, in order to show the animation.
+            disabled: !this.working && this.disabled
+        };
+    }
+}
+DbxButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxButtonComponent, selector: "dbx-button", inputs: { type: "type", raised: "raised", stroked: "stroked", flat: "flat", color: "color" }, providers: ProvideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
+    <mat-spinner-button class="page-button" (btnClick)="clickButton()" [options]="btnOptions"></mat-spinner-button>
+  `, isInline: true, components: [{ type: i1.MatSpinnerButtonComponent, selector: "mat-spinner-button", inputs: ["options", "buttonId", "active", "disabled"], outputs: ["btnClick"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-button',
+                    template: `
+    <mat-spinner-button class="page-button" (btnClick)="clickButton()" [options]="btnOptions"></mat-spinner-button>
+  `,
+                    providers: ProvideDbxButton(DbxButtonComponent)
+                }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], raised: [{
+                type: Input
+            }], stroked: [{
+                type: Input
+            }], flat: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class DbxSpacerDirective {
+}
+DbxSpacerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DbxSpacerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxSpacerDirective, selector: "dbx-spacer, [dbx-spacer]", host: { classAttribute: "dbx-spacer" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSpacerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dbx-spacer, [dbx-spacer]',
+                    host: {
+                        'class': 'dbx-spacer'
+                    }
+                }]
+        }] });
+
+/**
+ * Button spacer directive.
+ */
+class DbxButtonSpacerDirective {
+}
+DbxButtonSpacerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DbxButtonSpacerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,dbxButtonSpacer", host: { classAttribute: "dbx-button-spacer d-inline" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonSpacerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dbx-button-spacer,dbxButtonSpacer',
+                    host: {
+                        class: 'dbx-button-spacer d-inline'
+                    }
+                }]
+        }] });
+
+/**
+ * Component for a snackbar that contains an action.
+ */
+class DbxActionSnackbarComponent extends AbstractSubscriptionDirective {
+    constructor(snackbar, data) {
+        super();
+        this.snackbar = snackbar;
+        this.data = data;
+        this._durationTimeout = new Subject();
+        this._actionRef = new BehaviorSubject(undefined);
+        this.value$ = of(0); // value passed to the action.
+        this.sourceInstance$ = this._actionRef.pipe(filterMaybe(), map(x => x?.sourceInstance));
+        this.complete$ = this.sourceInstance$.pipe(switchMap(x => x.isSuccess$), startWith(false), shareReplay(1));
+        this.loadingStateType$ = this.sourceInstance$.pipe(switchMap(x => x.loadingStateType$), startWith(LoadingStateType.IDLE), shareReplay(1));
+        this.snackbarStatusClass$ = this.loadingStateType$.pipe(map((x) => {
+            let classes = 'dbx-action-snackbar-';
+            switch (x) {
+                case LoadingStateType.ERROR:
+                    classes += 'error';
+                    break;
+                case LoadingStateType.SUCCESS:
+                    classes += 'success';
+                    break;
+                default:
+                    classes += 'idle';
+                    break;
+            }
+            return classes;
+        }), distinctUntilChanged(), shareReplay(1));
+        this.dismissAfterActionCompletes = () => {
+            this.snackbar._dismissAfter(ms('3s'));
+        };
+        this.dismiss = () => {
+            this.snackbar.dismiss();
+        };
+        this.button = this.data.action?.button ?? this.data.button;
+        this._actionRef.next(this.data.action?.reference);
+    }
+    get action() {
+        return this.data.action;
+    }
+    get hasAction() {
+        return Boolean(this._actionRef.value);
+    }
+    get message() {
+        return this.data.message;
+    }
+    get actionConfig() {
+        return this.data.action;
+    }
+    ngOnInit() {
+        // Subscribe and close if the duration is up and the action state is idle.
+        this.sub = this._durationTimeout.pipe(switchMap((x) => this.loadingStateType$), filter(x => x === LoadingStateType.IDLE)).subscribe(() => {
+            this.dismiss();
+        });
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._actionRef.value?.destroy();
+        this._actionRef.complete();
+        this._durationTimeout.complete();
+    }
+    ngAfterViewInit() {
+        // Responsible for hiding itself if it has an action.
+        if (this.hasAction) {
+            setTimeout(() => {
+                this._durationTimeout.next();
+            }, this.action?.duration ?? ms('10s'));
+        }
+    }
+}
+DbxActionSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarComponent, deps: [{ token: i1$1.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
+DbxActionSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionSnackbarComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"(snackbarStatusClass$ | async)!\">\n  <ng-container [ngSwitch]=\"complete$ | async\">\n    <ng-container *ngSwitchCase=\"true\">\n      <dbx-spacer></dbx-spacer>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"false\">\n      <span>{{ message }}</span>\n      <dbx-spacer></dbx-spacer>\n      <ng-container *ngIf=\"hasAction\">\n        <dbx-action [dbxActionValueStream]=\"value$\" [dbxActionSource]=\"sourceInstance$ | async\"\n          [dbxActionSuccess]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      </ng-container>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    </ng-container>\n  </ng-container>\n</div>\n", components: [{ type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: DbxSpacerDirective, selector: "dbx-spacer, [dbx-spacer]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { type: i1$2.dbxActionValueStreamDirective, selector: "[dbxActionValueStream]", inputs: ["dbxActionValueStream", "dbxActionValueStreamIsNotEmpty", "dbxActionValueStreamModified"] }, { type: i1$2.DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { type: i1$2.DbxActionSuccessDirective, selector: "[dbxActionSuccess]", inputs: ["dbxActionSuccess"] }, { type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,dbxButtonSpacer" }], pipes: { "async": i3.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarComponent, decorators: [{
+            type: Component,
+            args: [{ template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"(snackbarStatusClass$ | async)!\">\n  <ng-container [ngSwitch]=\"complete$ | async\">\n    <ng-container *ngSwitchCase=\"true\">\n      <dbx-spacer></dbx-spacer>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"false\">\n      <span>{{ message }}</span>\n      <dbx-spacer></dbx-spacer>\n      <ng-container *ngIf=\"hasAction\">\n        <dbx-action [dbxActionValueStream]=\"value$\" [dbxActionSource]=\"sourceInstance$ | async\"\n          [dbxActionSuccess]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      </ng-container>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatSnackBarRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }]; } });
+
+const DBX_ACTION_SNACKBAR_DEFAULTS = {
+    'create': {
+        loading: {
+            message: 'Creating...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Created'
+        },
+        error: {
+            button: 'X',
+            message: 'Create Failed'
+        }
+    },
+    'save': {
+        loading: {
+            message: 'Saving...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Saved'
+        },
+        error: {
+            button: 'X',
+            message: 'Save Failed'
+        }
+    },
+    'merge': {
+        loading: {
+            message: 'Merging...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Merged'
+        },
+        error: {
+            button: 'X',
+            message: 'Merge Failed'
+        }
+    },
+    'delete': {
+        loading: {
+            message: 'Deleting...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Deleted'
+        },
+        error: {
+            button: 'X',
+            message: 'Delete Failed'
+        }
+    },
+    'cancel': {
+        loading: {
+            message: 'Cancelling...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Canceled'
+        },
+        error: {
+            button: 'X',
+            message: 'Cancel Failed'
+        }
+    },
+    'restore': {
+        loading: {
+            message: 'Restoring...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Restored'
+        },
+        error: {
+            button: 'X',
+            message: 'Restore Failed'
+        }
+    },
+    'refresh': {
+        loading: {
+            message: 'Refreshing...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Refreshed'
+        },
+        error: {
+            button: 'X',
+            message: 'Refresh Failed'
+        }
+    },
+    'do': {
+        loading: {
+            message: 'Doing...'
+        },
+        success: {
+            button: 'Ok',
+            message: 'Done'
+        },
+        error: {
+            button: 'X',
+            message: 'Failed'
+        }
+    }
+};
+
+/**
+ * Creates a DbxActionSnackbarDisplayConfigGeneratorFunction from the input config.
+ *
+ * @param config
+ * @returns
+ */
+function makeDbxActionSnackbarDisplayConfigGeneratorFunction(config) {
+    return (input) => {
+        const { event, undo: undoInput } = input;
+        const type = event.type;
+        const eventConfigObjectOrGetter = config[type];
+        const eventConfig = eventConfigObjectOrGetter && getValueFromObjectOrGetter(eventConfigObjectOrGetter);
+        let result;
+        if (eventConfig) {
+            const { undoButtonText } = eventConfig;
+            result = {
+                button: eventConfig.button,
+                message: eventConfig.message,
+                snackbar: eventConfig.snackbar
+            };
+            if (undoInput) {
+                let reference;
+                if (typeof undoInput === 'object') {
+                    reference = undoInput.getUndoAction();
+                }
+                else {
+                    reference = getValueFromObjectOrGetter(undoInput);
+                }
+                if (!reference) {
+                    console.error('Expected action source reference was not provided to undo...');
+                }
+                else {
+                    result.action = {
+                        button: undoButtonText ?? 'Undo',
+                        reference
+                    };
+                }
+            }
+        }
+        return result;
+    };
+}
+
+const DBX_ACTION_SNACKBAR_SERVICE_CONFIG = new InjectionToken('DbxActionSnackbarServiceConfig');
+const DEFAULT_SNACKBAR_DIRECTIVE_DURATION = ms('4s');
+/**
+ * Used for managing/configuring the snackbar default values and pushing snackbar events.
+ */
+class DbxActionSnackbarService {
+    constructor(matSnackBar, inputConfig) {
+        this.matSnackBar = matSnackBar;
+        inputConfig = inputConfig ?? {};
+        this.config = {
+            ...inputConfig,
+            componentClass: inputConfig.componentClass ?? DbxActionSnackbarComponent,
+            defaultDuration: inputConfig.defaultDuration || DEFAULT_SNACKBAR_DIRECTIVE_DURATION,
+            eventTypeConfigs: mergeObjects([DBX_ACTION_SNACKBAR_DEFAULTS, inputConfig.eventTypeConfigs])
+        };
+    }
+    get componentClass() {
+        return this.config.componentClass;
+    }
+    get eventTypeConfigs() {
+        return this.config.eventTypeConfigs;
+    }
+    /**
+     * Opens a new snackbar given the input configuration.
+     *
+     * @param config
+     * @returns
+     */
+    openSnackbar(config) {
+        const { snackbar: inputSnackbarConfig } = config;
+        const { snackbar: defaultSnackbarConfig, defaultDuration } = this.config;
+        const matSnackbarConfig = {
+            ...defaultSnackbarConfig,
+            ...inputSnackbarConfig,
+            data: config
+        };
+        const duration = config.action?.duration ?? matSnackbarConfig.duration ?? defaultDuration ?? DEFAULT_SNACKBAR_DIRECTIVE_DURATION;
+        if (config.action) {
+            // Set the duration on the action
+            config.action = {
+                ...config.action,
+                duration
+            };
+        }
+        else {
+            // The snackbar does not close here. The duration is passed to the component and it will close it.
+            matSnackbarConfig.duration = duration;
+        }
+        return this.matSnackBar.openFromComponent(this.componentClass, matSnackbarConfig);
+    }
+    generateDisplayConfig(type, input) {
+        const configForType = this.eventTypeConfigs[type ?? 'none'];
+        let result;
+        if (configForType) {
+            result = makeDbxActionSnackbarDisplayConfigGeneratorFunction(configForType)(input);
+        }
+        return result;
+    }
+}
+DbxActionSnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarService, deps: [{ token: i1$1.MatSnackBar }, { token: DBX_ACTION_SNACKBAR_SERVICE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxActionSnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatSnackBar }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DBX_ACTION_SNACKBAR_SERVICE_CONFIG]
+                }] }]; } });
+
+/**
+ * Action directive that displays a snackbar when the action context hits a certain state.
+ */
+class DbxActionSnackbarDirective extends AbstractSubscriptionDirective {
+    constructor(source, dbxActionSnackbarService) {
+        super();
+        this.source = source;
+        this.dbxActionSnackbarService = dbxActionSnackbarService;
+    }
+    get snackbarFunction() {
+        return this._snackbarFunction;
+    }
+    set snackbarFunction(snackbarFunction) {
+        if (snackbarFunction) {
+            this._snackbarFunction = snackbarFunction;
+        }
+    }
+    ngOnInit() {
+        this.sub = this.source.pipeStore((store) => store.loadingState$).subscribe((loadingState) => {
+            const event = { value: loadingState.value, error: loadingState.error, type: loadingStateType(loadingState) };
+            const config = this.buildConfigurationForEvent(event);
+            if (config) {
+                this.showSnackbarForConfiguration(config, event);
+            }
+        });
+    }
+    buildConfigurationForEvent(event) {
+        const input = {
+            event,
+            undo: event.type === LoadingStateType.SUCCESS ? this.dbxActionSnackbarUndo : undefined // only show undo on success.
+        };
+        return (this.snackbarFunction) ? this.snackbarFunction(input) : this.dbxActionSnackbarService.generateDisplayConfig(this.dbxActionSnackbarDefault, input);
+    }
+    showSnackbarForConfiguration(config, event) {
+        this.dbxActionSnackbarService.openSnackbar(config);
+    }
+}
+DbxActionSnackbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarDirective, deps: [{ token: i1$2.DbxActionContextStoreSourceInstance, host: true }, { token: DbxActionSnackbarService }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionSnackbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionSnackbarDirective, selector: "[dbxActionSnackbar]", inputs: { snackbarFunction: ["dbxActionSnackbar", "snackbarFunction"], dbxActionSnackbarDefault: "dbxActionSnackbarDefault", dbxActionSnackbarUndo: "dbxActionSnackbarUndo" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxActionSnackbar]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DbxActionContextStoreSourceInstance, decorators: [{
+                    type: Host
+                }] }, { type: DbxActionSnackbarService }]; }, propDecorators: { snackbarFunction: [{
+                type: Input,
+                args: ['dbxActionSnackbar']
+            }], dbxActionSnackbarDefault: [{
+                type: Input
+            }], dbxActionSnackbarUndo: [{
+                type: Input
+            }] } });
+
+class DbxButtonModule {
+}
+DbxButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, declarations: [DbxButtonComponent,
+        DbxButtonSpacerDirective], imports: [CommonModule,
+        MatProgressButtonsModule], exports: [DbxCoreButtonModule,
+        MatProgressButtonsModule,
+        DbxButtonComponent,
+        DbxButtonSpacerDirective] });
+DbxButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, imports: [[
+            CommonModule,
+            MatProgressButtonsModule
+        ], DbxCoreButtonModule,
+        MatProgressButtonsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatProgressButtonsModule
+                    ],
+                    declarations: [
+                        DbxButtonComponent,
+                        DbxButtonSpacerDirective
+                    ],
+                    exports: [
+                        DbxCoreButtonModule,
+                        MatProgressButtonsModule,
+                        DbxButtonComponent,
+                        DbxButtonSpacerDirective
+                    ],
+                }]
+        }] });
+
 /**
  * Abstract dialog component that closes when a transition is successful.
  */
@@ -73,11 +584,14 @@ class AbstractDialogDirective extends AbstractTransitionWatcherDirective {
     updateForSuccessfulTransition() {
         this.close();
     }
+    returnValue(value) {
+        this.close(value);
+    }
     close(value) {
         this.dialogRef.close(value);
     }
 }
-AbstractDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDialogDirective, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MatDialogRef }, { token: i1.DbxRouterTransitionService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDialogDirective, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MatDialogRef }, { token: i1$2.DbxRouterTransitionService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 AbstractDialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractDialogDirective, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractDialogDirective, decorators: [{
             type: Directive
@@ -86,10 +600,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$1.MatDialogRef, decorators: [{
+                }] }, { type: i1$3.MatDialogRef, decorators: [{
                     type: Inject,
                     args: [MatDialogRef]
-                }] }, { type: i1.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
+                }] }, { type: i1$2.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
 
 /**
  * Component used to style a dialog.
@@ -114,6 +628,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Action directive that is used to trigger/display a dialog, then watches that dialog for a value.
+ */
+class DbxActionDialogDirective extends AbstractDbxActionValueOnTriggerDirective {
+    constructor(elementRef, source) {
+        super(source, () => this._getDataFromDialog());
+        this.elementRef = elementRef;
+    }
+    set dbxActionDialogModified(isModifiedFunction) {
+        this.isModifiedFunction = isModifiedFunction;
+    }
+    _getDataFromDialog() {
+        return this._makeDialogRef().afterClosed().pipe(first());
+    }
+    _makeDialogRef() {
+        if (!this.fn) {
+            throw new Error('dbxActionDialog has no dialog function provided to it.');
+        }
+        return this.fn();
+    }
+}
+DbxActionDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionDialogDirective, deps: [{ token: i0.ElementRef }, { token: i1$2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionDialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionDialogDirective, selector: "[dbxActionDialog]", inputs: { fn: ["dbxActionDialog", "fn"], dbxActionDialogModified: "dbxActionDialogModified" }, exportAs: ["dbxActionDialog"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionDialogDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'dbxActionDialog',
+                    selector: '[dbxActionDialog]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.DbxActionContextStoreSourceInstance }]; }, propDecorators: { fn: [{
+                type: Input,
+                args: ['dbxActionDialog']
+            }], dbxActionDialogModified: [{
+                type: Input
+            }] } });
+
 const DBX_STYLE_DEFAULT_CONFIG_TOKEN = new InjectionToken('DbxStyleServiceDefaultConfig');
 /**
  * Used for managing styles within an app.
@@ -142,7 +692,7 @@ class DbxStyleService {
         this._suffix.next(suffix);
     }
     getStyleWithConfig(configObs) {
-        return combineLatest([configObs, this.suffix$]).pipe(map(([config, suffix]) => {
+        return combineLatest([configObs, this.suffix$]).pipe(map$1(([config, suffix]) => {
             let style = config.style;
             if (suffix != null && config.suffixes) {
                 const sanitizedSuffix = ((suffix[0] === '-') ? suffix?.slice(1) : suffix);
@@ -199,8 +749,8 @@ class DbxSetStyleDirective extends AbstractSubscriptionDirective {
         this._suffixes = new BehaviorSubject(undefined);
         this._style = new BehaviorSubject(undefined);
         this.style$ = this._style.pipe(filterMaybe());
-        this.suffixes$ = this._suffixes.pipe(distinctUntilChanged(), map(splitCommaSeparatedStringToSet));
-        this.config$ = combineLatest([this.style$, this.suffixes$]).pipe(map(([style, suffixes]) => ({ style, suffixes })), shareReplay(1));
+        this.suffixes$ = this._suffixes.pipe(distinctUntilChanged(), map$1(splitCommaSeparatedStringToSet));
+        this.config$ = combineLatest([this.style$, this.suffixes$]).pipe(map$1(([style, suffixes]) => ({ style, suffixes })), shareReplay(1));
         this.outputStyle$ = this.styleService.getStyleWithConfig(this.config$);
         this.outputStyle = '';
     }
@@ -272,20 +822,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: DbxStyleService }, { type: i0.ChangeDetectorRef }]; } });
 
-class DbxSpacerDirective {
-}
-DbxSpacerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-DbxSpacerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxSpacerDirective, selector: "dbx-spacer, [dbx-spacer]", host: { classAttribute: "dbx-spacer" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSpacerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'dbx-spacer, [dbx-spacer]',
-                    host: {
-                        'class': 'dbx-spacer'
-                    }
-                }]
-        }] });
-
 /**
  * Used to style the body document using the style provided by DbxStyleService.
  */
@@ -355,8 +891,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxDialogInteractionModule {
 }
 DbxDialogInteractionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDialogInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxDialogInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDialogInteractionModule, declarations: [DbxDialogContentDirective], imports: [CommonModule,
-        DbxStyleLayoutModule], exports: [DbxDialogContentDirective] });
+DbxDialogInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDialogInteractionModule, declarations: [DbxDialogContentDirective,
+        DbxActionDialogDirective], imports: [CommonModule,
+        DbxStyleLayoutModule], exports: [DbxDialogContentDirective,
+        DbxActionDialogDirective] });
 DbxDialogInteractionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxDialogInteractionModule, imports: [[
             CommonModule,
             DbxStyleLayoutModule
@@ -370,9 +908,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                     ],
                     declarations: [
                         DbxDialogContentDirective,
+                        DbxActionDialogDirective
                     ],
                     exports: [
-                        DbxDialogContentDirective
+                        DbxDialogContentDirective,
+                        DbxActionDialogDirective
                     ]
                 }]
         }] });
@@ -471,7 +1011,7 @@ DbxBarHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       <mat-icon class="button-spacer" *ngIf="icon">{{ icon }}</mat-icon>
       <span *ngIf="text">{{ text }}</span>
     </dbx-bar>
-    `, isInline: true, components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: DbxBarDirective, selector: "dbx-bar", inputs: ["color"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: DbxBarDirective, selector: "dbx-bar", inputs: ["color"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxBarHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -497,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxPagebarComponent {
 }
 DbxPagebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPagebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxPagebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxPagebarComponent, selector: "dbx-pagebar", inputs: { color: "color" }, ngImport: i0, template: "<mat-toolbar class=\"dbx-pagebar\" [ngClass]=\"(color) ? ('dbx-bar-' + color) : ''\">\n  <ng-content select=\"[left]\"></ng-content>\n  <span class=\"spacer\"></span>\n  <ng-content select=\"[right]\"></ng-content>\n</mat-toolbar>\n", components: [{ type: i1$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+DbxPagebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxPagebarComponent, selector: "dbx-pagebar", inputs: { color: "color" }, ngImport: i0, template: "<mat-toolbar class=\"dbx-pagebar\" [ngClass]=\"(color) ? ('dbx-bar-' + color) : ''\">\n  <ng-content select=\"[left]\"></ng-content>\n  <span class=\"spacer\"></span>\n  <ng-content select=\"[right]\"></ng-content>\n</mat-toolbar>\n", components: [{ type: i1$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPagebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-pagebar', template: "<mat-toolbar class=\"dbx-pagebar\" [ngClass]=\"(color) ? ('dbx-bar-' + color) : ''\">\n  <ng-content select=\"[left]\"></ng-content>\n  <span class=\"spacer\"></span>\n  <ng-content select=\"[right]\"></ng-content>\n</mat-toolbar>\n" }]
@@ -556,8 +1096,8 @@ class DbxAnchorComponent extends AbstractDbxAnchorDirective {
         this.dbNgxRouterWebProviderConfig = dbNgxRouterWebProviderConfig;
         this._templateRef = new BehaviorSubject(undefined);
         this.templateRef$ = this._templateRef.pipe(skipFirstMaybe(), shareReplay$1(1));
-        this.url$ = this.anchor$.pipe(map$1(x => x?.url), distinctUntilChanged$1(), shareReplay$1(1));
-        this.target$ = this.anchor$.pipe(map$1(x => x?.target), distinctUntilChanged$1(), shareReplay$1(1));
+        this.url$ = this.anchor$.pipe(map(x => x?.url), distinctUntilChanged$1(), shareReplay$1(1));
+        this.target$ = this.anchor$.pipe(map(x => x?.target), distinctUntilChanged$1(), shareReplay$1(1));
     }
     get templateRef() {
         return this._templateRef.value;
@@ -573,7 +1113,7 @@ class DbxAnchorComponent extends AbstractDbxAnchorDirective {
     }
 }
 DbxAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorComponent, deps: [{ token: DbxRouterWebProviderConfig }], target: i0.ɵɵFactoryTarget.Component });
-DbxAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: { block: "block" }, host: { attributes: { "dbx-anchor-block": "block" }, classAttribute: "d-inline dbx-anchor" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"(type$ | async)\">\n  <!-- Plain -->\n  <ng-container *ngSwitchCase=\"0\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <!-- Click -->\n  <a class=\"dbx-anchor-a dbx-anchor-click\" (click)=\"clickAnchor()\" *ngSwitchCase=\"1\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Router -->\n  <dbx-injected-content [config]=\"srefAnchorConfig\" *ngSwitchCase=\"2\">\n    <!-- Injected in child. -->\n  </dbx-injected-content>\n  <!-- Href -->\n  <a class=\"dbx-anchor-a dbx-anchor-href\" [href]=\"url$ | async\" [attr.target]=\"target$ | async\"\n    *ngSwitchCase=\"3\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Disabled or None -->\n  <a class=\"dbx-anchor-a dbx-anchor-disabled\" *ngSwitchDefault>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-container>\n<!-- Template content -->\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", components: [{ type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3$1.AsyncPipe } });
+DbxAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: { block: "block" }, host: { attributes: { "dbx-anchor-block": "block" }, classAttribute: "d-inline dbx-anchor" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"(type$ | async)\">\n  <!-- Plain -->\n  <ng-container *ngSwitchCase=\"0\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <!-- Click -->\n  <a class=\"dbx-anchor-a dbx-anchor-click\" (click)=\"clickAnchor()\" *ngSwitchCase=\"1\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Router -->\n  <dbx-injected-content [config]=\"srefAnchorConfig\" *ngSwitchCase=\"2\">\n    <!-- Injected in child. -->\n  </dbx-injected-content>\n  <!-- Href -->\n  <a class=\"dbx-anchor-a dbx-anchor-href\" [href]=\"url$ | async\" [attr.target]=\"target$ | async\"\n    *ngSwitchCase=\"3\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Disabled or None -->\n  <a class=\"dbx-anchor-a dbx-anchor-disabled\" *ngSwitchDefault>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-container>\n<!-- Template content -->\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", components: [{ type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-anchor, [dbx-anchor]', host: {
@@ -597,7 +1137,7 @@ DbxAnchorIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
   <dbx-anchor [anchor]="anchor">
     <button mat-icon-button><mat-icon>{{ anchor?.icon }}</mat-icon></button>
   </dbx-anchor>
-`, isInline: true, components: [{ type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+`, isInline: true, components: [{ type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorIconComponent, decorators: [{
             type: Component,
             args: [{
@@ -658,17 +1198,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Component that displays an anchor and a span with the title.
+ */
+class DbxAnchorContentComponent {
+    constructor(parent) {
+        this.parent = parent;
+        this._parentAnchor = (this.parent) ? this.parent.anchor$ : of(undefined);
+        this._inputAnchor = new BehaviorSubject(undefined);
+        this.anchor$ = combineLatest([this._inputAnchor, this._parentAnchor]).pipe(map$1(([input, parent]) => input ?? parent), shareReplay(1));
+        this.icon$ = this.anchor$.pipe(map$1(x => x?.icon));
+        this.title$ = this.anchor$.pipe(map$1(x => x?.title));
+    }
+    set anchor(anchor) {
+        this._inputAnchor.next(anchor);
+    }
+    ngOnDestroy() {
+        this._inputAnchor.complete();
+    }
+}
+DbxAnchorContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorContentComponent, deps: [{ token: DbxAnchorComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DbxAnchorContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxAnchorContentComponent, selector: "dbx-anchor-content", inputs: { anchor: "anchor" }, host: { classAttribute: "dbx-anchor-content" }, ngImport: i0, template: `<mat-icon class="dbx-icon-spacer" *ngIf="icon$ | async">{{ icon$ | async }}</mat-icon><span *ngIf="title$ | async">{{ title$ | async }}</span>`, isInline: true, components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-anchor-content',
+                    template: `<mat-icon class="dbx-icon-spacer" *ngIf="icon$ | async">{{ icon$ | async }}</mat-icon><span *ngIf="title$ | async">{{ title$ | async }}</span>`,
+                    host: {
+                        'class': 'dbx-anchor-content'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: DbxAnchorComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { anchor: [{
+                type: Input
+            }] } });
+
 class DbxAnchorModule {
 }
 DbxAnchorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxAnchorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorModule, declarations: [DbxAnchorComponent,
         DbxAnchorIconComponent,
-        DbxAnchorLinkComponent], imports: [CommonModule,
+        DbxAnchorLinkComponent,
+        DbxAnchorContentComponent], imports: [CommonModule,
         MatIconModule,
         MatButtonModule,
         DbxInjectedComponentModule], exports: [DbxAnchorComponent,
         DbxAnchorIconComponent,
-        DbxAnchorLinkComponent] });
+        DbxAnchorLinkComponent,
+        DbxAnchorContentComponent] });
 DbxAnchorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorModule, imports: [[
             CommonModule,
             MatIconModule,
@@ -687,12 +1265,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                     declarations: [
                         DbxAnchorComponent,
                         DbxAnchorIconComponent,
-                        DbxAnchorLinkComponent
+                        DbxAnchorLinkComponent,
+                        DbxAnchorContentComponent
                     ],
                     exports: [
                         DbxAnchorComponent,
                         DbxAnchorIconComponent,
-                        DbxAnchorLinkComponent
+                        DbxAnchorLinkComponent,
+                        DbxAnchorContentComponent
                     ]
                 }]
         }] });
@@ -704,10 +1284,10 @@ class AbstractDbxSegueAnchorDirective {
     constructor(parent) {
         this.parent = parent;
         this.target$ = this.parent.target$;
-        this.ref$ = this.parent.anchor$.pipe(map$1(x => x?.ref), distinctUntilChanged$1(), shareReplay$1(1));
-        this.refParams$ = this.parent.anchor$.pipe(map$1(x => x?.refParams), distinctUntilChanged$1(), shareReplay$1(1));
-        this.refOptions$ = this.parent.anchor$.pipe(map$1(x => x?.refOptions), distinctUntilChanged$1(), shareReplay$1(1));
-        this.template$ = this.parent.templateRef$.pipe(distinctUntilChanged$1(), map$1(templateRef => ({
+        this.ref$ = this.parent.anchor$.pipe(map(x => x?.ref), distinctUntilChanged$1(), shareReplay$1(1));
+        this.refParams$ = this.parent.anchor$.pipe(map(x => x?.refParams), distinctUntilChanged$1(), shareReplay$1(1));
+        this.refOptions$ = this.parent.anchor$.pipe(map(x => x?.refOptions), distinctUntilChanged$1(), shareReplay$1(1));
+        this.template$ = this.parent.templateRef$.pipe(distinctUntilChanged$1(), map(templateRef => ({
             templateRef
         })), shareReplay$1(1));
     }
@@ -727,7 +1307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxAnchorListComponent {
     constructor() {
         this._anchors = new BehaviorSubject([]);
-        this.expandedAnchors$ = this._anchors.pipe(distinctUntilChanged(), map(x => expandClickableAnchorLinkTrees(x)), shareReplay(1));
+        this.expandedAnchors$ = this._anchors.pipe(distinctUntilChanged(), map$1(x => expandClickableAnchorLinkTrees(x)), shareReplay(1));
     }
     set anchors(anchors) {
         this._anchors.next(anchors ?? []);
@@ -737,7 +1317,7 @@ class DbxAnchorListComponent {
     }
 }
 DbxAnchorListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxAnchorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: { anchors: "anchors" }, ngImport: i0, template: "<mat-nav-list class=\"dbx-anchor-list\">\n  <ng-container *ngFor=\"let expanded of expandedAnchors$ | async; let last = last;\">\n    <span dbx-anchor [anchor]=\"expanded.value\">\n      <a mat-list-item [ngClass]=\"(expanded.depth) ? 'dbx-anchor-list-child' : 'dbx-anchor-list-root'\">\n        <mat-icon mat-list-icon *ngIf=\"expanded.value.icon\">{{ expanded.value.icon }}</mat-icon>\n        <!-- TODO: Add an icon from a letter if anchor.icon is unavailable. -->\n        <div mat-line>{{ expanded.value.title }}</div>\n        <mat-divider *ngIf=\"!last\"></mat-divider>\n      </a>\n    </span>\n  </ng-container>\n</mat-nav-list>\n", components: [{ type: i1$3.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i6.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "async": i3$1.AsyncPipe } });
+DbxAnchorListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: { anchors: "anchors" }, ngImport: i0, template: "<mat-nav-list class=\"dbx-anchor-list\">\n  <ng-container *ngFor=\"let expanded of expandedAnchors$ | async; let last = last;\">\n    <span dbx-anchor [anchor]=\"expanded.value\">\n      <a mat-list-item [ngClass]=\"(expanded.depth) ? 'dbx-anchor-list-child' : 'dbx-anchor-list-root'\">\n        <mat-icon mat-list-icon *ngIf=\"expanded.value.icon\">{{ expanded.value.icon }}</mat-icon>\n        <!-- TODO: Add an icon from a letter if anchor.icon is unavailable. -->\n        <div mat-line>{{ expanded.value.title }}</div>\n        <mat-divider *ngIf=\"!last\"></mat-divider>\n      </a>\n    </span>\n  </ng-container>\n</mat-nav-list>\n", components: [{ type: i1$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i6.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAnchorListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-anchor-list', template: "<mat-nav-list class=\"dbx-anchor-list\">\n  <ng-container *ngFor=\"let expanded of expandedAnchors$ | async; let last = last;\">\n    <span dbx-anchor [anchor]=\"expanded.value\">\n      <a mat-list-item [ngClass]=\"(expanded.depth) ? 'dbx-anchor-list-child' : 'dbx-anchor-list-root'\">\n        <mat-icon mat-list-icon *ngIf=\"expanded.value.icon\">{{ expanded.value.icon }}</mat-icon>\n        <!-- TODO: Add an icon from a letter if anchor.icon is unavailable. -->\n        <div mat-line>{{ expanded.value.title }}</div>\n        <mat-divider *ngIf=\"!last\"></mat-divider>\n      </a>\n    </span>\n  </ng-container>\n</mat-nav-list>\n" }]
@@ -827,8 +1407,8 @@ class DbxScreenMediaService {
         this._media = _media;
         this._updateWidth = new Subject();
         this._updateHeight = new Subject();
-        this.widthType$ = this._updateWidth.pipe(initialize(() => this._updateWidth.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map(() => this._readWidthType()), distinctUntilChanged(), shareReplay(1));
-        this.heightType$ = this._updateWidth.pipe(initialize(() => this._updateHeight.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map(() => this._readHeightType()), distinctUntilChanged(), shareReplay(1));
+        this.widthType$ = this._updateWidth.pipe(initialize(() => this._updateWidth.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map$1(() => this._readWidthType()), distinctUntilChanged(), shareReplay(1));
+        this.heightType$ = this._updateWidth.pipe(initialize(() => this._updateHeight.next()), throttleTime(100, undefined, { leading: true, trailing: true }), map$1(() => this._readHeightType()), distinctUntilChanged(), shareReplay(1));
         const { microScreenWidthMax, smallScreenWidthMax, tabletScreenWidthMax, largeScreenWidthMax } = config;
         this._microQuery = this._media.matchMedia(`screen and (max-width:${microScreenWidthMax}px)`);
         this._smallQuery = this._media.matchMedia(`screen and (max-width:${smallScreenWidthMax}px)`);
@@ -858,7 +1438,7 @@ class DbxScreenMediaService {
      * @returns
      */
     isBreakpointActive(inputBreakpoint) {
-        return combineLatest([this.widthType$, asObservable(inputBreakpoint)]).pipe(map(([current, breakpoint]) => screenMediaWidthTypeIsActive(current, breakpoint)), distinctUntilChanged(), shareReplay(1));
+        return combineLatest([this.widthType$, asObservable(inputBreakpoint)]).pipe(map$1(([current, breakpoint]) => screenMediaWidthTypeIsActive(current, breakpoint)), distinctUntilChanged(), shareReplay(1));
     }
     _readWidthType() {
         let width;
@@ -888,11 +1468,11 @@ class DbxScreenMediaService {
         }
     }
 }
-DbxScreenMediaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxScreenMediaService, deps: [{ token: i1$4.MediaMatcher }, { token: DbxScreenMediaServiceConfig }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxScreenMediaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxScreenMediaService, deps: [{ token: i1$6.MediaMatcher }, { token: DbxScreenMediaServiceConfig }], target: i0.ɵɵFactoryTarget.Injectable });
 DbxScreenMediaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxScreenMediaService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxScreenMediaService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$4.MediaMatcher }, { type: DbxScreenMediaServiceConfig }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.MediaMatcher }, { type: DbxScreenMediaServiceConfig }]; } });
 
 /**
  * Component that displays a navbar.
@@ -908,10 +1488,10 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
         this._breakpoint = new BehaviorSubject('large');
         this._anchors = new BehaviorSubject([]);
         this.isBreakpointActive$ = this._dbxScreenMediaService.isBreakpointActive(this._breakpoint);
-        this.mode$ = combineLatest([this._inputMode, this.isBreakpointActive$]).pipe(map(([inputMode, breakpointActive]) => {
+        this.mode$ = combineLatest([this._inputMode, this.isBreakpointActive$]).pipe(map$1(([inputMode, breakpointActive]) => {
             return (breakpointActive) ? (inputMode ?? 'bar') : 'button';
         }), distinctUntilChanged(), tapDetectChanges(this.cdRef), shareReplay(1));
-        this.anchors$ = combineLatest([this._anchors, this.initAndUpdateOnTransitionSuccess$]).pipe(map(([anchors]) => {
+        this.anchors$ = combineLatest([this._anchors, this.initAndUpdateOnTransitionSuccess$]).pipe(map$1(([anchors]) => {
             const results = anchors.map((anchor) => {
                 let selected = this._dbxRouterService.isActive(anchor);
                 return {
@@ -938,14 +1518,14 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
         this._breakpoint.next(breakpoint);
     }
 }
-DbxNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxNavbarComponent, deps: [{ token: i1.DbxRouterTransitionService }, { token: i0.ChangeDetectorRef }, { token: DbxScreenMediaService }, { token: i1.DbxRouterService }], target: i0.ɵɵFactoryTarget.Component });
-DbxNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxNavbarComponent, selector: "dbx-navbar", inputs: { navAlign: "navAlign", anchors: "anchors", mode: "mode", breakpoint: "breakpoint" }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode$ | async\">\n  <!-- Button -->\n  <ng-container *ngSwitchCase=\"'button'\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"nav-menu-button\" aria-label=\"open navigation\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <mat-menu #menu>\n      <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n        <button mat-menu-item [ngClass]=\"(x.selected) ? 'active' : ''\">{{ x.anchor.title }}</button>\n      </dbx-anchor>\n    </mat-menu>\n  </ng-container>\n  <!-- Bar -->\n  <nav *ngSwitchDefault mat-tab-nav-bar [attr.mat-align-tabs]=\"navAlign\">\n    <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n      <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n    </dbx-anchor>\n  </nav>\n</ng-container>\n", components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DbxNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxNavbarComponent, deps: [{ token: i1$2.DbxRouterTransitionService }, { token: i0.ChangeDetectorRef }, { token: DbxScreenMediaService }, { token: i1$2.DbxRouterService }], target: i0.ɵɵFactoryTarget.Component });
+DbxNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxNavbarComponent, selector: "dbx-navbar", inputs: { navAlign: "navAlign", anchors: "anchors", mode: "mode", breakpoint: "breakpoint" }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode$ | async\">\n  <!-- Button -->\n  <ng-container *ngSwitchCase=\"'button'\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"nav-menu-button\" aria-label=\"open navigation\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <mat-menu #menu>\n      <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n        <button mat-menu-item [ngClass]=\"(x.selected) ? 'active' : ''\">{{ x.anchor.title }}</button>\n      </dbx-anchor>\n    </mat-menu>\n  </ng-container>\n  <!-- Bar -->\n  <nav *ngSwitchDefault mat-tab-nav-bar [attr.mat-align-tabs]=\"navAlign\">\n    <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n      <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n    </dbx-anchor>\n  </nav>\n</ng-container>\n", components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-navbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'dbx-navbar'
                     }, template: "<ng-container [ngSwitch]=\"mode$ | async\">\n  <!-- Button -->\n  <ng-container *ngSwitchCase=\"'button'\">\n    <button mat-icon-button [matMenuTriggerFor]=\"menu\" class=\"nav-menu-button\" aria-label=\"open navigation\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <mat-menu #menu>\n      <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n        <button mat-menu-item [ngClass]=\"(x.selected) ? 'active' : ''\">{{ x.anchor.title }}</button>\n      </dbx-anchor>\n    </mat-menu>\n  </ng-container>\n  <!-- Bar -->\n  <nav *ngSwitchDefault mat-tab-nav-bar [attr.mat-align-tabs]=\"navAlign\">\n    <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n      <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n    </dbx-anchor>\n  </nav>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DbxRouterTransitionService }, { type: i0.ChangeDetectorRef }, { type: DbxScreenMediaService }, { type: i1.DbxRouterService }]; }, propDecorators: { navAlign: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DbxRouterTransitionService }, { type: i0.ChangeDetectorRef }, { type: DbxScreenMediaService }, { type: i1$2.DbxRouterService }]; }, propDecorators: { navAlign: [{
                 type: Input
             }], anchors: [{
                 type: Input
@@ -1027,7 +1607,7 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
     constructor(dbxRouterTransitionService, ngZone, _screenMediaService) {
         super(dbxRouterTransitionService, ngZone);
         this._screenMediaService = _screenMediaService;
-        this.mode$ = this._screenMediaService.widthType$.pipe(distinctUntilChanged(), map((width) => {
+        this.mode$ = this._screenMediaService.widthType$.pipe(distinctUntilChanged(), map$1((width) => {
             let mode;
             switch (width) {
                 case 'micro':
@@ -1044,9 +1624,9 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
             }
             return mode;
         }), shareReplay(1));
-        this.disableBackdrop$ = this.mode$.pipe(map(x => x !== SideNavDisplayMode.MOBILE), distinctUntilChanged(), shareReplay(1));
-        this.sizeClass$ = this.mode$.pipe(map((mode) => `dbx-sidenav-${mode}`), distinctUntilChanged(), shareReplay(1));
-        this.state$ = this.mode$.pipe(map((mode) => {
+        this.disableBackdrop$ = this.mode$.pipe(map$1(x => x !== SideNavDisplayMode.MOBILE), distinctUntilChanged(), shareReplay(1));
+        this.sizeClass$ = this.mode$.pipe(map$1((mode) => `dbx-sidenav-${mode}`), distinctUntilChanged(), shareReplay(1));
+        this.state$ = this.mode$.pipe(map$1((mode) => {
             let drawer;
             let open;
             switch (mode) {
@@ -1066,7 +1646,7 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
                 open
             };
         }), shareReplay(1));
-        this.drawer$ = this.state$.pipe(map(x => x.drawer), distinctUntilChanged(), shareReplay(1));
+        this.drawer$ = this.state$.pipe(map$1(x => x.drawer), distinctUntilChanged(), shareReplay(1));
         this._watcherSub = new SubscriptionObject();
         this._stateSub = new SubscriptionObject();
     }
@@ -1122,12 +1702,12 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
         });
     }
 }
-DbxSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSidenavComponent, deps: [{ token: i1.DbxRouterTransitionService }, { token: i0.NgZone }, { token: DbxScreenMediaService }], target: i0.ɵɵFactoryTarget.Component });
-DbxSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxSidenavComponent, selector: "dbx-sidenav", inputs: { anchors: "anchors" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], exportAs: ["sidenav"], usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"dbx-sidenav\" [ngClass]=\"(sizeClass$ | async) ?? ''\">\n  <mat-sidenav class=\"dbx-sidenav-nav\" [disableClose]=\"disableBackdrop$ | async\" [mode]=\"(drawer$ | async)!\">\n    <ng-content select=\"[top]\"></ng-content>\n    <dbx-anchor-list class=\"dbx-sidenav-anchor-list\" [anchors]=\"anchors\"></dbx-anchor-list>\n    <span class=\"spacer\"></span>\n    <ng-content select=\"[bottom]\"></ng-content>\n    <div class=\"dbx-sidenav-nav-end\"></div>\n  </mat-sidenav>\n  <mat-sidenav-content>\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", components: [{ type: i3$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }, { type: i3$2.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxSidenavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSidenavComponent, deps: [{ token: i1$2.DbxRouterTransitionService }, { token: i0.NgZone }, { token: DbxScreenMediaService }], target: i0.ɵɵFactoryTarget.Component });
+DbxSidenavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxSidenavComponent, selector: "dbx-sidenav", inputs: { anchors: "anchors" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], exportAs: ["sidenav"], usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"dbx-sidenav\" [ngClass]=\"(sizeClass$ | async) ?? ''\">\n  <mat-sidenav class=\"dbx-sidenav-nav\" [disableClose]=\"disableBackdrop$ | async\" [mode]=\"(drawer$ | async)!\">\n    <ng-content select=\"[top]\"></ng-content>\n    <dbx-anchor-list class=\"dbx-sidenav-anchor-list\" [anchors]=\"anchors\"></dbx-anchor-list>\n    <span class=\"spacer\"></span>\n    <ng-content select=\"[bottom]\"></ng-content>\n    <div class=\"dbx-sidenav-nav-end\"></div>\n  </mat-sidenav>\n  <mat-sidenav-content>\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", components: [{ type: i3$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }, { type: i3$2.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSidenavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-sidenav', exportAs: 'sidenav', template: "<mat-sidenav-container class=\"dbx-sidenav\" [ngClass]=\"(sizeClass$ | async) ?? ''\">\n  <mat-sidenav class=\"dbx-sidenav-nav\" [disableClose]=\"disableBackdrop$ | async\" [mode]=\"(drawer$ | async)!\">\n    <ng-content select=\"[top]\"></ng-content>\n    <dbx-anchor-list class=\"dbx-sidenav-anchor-list\" [anchors]=\"anchors\"></dbx-anchor-list>\n    <span class=\"spacer\"></span>\n    <ng-content select=\"[bottom]\"></ng-content>\n    <div class=\"dbx-sidenav-nav-end\"></div>\n  </mat-sidenav>\n  <mat-sidenav-content>\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DbxRouterTransitionService }, { type: i0.NgZone }, { type: DbxScreenMediaService }]; }, propDecorators: { anchors: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DbxRouterTransitionService }, { type: i0.NgZone }, { type: DbxScreenMediaService }]; }, propDecorators: { anchors: [{
                 type: Input
             }], sidenav: [{
                 type: ViewChild,
@@ -1141,7 +1721,7 @@ class DbxSidenavButtonComponent {
     constructor(parent) {
         this.parent = parent;
         this.mode$ = this.parent.mode$;
-        this.showMenuButton$ = this.mode$.pipe(map$1(x => x === SideNavDisplayMode.MOBILE));
+        this.showMenuButton$ = this.mode$.pipe(map(x => x === SideNavDisplayMode.MOBILE));
     }
     toggleNav() {
         this.parent.toggleNav();
@@ -1152,7 +1732,7 @@ DbxSidenavButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
   <button class="dbx-sidenav-button" mat-icon-button *ngIf="showMenuButton$ | async" (click)="toggleNav()" aria-label="open sidenav button">
     <mat-icon>view_sidebar</mat-icon>
   </button>
-  `, isInline: true, components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSidenavButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1165,21 +1745,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: DbxSidenavComponent }]; } });
 
-/**
- * Button spacer component.
- */
-class DbxButtonSpacerComponent {
-}
-DbxButtonSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxButtonSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxButtonSpacerComponent, selector: "dbx-button-spacer", ngImport: i0, template: `<span class="dbx-button-spacer"></span>`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonSpacerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dbx-button-spacer',
-                    template: `<span class="dbx-button-spacer"></span>`
-                }]
-        }] });
-
 /**
  * Pre-configured pagebar used with DbxSidenavComponent.
  */
@@ -1195,7 +1760,7 @@ DbxSidenavPagebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
       </span>
       <ng-content right></ng-content>
     </dbx-pagebar>
-  `, isInline: true, components: [{ type: DbxPagebarComponent, selector: "dbx-pagebar", inputs: ["color"] }, { type: DbxSidenavButtonComponent, selector: "dbx-sidenav-button" }, { type: DbxButtonSpacerComponent, selector: "dbx-button-spacer" }] });
+  `, isInline: true, components: [{ type: DbxPagebarComponent, selector: "dbx-pagebar", inputs: ["color"] }, { type: DbxSidenavButtonComponent, selector: "dbx-sidenav-button" }], directives: [{ type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,dbxButtonSpacer" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSidenavPagebarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1222,7 +1787,7 @@ class DbxSidenavPageComponent {
     constructor(parent) {
         this.parent = parent;
         this._mobileOnly = new BehaviorSubject(false);
-        this.hidePagebar$ = this._mobileOnly.pipe(switchMap((mobileOnly) => (mobileOnly) ? this.parent.mode$.pipe(map(x => x !== SideNavDisplayMode.MOBILE)) : of(true)), shareReplay(1));
+        this.hidePagebar$ = this._mobileOnly.pipe(switchMap((mobileOnly) => (mobileOnly) ? this.parent.mode$.pipe(map$1(x => x !== SideNavDisplayMode.MOBILE)) : of(true)), shareReplay(1));
     }
     get mobileOnly() {
         return this._mobileOnly.value;
@@ -1242,7 +1807,7 @@ DbxSidenavPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, components: [{ type: DbxSidenavPagebarComponent, selector: "dbx-sidenav-pagebar" }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, components: [{ type: DbxSidenavPagebarComponent, selector: "dbx-sidenav-pagebar" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSidenavPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -1262,127 +1827,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
         }], ctorParameters: function () { return [{ type: DbxSidenavComponent }]; }, propDecorators: { color: [{
                 type: Input
             }], mobileOnly: [{
-                type: Input
-            }] } });
-
-var DbxButtonDisplayType;
-(function (DbxButtonDisplayType) {
-    DbxButtonDisplayType[DbxButtonDisplayType["RAISED"] = 0] = "RAISED";
-    DbxButtonDisplayType[DbxButtonDisplayType["STROKED"] = 1] = "STROKED";
-    DbxButtonDisplayType[DbxButtonDisplayType["FLAT"] = 2] = "FLAT";
-})(DbxButtonDisplayType || (DbxButtonDisplayType = {}));
-/**
- * Complex button that supports loading states.
- */
-class DbxButtonComponent extends AbstractDbxButtonDirective {
-    constructor() {
-        super(...arguments);
-        this.color = 'primary';
-    }
-    get raised() {
-        return this.type === DbxButtonDisplayType.RAISED;
-    }
-    set raised(raised) {
-        if (raised) {
-            this.type = DbxButtonDisplayType.RAISED;
-        }
-    }
-    get stroked() {
-        return this.type === DbxButtonDisplayType.STROKED;
-    }
-    set stroked(stroked) {
-        if (stroked) {
-            this.type = DbxButtonDisplayType.STROKED;
-        }
-    }
-    get flat() {
-        return this.type === DbxButtonDisplayType.FLAT;
-    }
-    set flat(flat) {
-        if (flat) {
-            this.type = DbxButtonDisplayType.FLAT;
-        }
-    }
-    get btnOptions() {
-        const buttonIcon = (this.icon) ? {
-            fontIcon: this.icon
-        } : undefined;
-        return {
-            fab: false,
-            active: this.working,
-            buttonIcon,
-            customClass: 'dbx-button ' + ((buttonIcon && !this.text) ? 'dbx-button-no-text' : ''),
-            // buttonIcon: icon,
-            text: this.text ?? '',
-            buttonColor: this.color,
-            barColor: 'accent',
-            raised: this.raised,
-            stroked: this.stroked,
-            flat: this.flat,
-            mode: 'indeterminate',
-            spinnerSize: 18,
-            spinnerColor: 'accent',
-            // Only disabled if we're not working, in order to show the animation.
-            disabled: !this.working && this.disabled
-        };
-    }
-}
-DbxButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxButtonComponent, selector: "dbx-button", inputs: { type: "type", raised: "raised", stroked: "stroked", flat: "flat", color: "color" }, providers: ProvideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
-    <mat-spinner-button class="page-button" (btnClick)="clickButton()" [options]="btnOptions"></mat-spinner-button>
-  `, isInline: true, components: [{ type: i1$5.MatSpinnerButtonComponent, selector: "mat-spinner-button", inputs: ["options", "buttonId", "active", "disabled"], outputs: ["btnClick"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'dbx-button',
-                    template: `
-    <mat-spinner-button class="page-button" (btnClick)="clickButton()" [options]="btnOptions"></mat-spinner-button>
-  `,
-                    // TODO: styleUrls: ['./button.scss'],
-                    providers: ProvideDbxButton(DbxButtonComponent)
-                }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], raised: [{
-                type: Input
-            }], stroked: [{
-                type: Input
-            }], flat: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-class DbxButtonModule {
-}
-DbxButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, declarations: [DbxButtonComponent,
-        DbxButtonSpacerComponent], imports: [CommonModule,
-        MatProgressButtonsModule], exports: [MatProgressButtonsModule,
-        DbxButtonComponent,
-        DbxButtonSpacerComponent] });
-DbxButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, imports: [[
-            CommonModule,
-            MatProgressButtonsModule
-        ], MatProgressButtonsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatProgressButtonsModule
-                    ],
-                    declarations: [
-                        DbxButtonComponent,
-                        DbxButtonSpacerComponent
-                    ],
-                    exports: [
-                        MatProgressButtonsModule,
-                        DbxButtonComponent,
-                        DbxButtonSpacerComponent
-                    ],
-                }]
-        }] });
+                type: Input
+            }] } });
 
 /**
  * Section used to elevate content in a pre-configured manner.
@@ -1649,7 +2095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxAngularRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective {
 }
 DbxAngularRouterSegueAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAngularRouterSegueAnchorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxAngularRouterSegueAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxAngularRouterSegueAnchorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<a class=\"dbx-anchor-a dbx-anchor-sref\" [attr.target]=\"target$ | async\" [uiSref]=\"ref$ | async\"\n  [uiParams]=\"refParams$ | async\" [uiOptions]=\"refOptions$ | async\">\n  <dbx-injected-content></dbx-injected-content>\n</a>\n", components: [{ type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i2$1.AnchorUISref, selector: "a[uiSref]" }, { type: i2$1.UISref, selector: "[uiSref]", inputs: ["uiSref", "uiParams", "uiOptions"], exportAs: ["uiSref"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxAngularRouterSegueAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxAngularRouterSegueAnchorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<a class=\"dbx-anchor-a dbx-anchor-sref\" [attr.target]=\"target$ | async\" [uiSref]=\"ref$ | async\"\n  [uiParams]=\"refParams$ | async\" [uiOptions]=\"refOptions$ | async\">\n  <dbx-injected-content></dbx-injected-content>\n</a>\n", components: [{ type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i2$1.AnchorUISref, selector: "a[uiSref]" }, { type: i2$1.UISref, selector: "[uiSref]", inputs: ["uiSref", "uiParams", "uiOptions"], exportAs: ["uiSref"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxAngularRouterSegueAnchorComponent, decorators: [{
             type: Component,
             args: [{ template: "<a class=\"dbx-anchor-a dbx-anchor-sref\" [attr.target]=\"target$ | async\" [uiSref]=\"ref$ | async\"\n  [uiParams]=\"refParams$ | async\" [uiOptions]=\"refOptions$ | async\">\n  <dbx-injected-content></dbx-injected-content>\n</a>\n" }]
@@ -1700,7 +2146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxUIRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective {
 }
 DbxUIRouterSegueAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxUIRouterSegueAnchorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbxUIRouterSegueAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxUIRouterSegueAnchorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<a class=\"dbx-anchor-a dbx-anchor-sref\" [attr.target]=\"target$ | async\" [uiSref]=\"ref$ | async\"\n  [uiParams]=\"refParams$ | async\" [uiOptions]=\"refOptions$ | async\" uiSrefActive=\"dbx-anchor-active\" uiSrefActiveEq=\"dbx-anchor-active-eq\">\n  <dbx-injected-content [template]=\"template$ | async\"></dbx-injected-content>\n</a>\n", components: [{ type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i2$1.AnchorUISref, selector: "a[uiSref]" }, { type: i2$1.UISrefActive, selector: "[uiSrefActive],[uiSrefActiveEq]", inputs: ["uiSrefActive", "uiSrefActiveEq"] }, { type: i2$1.UISrefStatus, selector: "[uiSrefStatus],[uiSrefActive],[uiSrefActiveEq]", outputs: ["uiSrefStatus"], exportAs: ["uiSrefStatus"] }, { type: i2$1.UISref, selector: "[uiSref]", inputs: ["uiSref", "uiParams", "uiOptions"], exportAs: ["uiSref"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxUIRouterSegueAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxUIRouterSegueAnchorComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<a class=\"dbx-anchor-a dbx-anchor-sref\" [attr.target]=\"target$ | async\" [uiSref]=\"ref$ | async\"\n  [uiParams]=\"refParams$ | async\" [uiOptions]=\"refOptions$ | async\" uiSrefActive=\"dbx-anchor-active\" uiSrefActiveEq=\"dbx-anchor-active-eq\">\n  <dbx-injected-content [template]=\"template$ | async\"></dbx-injected-content>\n</a>\n", components: [{ type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i2$1.AnchorUISref, selector: "a[uiSref]" }, { type: i2$1.UISrefActive, selector: "[uiSrefActive],[uiSrefActiveEq]", inputs: ["uiSrefActive", "uiSrefActiveEq"] }, { type: i2$1.UISrefStatus, selector: "[uiSrefStatus],[uiSrefActive],[uiSrefActiveEq]", outputs: ["uiSrefStatus"], exportAs: ["uiSrefStatus"] }, { type: i2$1.UISref, selector: "[uiSref]", inputs: ["uiSref", "uiParams", "uiOptions"], exportAs: ["uiSref"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxUIRouterSegueAnchorComponent, decorators: [{
             type: Component,
             args: [{ template: "<a class=\"dbx-anchor-a dbx-anchor-sref\" [attr.target]=\"target$ | async\" [uiSref]=\"ref$ | async\"\n  [uiParams]=\"refParams$ | async\" [uiOptions]=\"refOptions$ | async\" uiSrefActive=\"dbx-anchor-active\" uiSrefActiveEq=\"dbx-anchor-active-eq\">\n  <dbx-injected-content [template]=\"template$ | async\"></dbx-injected-content>\n</a>\n" }]
@@ -1776,7 +2222,7 @@ DbxTwoBlocksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       <ng-content></ng-content>
     </div>
   </div>
-  `, isInline: true, directives: [{ type: i1$6.ResizedDirective, selector: "[resized]", outputs: ["resized"] }] });
+  `, isInline: true, directives: [{ type: i1$7.ResizedDirective, selector: "[resized]", outputs: ["resized"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTwoBlocksComponent, decorators: [{
             type: Component,
             args: [{
@@ -1847,7 +2293,7 @@ DbxCardBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
       <ng-content></ng-content>
     </div>
   </div>
-  `, isInline: true, components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxCardBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1937,23 +2383,23 @@ class TwoColumnsContextStore extends ComponentStore {
         /**
          * Pipes the current state of showRight.
          */
-        this.showRight$ = this.state$.pipe(map$1((x) => x.showRight));
+        this.showRight$ = this.state$.pipe(map((x) => x.showRight));
         /**
          * Convenience function for the showRight compliment.
          */
-        this.hideRight$ = this.state$.pipe(map$1((x) => !x.showRight));
+        this.hideRight$ = this.state$.pipe(map((x) => !x.showRight));
         /**
          * Pipes the current state of fullLeft.
          */
-        this.fullLeft$ = this.state$.pipe(map$1((x) => x.fullLeft));
+        this.fullLeft$ = this.state$.pipe(map((x) => x.fullLeft));
         /**
          * Whether or not to show the full left.
          */
-        this.showFullLeft$ = this.state$.pipe(map$1((x) => !x.showRight && x.fullLeft));
+        this.showFullLeft$ = this.state$.pipe(map((x) => !x.showRight && x.fullLeft));
         /**
          * Pipes the current backRef value.
          */
-        this.backRef$ = this.state$.pipe(map$1((x) => x.backRef), distinct());
+        this.backRef$ = this.state$.pipe(map((x) => x.backRef), distinct());
         /**
          * Emits back events.
          */
@@ -2046,7 +2492,7 @@ class DbxTwoColumnsComponent {
     }
 }
 DbxTwoColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTwoColumnsComponent, deps: [{ token: TwoColumnsContextStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxTwoColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxTwoColumnsComponent, selector: "dbx-two-columns", inputs: { reverseSizing: "reverseSizing", inSectionPage: "inSectionPage" }, exportAs: ["columns"], ngImport: i0, template: "<div class=\"two-column\" [ngClass]=\"{ 'two-column-reverse-sizing': reverseSizing, 'right-shown': showRight$ | async, 'full-left': (showFullLeft$ | async), 'dbx-section-page-two': inSectionPage }\">\n  <div class=\"left-column\">\n    <ng-content select=\"[left]\"></ng-content>\n  </div>\n  <div class=\"right-column\" *ngIf=\"showRight$ | async\">\n    <!-- NOTE: This will only hide the content project. Be sure to use *ngIf separately on the right's content if needed. -->\n    <!-- https://github.com/angular/angular/issues/17983 -->\n    <ng-content select=\"[right]\"></ng-content>\n  </div>\n</div>\n", directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxTwoColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxTwoColumnsComponent, selector: "dbx-two-columns", inputs: { reverseSizing: "reverseSizing", inSectionPage: "inSectionPage" }, exportAs: ["columns"], ngImport: i0, template: "<div class=\"two-column\" [ngClass]=\"{ 'two-column-reverse-sizing': reverseSizing, 'right-shown': showRight$ | async, 'full-left': (showFullLeft$ | async), 'dbx-section-page-two': inSectionPage }\">\n  <div class=\"left-column\">\n    <ng-content select=\"[left]\"></ng-content>\n  </div>\n  <div class=\"right-column\" *ngIf=\"showRight$ | async\">\n    <!-- NOTE: This will only hide the content project. Be sure to use *ngIf separately on the right's content if needed. -->\n    <!-- https://github.com/angular/angular/issues/17983 -->\n    <ng-content select=\"[right]\"></ng-content>\n  </div>\n</div>\n", directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTwoColumnsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-two-columns', exportAs: 'columns', template: "<div class=\"two-column\" [ngClass]=\"{ 'two-column-reverse-sizing': reverseSizing, 'right-shown': showRight$ | async, 'full-left': (showFullLeft$ | async), 'dbx-section-page-two': inSectionPage }\">\n  <div class=\"left-column\">\n    <ng-content select=\"[left]\"></ng-content>\n  </div>\n  <div class=\"right-column\" *ngIf=\"showRight$ | async\">\n    <!-- NOTE: This will only hide the content project. Be sure to use *ngIf separately on the right's content if needed. -->\n    <!-- https://github.com/angular/angular/issues/17983 -->\n    <ng-content select=\"[right]\"></ng-content>\n  </div>\n</div>\n" }]
@@ -2104,7 +2550,7 @@ DbxTwoColumnsColumnHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
     <div class="dbx-two-columns-head" [ngClass]="{ 'block': block, 'full': full }">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTwoColumnsColumnHeadComponent, decorators: [{
             type: Component,
             args: [{
@@ -2160,8 +2606,8 @@ class DbxTwoColumnsRightComponent {
         this._showBack = new BehaviorSubject(true);
         this.ref$ = this.twoColumnsContextStore.backRef$;
         this.showBack$ = combineLatest([
-            this._showBack, this.ref$.pipe(map$1((x) => !Boolean(x))) // TODO: Is this correct? Show back if ref is not defined?
-        ]).pipe(map$1(([a, b]) => a && b));
+            this._showBack, this.ref$.pipe(map((x) => !Boolean(x))) // TODO: Is this correct? Show back if ref is not defined?
+        ]).pipe(map(([a, b]) => a && b));
     }
     ngAfterViewInit() {
         setTimeout(() => {
@@ -2182,7 +2628,7 @@ class DbxTwoColumnsRightComponent {
     }
 }
 DbxTwoColumnsRightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTwoColumnsRightComponent, deps: [{ token: TwoColumnsContextStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxTwoColumnsRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxTwoColumnsRightComponent, selector: "dbx-two-columns-right", inputs: { header: "header", showBack: "showBack" }, ngImport: i0, template: "<div class=\"two-columns-right\">\n  <dbx-two-columns-head>\n    <!-- Back Buttons -->\n    <ng-container *ngIf=\"showBack$ | async\">\n      <button mat-icon-button class=\"back-button\" (click)=\"backClicked()\" aria-label=\"back button\">\n        <mat-icon>navigate_before</mat-icon>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"ref$ | async\">\n      <dbx-anchor [anchor]=\"ref$ | async\">\n        <button mat-icon-button class=\"back-button\" aria-label=\"back button\">\n          <mat-icon>navigate_before</mat-icon>\n        </button>\n      </dbx-anchor>\n    </ng-container>\n    <span *ngIf=\"header\" class=\"right-nav-title\">{{ header }}</span>\n    <span class=\"right-nav-spacer\"></span>\n    <span class=\"spacer\"></span>\n    <ng-content select=\"[nav]\"></ng-content>\n  </dbx-two-columns-head>\n  <div class=\"two-columns-right-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", components: [{ type: DbxTwoColumnsColumnHeadComponent, selector: "dbx-two-columns-head", inputs: ["block", "full"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxTwoColumnsRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxTwoColumnsRightComponent, selector: "dbx-two-columns-right", inputs: { header: "header", showBack: "showBack" }, ngImport: i0, template: "<div class=\"two-columns-right\">\n  <dbx-two-columns-head>\n    <!-- Back Buttons -->\n    <ng-container *ngIf=\"showBack$ | async\">\n      <button mat-icon-button class=\"back-button\" (click)=\"backClicked()\" aria-label=\"back button\">\n        <mat-icon>navigate_before</mat-icon>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"ref$ | async\">\n      <dbx-anchor [anchor]=\"ref$ | async\">\n        <button mat-icon-button class=\"back-button\" aria-label=\"back button\">\n          <mat-icon>navigate_before</mat-icon>\n        </button>\n      </dbx-anchor>\n    </ng-container>\n    <span *ngIf=\"header\" class=\"right-nav-title\">{{ header }}</span>\n    <span class=\"right-nav-spacer\"></span>\n    <span class=\"spacer\"></span>\n    <ng-content select=\"[nav]\"></ng-content>\n  </dbx-two-columns-head>\n  <div class=\"two-columns-right-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", components: [{ type: DbxTwoColumnsColumnHeadComponent, selector: "dbx-two-columns-head", inputs: ["block", "full"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTwoColumnsRightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-two-columns-right', template: "<div class=\"two-columns-right\">\n  <dbx-two-columns-head>\n    <!-- Back Buttons -->\n    <ng-container *ngIf=\"showBack$ | async\">\n      <button mat-icon-button class=\"back-button\" (click)=\"backClicked()\" aria-label=\"back button\">\n        <mat-icon>navigate_before</mat-icon>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"ref$ | async\">\n      <dbx-anchor [anchor]=\"ref$ | async\">\n        <button mat-icon-button class=\"back-button\" aria-label=\"back button\">\n          <mat-icon>navigate_before</mat-icon>\n        </button>\n      </dbx-anchor>\n    </ng-container>\n    <span *ngIf=\"header\" class=\"right-nav-title\">{{ header }}</span>\n    <span class=\"right-nav-spacer\"></span>\n    <span class=\"spacer\"></span>\n    <ng-content select=\"[nav]\"></ng-content>\n  </dbx-two-columns-head>\n  <div class=\"two-columns-right-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
@@ -2345,7 +2791,7 @@ function compactModeFromInput(input) {
 }
 function mapCompactModeObs(mode$, config) {
     const modeObs = mode$ ?? of(config.defaultMode ?? CompactMode.FULL);
-    return modeObs.pipe(map$1((inputMode) => {
+    return modeObs.pipe(map((inputMode) => {
         const isCompact = ((inputMode ?? config.defaultMode) === CompactMode.COMPACT);
         if (isCompact) {
             return config.compact;
@@ -2360,7 +2806,7 @@ class CompactContextStore extends ComponentStore {
     constructor() {
         super({ mode: CompactMode.FULL });
         // MARK: Accessors
-        this.mode$ = this.state$.pipe(map$1(x => x.mode));
+        this.mode$ = this.state$.pipe(map(x => x.mode));
         this.setMode = this.updater((state, mode) => ({ mode: compactModeFromInput(mode) }));
     }
 }
@@ -2436,7 +2882,7 @@ DbxFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         <ng-content></ng-content>
       </mat-toolbar>
     </div>
-  `, isInline: true, components: [{ type: i1$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
+  `, isInline: true, components: [{ type: i1$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFlagComponent, decorators: [{
             type: Component,
             args: [{
@@ -2533,7 +2979,7 @@ class DbxFlexGroupDirective extends AbstractSubscriptionDirective {
         this.relative = false;
         this._small = false;
         this._breakpoint = new BehaviorSubject('tablet');
-        this.isSmallScreen$ = this._dbxScreenMediaService.isBreakpointActive(this._breakpoint).pipe(map(x => !x), distinctUntilChanged(), shareReplay(1));
+        this.isSmallScreen$ = this._dbxScreenMediaService.isBreakpointActive(this._breakpoint).pipe(map$1(x => !x), distinctUntilChanged(), shareReplay(1));
     }
     get small() {
         return this._small;
@@ -2635,7 +3081,7 @@ DbxIconItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       </div>
     </div>
   </div>
-  `, isInline: true, components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxIconItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2742,7 +3188,7 @@ DbxLoadingProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
     </ng-container>
     <div *ngIf="text" class="hint">{{ text }}</div>
   </div>
-  `, isInline: true, components: [{ type: i1$7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i1$8.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLoadingProgressComponent, decorators: [{
             type: Component,
             args: [{
@@ -2788,7 +3234,7 @@ class DbxReadableErrorComponent {
     }
 }
 DbxReadableErrorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxReadableErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxReadableErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxReadableErrorComponent, selector: "dbx-error", inputs: { error: "error" }, ngImport: i0, template: "<div *ngIf=\"error\" class=\"dbx-error\">\n  <h4>An error occured.</h4>\n  <!-- <p class=\"dbx-error-code\" *ngIf=\"errorData.code\">{{ errorData.code }}</p> -->\n  <p class=\"dbx-error-message\" *ngIf=\"message\">{{ message }}</p>\n</div>\n", directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DbxReadableErrorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxReadableErrorComponent, selector: "dbx-error", inputs: { error: "error" }, ngImport: i0, template: "<div *ngIf=\"error\" class=\"dbx-error\">\n  <h4>An error occured.</h4>\n  <!-- <p class=\"dbx-error-code\" *ngIf=\"errorData.code\">{{ errorData.code }}</p> -->\n  <p class=\"dbx-error-message\" *ngIf=\"message\">{{ message }}</p>\n</div>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxReadableErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-error', template: "<div *ngIf=\"error\" class=\"dbx-error\">\n  <h4>An error occured.</h4>\n  <!-- <p class=\"dbx-error-code\" *ngIf=\"errorData.code\">{{ errorData.code }}</p> -->\n  <p class=\"dbx-error-message\" *ngIf=\"message\">{{ message }}</p>\n</div>\n" }]
@@ -2816,7 +3262,7 @@ class DbxBasicLoadingComponent {
         this._error = new BehaviorSubject(undefined);
         this._customErrorContent = new BehaviorSubject(undefined);
         this._customLoadingContent = new BehaviorSubject(undefined);
-        this.state$ = combineLatest([this._loading, this._show, this._error]).pipe(map(([loading, show, error]) => {
+        this.state$ = combineLatest([this._loading, this._show, this._error]).pipe(map$1(([loading, show, error]) => {
             let state;
             if (error) {
                 state = LoadingComponentState.ERROR;
@@ -2833,8 +3279,8 @@ class DbxBasicLoadingComponent {
             return state;
         }), distinctUntilChanged(), startWith(LoadingComponentState.NONE), shareReplay(1));
         this.error$ = this._error.asObservable();
-        this.hasNoCustomError$ = this._customErrorContent.pipe(map(x => !checkNgContentWrapperHasContent(x)));
-        this.hasNoCustomLoading$ = this._customLoadingContent.pipe(map(x => !checkNgContentWrapperHasContent(x)));
+        this.hasNoCustomError$ = this._customErrorContent.pipe(map$1(x => !checkNgContentWrapperHasContent(x)));
+        this.hasNoCustomLoading$ = this._customLoadingContent.pipe(map$1(x => !checkNgContentWrapperHasContent(x)));
         this.mode = 'indeterminate';
         this.color = 'primary';
         this.linear = false;
@@ -2876,7 +3322,7 @@ class DbxBasicLoadingComponent {
     }
 }
 DbxBasicLoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxBasicLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxBasicLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: { diameter: "diameter", mode: "mode", color: "color", text: "text", linear: "linear", show: "show", loading: "loading", error: "error" }, viewQueries: [{ propertyName: "customErrorContent", first: true, predicate: ["customError"], descendants: true }, { propertyName: "customLoadingContent", first: true, predicate: ["customLoading"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"state$ | async\">\n  <ng-container *ngSwitchCase=\"0\">\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"1\">\n    <!-- Content -->\n    <ng-content></ng-content>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"2\">\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <dbx-loading-progress *ngIf=\"hasNoCustomLoading$ | async\" [mode]=\"mode\" [color]=\"color\" [text]=\"text\"\n    [linear]=\"linear\" [diameter]=\"diameter\"></dbx-loading-progress>\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  <dbx-error *ngIf=\"hasNoCustomError$ | async\" [error]=\"error$ | async\"></dbx-error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n", components: [{ type: DbxLoadingProgressComponent, selector: "dbx-loading-progress", inputs: ["text", "linear", "mode", "color", "value", "bufferValue", "diameter"] }, { type: DbxReadableErrorComponent, selector: "dbx-error", inputs: ["error"] }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxBasicLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: { diameter: "diameter", mode: "mode", color: "color", text: "text", linear: "linear", show: "show", loading: "loading", error: "error" }, viewQueries: [{ propertyName: "customErrorContent", first: true, predicate: ["customError"], descendants: true }, { propertyName: "customLoadingContent", first: true, predicate: ["customLoading"], descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"state$ | async\">\n  <ng-container *ngSwitchCase=\"0\">\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"1\">\n    <!-- Content -->\n    <ng-content></ng-content>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"2\">\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <dbx-loading-progress *ngIf=\"hasNoCustomLoading$ | async\" [mode]=\"mode\" [color]=\"color\" [text]=\"text\"\n    [linear]=\"linear\" [diameter]=\"diameter\"></dbx-loading-progress>\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  <dbx-error *ngIf=\"hasNoCustomError$ | async\" [error]=\"error$ | async\"></dbx-error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n", components: [{ type: DbxLoadingProgressComponent, selector: "dbx-loading-progress", inputs: ["text", "linear", "mode", "color", "value", "bufferValue", "diameter"] }, { type: DbxReadableErrorComponent, selector: "dbx-error", inputs: ["error"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxBasicLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-basic-loading', template: "<ng-container [ngSwitch]=\"state$ | async\">\n  <ng-container *ngSwitchCase=\"0\">\n    <!-- Loading -->\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"1\">\n    <!-- Content -->\n    <ng-content></ng-content>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"2\">\n    <!-- Error -->\n    <ng-container *ngTemplateOutlet=\"errorTemplate\"></ng-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <dbx-loading-progress *ngIf=\"hasNoCustomLoading$ | async\" [mode]=\"mode\" [color]=\"color\" [text]=\"text\"\n    [linear]=\"linear\" [diameter]=\"diameter\"></dbx-loading-progress>\n  <div #customLoading>\n    <ng-content select=\"[loading]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #errorTemplate>\n  <dbx-error *ngIf=\"hasNoCustomError$ | async\" [error]=\"error$ | async\"></dbx-error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  <ng-content select=\"[errorAction]\"></ng-content>\n</ng-template>\n" }]
@@ -2912,7 +3358,7 @@ class DbxLoadingComponent {
         this._context = new BehaviorSubject(undefined);
         this._inputLoading = new BehaviorSubject(true);
         this._inputError = new BehaviorSubject(undefined);
-        this.state$ = combineLatest([this._inputLoading, this._inputError, this._context.pipe(switchMap(x => (x != null) ? x.stream$ : of(undefined)))]).pipe(map(([inputLoading, inputError, loadingState]) => {
+        this.state$ = combineLatest([this._inputLoading, this._inputError, this._context.pipe(switchMap(x => (x != null) ? x.stream$ : of(undefined)))]).pipe(map$1(([inputLoading, inputError, loadingState]) => {
             if (loadingState) {
                 return loadingState;
             }
@@ -2923,8 +3369,8 @@ class DbxLoadingComponent {
                 };
             }
         }), distinctUntilChanged((a, b) => a.loading === b.loading && a.error === b.error), shareReplay(1));
-        this.loading$ = this.state$.pipe(map(x => x.loading), distinctUntilChanged(), shareReplay(1));
-        this.error$ = this.state$.pipe(map(x => x.error), distinctUntilChanged(), shareReplay(1));
+        this.loading$ = this.state$.pipe(map$1(x => x.loading), distinctUntilChanged(), shareReplay(1));
+        this.error$ = this.state$.pipe(map$1(x => x.error), distinctUntilChanged(), shareReplay(1));
         this.mode = 'indeterminate';
         this.color = 'primary';
     }
@@ -2960,7 +3406,7 @@ DbxLoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
     <ng-content error select="[error]"></ng-content>
     <ng-content errorAction select="[errorAction]"></ng-content>
   </dbx-basic-loading>
-  `, isInline: true, components: [{ type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: ["diameter", "mode", "color", "text", "linear", "show", "loading", "error"] }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, components: [{ type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: ["diameter", "mode", "color", "text", "linear", "show", "loading", "error"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLoadingComponent, decorators: [{
             type: Component,
             args: [{
@@ -3020,16 +3466,16 @@ class DbxListComponent {
         this.context = new ListLoadingStateContextInstance({ showLoadingOnNoValue: false });
         this.isEmpty$ = this.context.isEmpty$;
         this.disabled$ = this._disabled.asObservable();
-        this.hideOnEmpty$ = this._config.pipe(filterMaybe(), map(x => Boolean(x.hideOnEmpty)), distinctUntilChanged(), shareReplay(1));
-        this.invertedList$ = this._config.pipe(filterMaybe(), map(x => Boolean(x?.throttle)), distinctUntilChanged(), shareReplay(1));
-        this.throttleScroll$ = this._config.pipe(map(x => (x?.throttle) ?? this.DEFAULT_THROTTLE_SCROLL), distinctUntilChanged(), shareReplay(1));
-        this.scrollDistance$ = this._config.pipe(map(x => (x?.scrollDistance) ?? this.DEFAULT_SCROLL_DISTANCE), distinctUntilChanged(), shareReplay(1));
+        this.hideOnEmpty$ = this._config.pipe(filterMaybe(), map$1(x => Boolean(x.hideOnEmpty)), distinctUntilChanged(), shareReplay(1));
+        this.invertedList$ = this._config.pipe(filterMaybe(), map$1(x => Boolean(x?.throttle)), distinctUntilChanged(), shareReplay(1));
+        this.throttleScroll$ = this._config.pipe(map$1(x => (x?.throttle) ?? this.DEFAULT_THROTTLE_SCROLL), distinctUntilChanged(), shareReplay(1));
+        this.scrollDistance$ = this._config.pipe(map$1(x => (x?.scrollDistance) ?? this.DEFAULT_SCROLL_DISTANCE), distinctUntilChanged(), shareReplay(1));
         this.scrollLoadMoreTrigger$ = this._config.pipe(switchMap((config) => {
             const loadNextDirection = config?.invertedList ? 'up' : 'down';
-            return this._scrollTrigger.pipe(filter(x => x === loadNextDirection));
+            return this._scrollTrigger.pipe(filter$1(x => x === loadNextDirection));
         }));
         this.loadMore$ = merge(this.scrollLoadMoreTrigger$, this._loadMoreTrigger);
-        this.injectedComponentConfig$ = this._config.pipe(distinctUntilChanged(), map((config) => {
+        this.injectedComponentConfig$ = this._config.pipe(distinctUntilChanged(), map$1((config) => {
             let injectedComponentConfig;
             if (config) {
                 const { componentClass, init, onClick, onSelectionChange, loadMore } = config;
@@ -3079,7 +3525,7 @@ class DbxListComponent {
             }
             return injectedComponentConfig;
         }), distinctUntilChanged(), shareReplay(1));
-        this.hideContent$ = this.context.stateChange$.pipe(switchMap(() => this.context.state$.pipe(filter((x) => loadingStateHasFinishedLoading(x)), first(), startWith(beginLoading()))), switchMap((state) => {
+        this.hideContent$ = this.context.stateChange$.pipe(switchMap(() => this.context.state$.pipe(filter$1((x) => loadingStateHasFinishedLoading(x)), first(), startWith(beginLoading()))), switchMap((state) => {
             if (state?.loading) {
                 return of(true);
             }
@@ -3166,7 +3612,7 @@ class DbxListComponent {
     }
 }
 DbxListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxListComponent, selector: "dbx-list", inputs: { padded: "padded", state$: "state$", config: "config", disabled: "disabled" }, outputs: { contentScrolled: "contentScrolled" }, host: { properties: { "class.dbx-list-padded": "padded" }, classAttribute: "d-block dbx-list" }, ngImport: i0, template: "<dbx-loading [context]=\"context\" [linear]=\"true\"></dbx-loading>\n<div dbx-list-internal-content infinite-scroll [infiniteScrollDistance]=\"(scrollDistance$ | async) ?? DEFAULT_SCROLL_DISTANCE\"\n  [infiniteScrollUpDistance]=\"(scrollDistance$ | async) ?? DEFAULT_SCROLL_DISTANCE\" [hide]=\"hideContent$ | async\"\n  [infiniteScrollThrottle]=\"(throttleScroll$ | async) ?? DEFAULT_THROTTLE_SCROLL\" [scrollWindow]=\"false\"\n  (scrolled)=\"onScrollDown()\" (scrolledUp)=\"onScrollUp()\">\n  <ng-content select=\"[top]\"></ng-content>\n  <dbx-injected-content [config]=\"injectedComponentConfig$ | async\"></dbx-injected-content>\n  <ng-content select=\"[bottom]\"></ng-content>\n</div>\n<ng-content *ngIf=\"isEmpty$ | async\" select=\"[empty]\"></ng-content>\n", components: [{ type: i0.forwardRef(function () { return DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i0.forwardRef(function () { return i1.DbxInjectedComponent; }), selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i0.forwardRef(function () { return DbxListInternalContentDirective; }), selector: "[dbx-list-internal-content]", inputs: ["hide"] }, { type: i0.forwardRef(function () { return i3$3.InfiniteScrollDirective; }), selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i0.forwardRef(function () { return i3$1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i0.forwardRef(function () { return i3$1.AsyncPipe; }) } });
+DbxListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxListComponent, selector: "dbx-list", inputs: { padded: "padded", state$: "state$", config: "config", disabled: "disabled" }, outputs: { contentScrolled: "contentScrolled" }, host: { properties: { "class.dbx-list-padded": "padded" }, classAttribute: "d-block dbx-list" }, ngImport: i0, template: "<dbx-loading [context]=\"context\" [linear]=\"true\"></dbx-loading>\n<div dbx-list-internal-content infinite-scroll [infiniteScrollDistance]=\"(scrollDistance$ | async) ?? DEFAULT_SCROLL_DISTANCE\"\n  [infiniteScrollUpDistance]=\"(scrollDistance$ | async) ?? DEFAULT_SCROLL_DISTANCE\" [hide]=\"hideContent$ | async\"\n  [infiniteScrollThrottle]=\"(throttleScroll$ | async) ?? DEFAULT_THROTTLE_SCROLL\" [scrollWindow]=\"false\"\n  (scrolled)=\"onScrollDown()\" (scrolledUp)=\"onScrollUp()\">\n  <ng-content select=\"[top]\"></ng-content>\n  <dbx-injected-content [config]=\"injectedComponentConfig$ | async\"></dbx-injected-content>\n  <ng-content select=\"[bottom]\"></ng-content>\n</div>\n<ng-content *ngIf=\"isEmpty$ | async\" select=\"[empty]\"></ng-content>\n", components: [{ type: i0.forwardRef(function () { return DbxLoadingComponent; }), selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { type: i0.forwardRef(function () { return i1$2.DbxInjectedComponent; }), selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i0.forwardRef(function () { return DbxListInternalContentDirective; }), selector: "[dbx-list-internal-content]", inputs: ["hide"] }, { type: i0.forwardRef(function () { return i3$3.InfiniteScrollDirective; }), selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i0.forwardRef(function () { return i3.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-list', host: {
@@ -3236,7 +3682,7 @@ class AbstractDbxListWrapperDirective {
     constructor(initConfig) {
         this.initConfig = initConfig;
         this._init = new BehaviorSubject(undefined);
-        this.config$ = this._init.pipe(filterMaybe(), getter(), map((x) => this._buildListConfig(x)), shareReplay(1));
+        this.config$ = this._init.pipe(filterMaybe(), getter(), map$1((x) => this._buildListConfig(x)), shareReplay(1));
         this.clickItem = new EventEmitter();
         this.loadMore = new EventEmitter();
     }
@@ -3306,7 +3752,7 @@ class DbxActionErrorDirective extends AbstractSubscriptionDirective {
         });
     }
 }
-DbxActionErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionErrorDirective, deps: [{ token: DbxReadableErrorComponent, host: true }, { token: i1.ActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionErrorDirective, deps: [{ token: DbxReadableErrorComponent, host: true }, { token: i1$2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
 DbxActionErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionErrorDirective, selector: "[dbxActionError]", usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionErrorDirective, decorators: [{
             type: Directive,
@@ -3315,7 +3761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: DbxReadableErrorComponent, decorators: [{
                     type: Host
-                }] }, { type: i1.ActionContextStoreSourceInstance }]; } });
+                }] }, { type: i1$2.DbxActionContextStoreSourceInstance }]; } });
 
 /**
  * Converts the error response to a POJO.
@@ -3443,19 +3889,51 @@ function catchErrorServerParams(action, mapError = (error) => error) {
     return catchError$1((error) => of(action(mapError(convertServerErrorParams(error)))));
 }
 
+/**
+ * Context used for linking a loadingComponent to an ActionContext by providing a LoadingContext.
+ */
+class DbxActionLoadingContextDirective {
+    constructor(loadingComponent, source) {
+        this.loadingComponent = loadingComponent;
+        this.source = source;
+        this._context = new LoadingStateContextInstance({ obs: this.source.loadingState$ });
+    }
+    get context() {
+        return this._context;
+    }
+    ngOnInit() {
+        this.loadingComponent.context = this._context;
+    }
+    ngOnDestroy() {
+        this._context.destroy();
+    }
+}
+DbxActionLoadingContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionLoadingContextDirective, deps: [{ token: DbxLoadingComponent, host: true }, { token: i1$2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionLoadingContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionLoadingContextDirective, selector: "[dbxActionLoadingContext]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionLoadingContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxActionLoadingContext]'
+                }]
+        }], ctorParameters: function () { return [{ type: DbxLoadingComponent, decorators: [{
+                    type: Host
+                }] }, { type: i1$2.DbxActionContextStoreSourceInstance }]; } });
+
 class DbxLoadingModule {
 }
 DbxLoadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxLoadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLoadingModule, declarations: [DbxLoadingComponent,
         DbxBasicLoadingComponent,
-        DbxLoadingProgressComponent], imports: [CommonModule,
+        DbxLoadingProgressComponent,
+        DbxActionLoadingContextDirective], imports: [CommonModule,
         DbxReadableErrorModule,
         MatProgressSpinnerModule,
         MatProgressBarModule], exports: [DbxLoadingComponent,
         DbxBasicLoadingComponent,
         DbxLoadingProgressComponent,
         MatProgressSpinnerModule,
-        MatProgressBarModule] });
+        MatProgressBarModule,
+        DbxActionLoadingContextDirective] });
 DbxLoadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLoadingModule, imports: [[
             CommonModule,
             DbxReadableErrorModule,
@@ -3475,14 +3953,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                     declarations: [
                         DbxLoadingComponent,
                         DbxBasicLoadingComponent,
-                        DbxLoadingProgressComponent
+                        DbxLoadingProgressComponent,
+                        DbxActionLoadingContextDirective
                     ],
                     exports: [
                         DbxLoadingComponent,
                         DbxBasicLoadingComponent,
                         DbxLoadingProgressComponent,
                         MatProgressSpinnerModule,
-                        MatProgressBarModule
+                        MatProgressBarModule,
+                        DbxActionLoadingContextDirective
                     ]
                 }]
         }] });
@@ -3502,7 +3982,7 @@ function ProvideDbxListView(sourceType) {
 const DBX_VALUE_LIST_VIEW_ITEM = new InjectionToken('DbxValueListViewItem');
 const DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES = (values) => of(values.map(value => ({ value })));
 function mapValuesToValuesListItemConfigObs(listViewConfig, values) {
-    return (listViewConfig.mapValuesToItemValues ?? DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES)(values).pipe(map((itemValues) => {
+    return (listViewConfig.mapValuesToItemValues ?? DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES)(values).pipe(map$1((itemValues) => {
         const items = mapItemValuesToValueListItemConfig(listViewConfig, itemValues);
         return items;
     }));
@@ -3561,13 +4041,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxSelectionValueListViewComponent extends AbstractDbxValueListViewDirective {
     constructor(dbxListView) {
         super(dbxListView);
-        this.multiple$ = this.config$.pipe(map(x => x.multiple ?? true), distinctUntilChanged(), shareReplay(1));
+        this.multiple$ = this.config$.pipe(map$1(x => x.multiple ?? true), distinctUntilChanged(), shareReplay(1));
     }
 }
 DbxSelectionValueListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSelectionValueListViewComponent, deps: [{ token: DbxListView }], target: i0.ɵɵFactoryTarget.Component });
 DbxSelectionValueListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxSelectionValueListViewComponent, selector: "dbx-selection-list-view", usesInheritance: true, ngImport: i0, template: `
     <dbx-selection-list-view-content [multiple]="multiple$ | async" [items]="items$ | async"></dbx-selection-list-view-content>
-  `, isInline: true, components: [{ type: i0.forwardRef(function () { return DbxSelectionValueListItemViewComponent; }), selector: "dbx-selection-list-view-content", inputs: ["multiple", "items"] }], pipes: { "async": i0.forwardRef(function () { return i3$1.AsyncPipe; }) } });
+  `, isInline: true, components: [{ type: i0.forwardRef(function () { return DbxSelectionValueListItemViewComponent; }), selector: "dbx-selection-list-view-content", inputs: ["multiple", "items"] }], pipes: { "async": i0.forwardRef(function () { return i3.AsyncPipe; }) } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSelectionValueListViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -3610,7 +4090,7 @@ DbxSelectionValueListItemViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVe
         <div dbx-injected-content [config]="item.config"></div>
       </mat-list-option>
     </mat-selection-list>
-  `, isInline: true, components: [{ type: i1$3.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i1$3.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, components: [{ type: i1$5.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i1$5.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSelectionValueListItemViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -3639,7 +4119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxValueListViewComponent extends AbstractDbxValueListViewDirective {
     constructor() {
         super(...arguments);
-        this.emitAllClicks$ = this.config$.pipe(map(x => x.emitAllClicks), shareReplay(1));
+        this.emitAllClicks$ = this.config$.pipe(map$1(x => x.emitAllClicks), shareReplay(1));
     }
     onClickItem(item) {
         // do not emit clicks for disabled items.
@@ -3663,7 +4143,7 @@ DbxValueListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         </a>
       </dbx-anchor>
     </mat-nav-list>
-  `, isInline: true, components: [{ type: i1$3.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, components: [{ type: i1$5.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxValueListViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -3837,11 +4317,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * Component used to style a section's header.
  */
 class DbxSectionHeaderComponent {
+    get showTitle() {
+        return Boolean(this.header || this.icon);
+    }
 }
 DbxSectionHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 DbxSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxSectionHeaderComponent, selector: ".dbx-section-header", inputs: { h: "h", header: "header", icon: "icon", hint: "hint" }, ngImport: i0, template: `
     <div class="dbx-section-header-content">
-      <ng-container [ngSwitch]="h ?? 1">
+      <ng-container [ngSwitch]="showTitle && (h ?? 1)">
         <h1 *ngSwitchCase="1" class="dbx-section-header-content-title">
           <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
         </h1>
@@ -3865,14 +4348,14 @@ DbxSectionHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
     <ng-template #headerContentTitleTemplate>
         <mat-icon *ngIf="icon">{{icon}}</mat-icon><span class="title-text">{{ header }}</span>
     </ng-template>
-  `, isInline: true, components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxSectionHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '.dbx-section-header',
                     template: `
     <div class="dbx-section-header-content">
-      <ng-container [ngSwitch]="h ?? 1">
+      <ng-container [ngSwitch]="showTitle && (h ?? 1)">
         <h1 *ngSwitchCase="1" class="dbx-section-header-content-title">
           <ng-container *ngTemplateOutlet="headerContentTitleTemplate"></ng-container>
         </h1>
@@ -3978,7 +4461,7 @@ DbxIntroActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
       <ng-content></ng-content>
     </ng-container>
   </div>
-  `, isInline: true, components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+  `, isInline: true, components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxIntroActionSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -4126,7 +4609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxStepComponent {
 }
 DbxStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxStepComponent, selector: "dbx-step", inputs: { done: "done", step: "step", text: "text", hint: "hint" }, ngImport: i0, template: "<div class=\"step-section\" [ngClass]=\"(done) ? 'done' : ''\">\n  <div class=\"step-section-header\">\n    <span class=\"step\">{{ step }}.</span>\n    <mat-icon class=\"done-check\" *ngIf=\"done\">done</mat-icon>\n    <span class=\"text\">{{ text }}</span>\n    <p *ngIf=\"hint\" class=\"hint\">{{ hint }}</p>\n  </div>\n  <div class=\"step-section-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DbxStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxStepComponent, selector: "dbx-step", inputs: { done: "done", step: "step", text: "text", hint: "hint" }, ngImport: i0, template: "<div class=\"step-section\" [ngClass]=\"(done) ? 'done' : ''\">\n  <div class=\"step-section-header\">\n    <span class=\"step\">{{ step }}.</span>\n    <mat-icon class=\"done-check\" *ngIf=\"done\">done</mat-icon>\n    <span class=\"text\">{{ text }}</span>\n    <p *ngIf=\"hint\" class=\"hint\">{{ hint }}</p>\n  </div>\n  <div class=\"step-section-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-step', template: "<div class=\"step-section\" [ngClass]=\"(done) ? 'done' : ''\">\n  <div class=\"step-section-header\">\n    <span class=\"step\">{{ step }}.</span>\n    <mat-icon class=\"done-check\" *ngIf=\"done\">done</mat-icon>\n    <span class=\"text\">{{ text }}</span>\n    <p *ngIf=\"hint\" class=\"hint\">{{ hint }}</p>\n  </div>\n  <div class=\"step-section-content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
@@ -4180,6 +4663,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }] });
 
+/**
+ * Icon spacer directive.
+ */
+class DbxIconSpacerDirective {
+}
+DbxIconSpacerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxIconSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DbxIconSpacerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxIconSpacerDirective, selector: "dbx-icon-spacer,dbxIconSpacer", host: { classAttribute: "dbx-icon-spacer d-inline" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxIconSpacerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dbx-icon-spacer,dbxIconSpacer',
+                    host: {
+                        class: 'dbx-icon-spacer d-inline'
+                    }
+                }]
+        }] });
+
 class DbxLabelComponent {
 }
 DbxLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4202,13 +4702,13 @@ class DbxLinkifyComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
         this._text = new BehaviorSubject('');
-        this.linkifiedText$ = this._text.pipe(distinctUntilChanged$1(), map$1(x => linkifyStr(x, {
+        this.linkifiedText$ = this._text.pipe(distinctUntilChanged$1(), map(x => linkifyStr(x, {
             defaultProtocol: 'https',
             target: {
                 url: '_blank'
             }
         })), shareReplay$1(1));
-        this.linkifiedBody$ = this.linkifiedText$.pipe(map$1(x => {
+        this.linkifiedBody$ = this.linkifiedText$.pipe(map(x => {
             return this.sanitizer.bypassSecurityTrustHtml(x);
         }), shareReplay$1(1));
     }
@@ -4222,15 +4722,15 @@ class DbxLinkifyComponent {
         this._text.next(text);
     }
 }
-DbxLinkifyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLinkifyComponent, deps: [{ token: i1$8.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-DbxLinkifyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxLinkifyComponent, selector: "dbx-linkify", inputs: { text: "text" }, ngImport: i0, template: `<span class="dbx-linkify" [innerHTML]="linkifiedBody$ | async"></span>`, isInline: true, pipes: { "async": i3$1.AsyncPipe } });
+DbxLinkifyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLinkifyComponent, deps: [{ token: i1$9.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+DbxLinkifyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxLinkifyComponent, selector: "dbx-linkify", inputs: { text: "text" }, ngImport: i0, template: `<span class="dbx-linkify" [innerHTML]="linkifiedBody$ | async"></span>`, isInline: true, pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxLinkifyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-linkify',
                     template: `<span class="dbx-linkify" [innerHTML]="linkifiedBody$ | async"></span>`
                 }]
-        }], ctorParameters: function () { return [{ type: i1$8.DomSanitizer }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: i1$9.DomSanitizer }]; }, propDecorators: { text: [{
                 type: Input
             }] } });
 
@@ -4303,7 +4803,7 @@ DbxTextChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       {{chip.text}}
     </mat-chip>
   </mat-chip-list>
-  `, isInline: true, components: [{ type: i1$9.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+  `, isInline: true, components: [{ type: i1$a.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$a.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTextChipsComponent, decorators: [{
             type: Component,
             args: [{
@@ -4346,7 +4846,8 @@ DbxTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         DbxLabelComponent,
         DbxLinkifyComponent,
         DbxOkComponent,
-        DbxTextChipsComponent], imports: [CommonModule,
+        DbxTextChipsComponent,
+        DbxIconSpacerDirective], imports: [CommonModule,
         MatChipsModule,
         MatTooltipModule,
         MatIconModule], exports: [DbxNoteComponent,
@@ -4357,7 +4858,8 @@ DbxTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         DbxLabelComponent,
         DbxLinkifyComponent,
         DbxOkComponent,
-        DbxTextChipsComponent] });
+        DbxTextChipsComponent,
+        DbxIconSpacerDirective] });
 DbxTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxTextModule, imports: [[
             CommonModule,
             MatChipsModule,
@@ -4382,7 +4884,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         DbxLabelComponent,
                         DbxLinkifyComponent,
                         DbxOkComponent,
-                        DbxTextChipsComponent
+                        DbxTextChipsComponent,
+                        DbxIconSpacerDirective
                     ],
                     exports: [
                         DbxNoteComponent,
@@ -4393,7 +4896,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         DbxLabelComponent,
                         DbxLinkifyComponent,
                         DbxOkComponent,
-                        DbxTextChipsComponent
+                        DbxTextChipsComponent,
+                        DbxIconSpacerDirective
                     ],
                 }]
         }] });
@@ -4498,7 +5002,7 @@ class DbxPopoverCoordinatorComponent {
     constructor(service, popover) {
         this.service = service;
         this.popover = popover;
-        this.isPopoverForKey$ = this.service.popovers$.pipe(map$1(x => x.get(this.popover.key) === this.popover), shareReplay$1(1));
+        this.isPopoverForKey$ = this.service.popovers$.pipe(map(x => x.get(this.popover.key) === this.popover), shareReplay$1(1));
         this.show$ = this.isPopoverForKey$.pipe(delay$1(0));
     }
     ngOnInit() {
@@ -4513,7 +5017,7 @@ DbxPopoverCoordinatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
   <ng-container *ngIf="show$ | async">
     <ng-content></ng-content>
   </ng-container>
-  `, isInline: true, directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverCoordinatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -4588,8 +5092,8 @@ class DbxPopoverComponent extends AbstractTransitionWatcherDirective {
         this._startedClosing = false;
         this._closing = new Subject();
         this._triggerCloseKeys = [];
-        this.isClosing$ = this._closing.pipe(first$1(), map$1(x => true), startWith$1(false), shareReplay$1(1));
-        this.closing$ = this.isClosing$.pipe(filter$1(x => x));
+        this.isClosing$ = this._closing.pipe(first$1(), map(x => true), startWith$1(false), shareReplay$1(1));
+        this.closing$ = this.isClosing$.pipe(filter(x => x));
         // Override Close to properly signal to listeners when a close is occuring.
         const originalClose = this.popoverRef.close;
         this.popoverRef.close = (x) => {
@@ -4658,7 +5162,7 @@ class DbxPopoverComponent extends AbstractTransitionWatcherDirective {
         this.close();
     }
 }
-DbxPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverComponent, deps: [{ token: i1$a.NgPopoverRef }, { token: CompactContextStore }, { token: i1.DbxRouterTransitionService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DbxPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverComponent, deps: [{ token: i1$b.NgPopoverRef }, { token: CompactContextStore }, { token: i1$2.DbxRouterTransitionService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 DbxPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxPopoverComponent, selector: "ng-component", providers: [{
             provide: DbxPopoverController,
             useExisting: DbxPopoverComponent
@@ -4668,7 +5172,7 @@ DbxPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
   <dbx-popover-coordinator (dbxWindowKeyDownListener)="handleKeydown($event)" [appWindowKeyDownFilter]="triggerCloseKeys">
     <div dbx-style class="dbx-popover-component" dbx-injected-content [config]="contentConfig"></div>
   </dbx-popover-coordinator>
-  `, isInline: true, components: [{ type: DbxPopoverCoordinatorComponent, selector: "dbx-popover-coordinator" }, { type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["appWindowKeyDownEnabled", "appWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }, { type: DbxStyleDirective, selector: "dbx-style, [dbx-style], .dbx-style" }] });
+  `, isInline: true, components: [{ type: DbxPopoverCoordinatorComponent, selector: "dbx-popover-coordinator" }, { type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: DbxWindowKeyDownListenerDirective, selector: "[dbxWindowKeyDownListener]", inputs: ["appWindowKeyDownEnabled", "appWindowKeyDownFilter"], outputs: ["dbxWindowKeyDownListener"] }, { type: DbxStyleDirective, selector: "dbx-style, [dbx-style], .dbx-style" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverComponent, decorators: [{
             type: Component,
             args: [{
@@ -4684,7 +5188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             provide: CompactContextStore
                         }]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$a.NgPopoverRef }, { type: CompactContextStore }, { type: i1.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: i1$b.NgPopoverRef }, { type: CompactContextStore }, { type: i1$2.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
 
 /**
  * Used for displaying a popover.
@@ -4719,11 +5223,11 @@ class DbxPopoverService {
         });
     }
 }
-DbxPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverService, deps: [{ token: i1$b.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverService, deps: [{ token: i1$c.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 DbxPopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$b.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$c.Overlay }, { type: i0.Injector }]; } });
 
 /**
  * Abstract popover directive.
@@ -4770,7 +5274,7 @@ DbxPopoverContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
       <ng-content></ng-content>
     </div>
   </div>
-`, isInline: true, directives: [{ type: i1$6.ResizedDirective, selector: "[resized]", outputs: ["resized"] }], pipes: { "async": i3$1.AsyncPipe } });
+`, isInline: true, directives: [{ type: i1$7.ResizedDirective, selector: "[resized]", outputs: ["resized"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -4806,7 +5310,7 @@ DbxPopoverHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
     </div>
   </div>
   <mat-divider></mat-divider>
-  `, isInline: true, components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -4883,7 +5387,7 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
         this.showSwitchButtons = Boolean(this.config.customFilterComponentClass && this.config.presetFilterComponentClass);
         this._showPreset = new BehaviorSubject(false);
         this.showPreset$ = this._showPreset.asObservable();
-        this.config$ = this._showPreset.pipe(map((showPreset) => {
+        this.config$ = this._showPreset.pipe(map$1((showPreset) => {
             const { connector, initialFilterObs, customFilterComponentClass, presetFilterComponentClass } = this.config;
             let componentClass;
             if (showPreset) {
@@ -4945,7 +5449,7 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
     }
 }
 DbxFilterPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFilterPopoverComponent, deps: [{ token: DbxPopoverComponent }], target: i0.ɵɵFactoryTarget.Component });
-DbxFilterPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFilterPopoverComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header icon=\"filter\" header=\"Filter\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injected-content [config]=\"config$ | async\"></dbx-injected-content>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n", components: [{ type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxFilterPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFilterPopoverComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header icon=\"filter\" header=\"Filter\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injected-content [config]=\"config$ | async\"></dbx-injected-content>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n", components: [{ type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFilterPopoverComponent, decorators: [{
             type: Component,
             args: [{ template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header icon=\"filter\" header=\"Filter\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injected-content [config]=\"config$ | async\"></dbx-injected-content>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n" }]
@@ -4994,7 +5498,7 @@ DbxFilterPopoverButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
     <button #button mat-icon-button (click)="showFilterPopover()" matTooltip="Filter" matTooltipPosition="above">
       <mat-icon>filter_list</mat-icon>
     </button>
-  `, isInline: true, components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+  `, isInline: true, components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFilterPopoverButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -5035,107 +5539,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }] }]; } });
 
 /**
- * Abstract class for showing and handling a popover ref.
- */
-class AbstractPopoverRefDirective extends AbstractSubscriptionDirective {
-    showPopover() {
-        if (!this._popoverRef) {
-            this._showPopoverRef();
-        }
-    }
-    _showPopoverRef() {
-        this._popoverRef = this._makePopoverRef();
-        this._afterOpened(this._popoverRef);
-        this.sub = this._popoverRef.afterClosed$.subscribe((x) => {
-            this._afterClosed(x);
-            this._popoverRef = undefined;
-        });
-    }
-    _afterOpened(popoverRef) {
-        // Do nothing.
-    }
-    _afterClosed(value) {
-        // Do nothing.
-    }
-}
-AbstractPopoverRefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractPopoverRefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractPopoverRefDirective, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefDirective, decorators: [{
-            type: Directive
-        }] });
-/**
- * {@link AbstractPopoverRefDirective} extension that includes open/closed events.
- */
-class AbstractPopoverRefWithEventsDirective extends AbstractPopoverRefDirective {
-    constructor() {
-        super(...arguments);
-        this.popoverOpened = new EventEmitter();
-        this.popoverClosed = new EventEmitter();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.popoverClosed.complete();
-        this.popoverOpened.complete();
-    }
-    _afterOpened(popoverRef) {
-        this.popoverOpened.next(popoverRef);
-    }
-    _afterClosed(event) {
-        this.popoverClosed.next(event);
-    }
-}
-AbstractPopoverRefWithEventsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefWithEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractPopoverRefWithEventsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractPopoverRefWithEventsDirective, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefWithEventsDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { popoverOpened: [{
-                type: Output
-            }], popoverClosed: [{
-                type: Output
-            }] } });
-
-/**
- * Action directive that is used to trigger/display a popover,
- * then watches that popover for a value.
- *
- * The value is passed to the isModified function (ifProvided), and if that returns true it will
+ * Action directive that is used to trigger/display a popover, then watches that popover for a value.
  */
-class DbxPopoverActionDirective extends AbstractPopoverRefWithEventsDirective {
+class DbxActionPopoverDirective extends AbstractDbxActionValueOnTriggerDirective {
     constructor(elementRef, source) {
-        super();
+        super(source, () => this._getDataFromPopover());
         this.elementRef = elementRef;
-        this.source = source;
-        this._popoverValue = new BehaviorSubject(undefined);
-        this._triggeredSub = new SubscriptionObject();
-        this._isModifiedSub = new SubscriptionObject();
     }
-    ngOnInit() {
-        // Used for triggering isModified on the action.
-        this._isModifiedSub.subscription = this._popoverValue.pipe(filterMaybe(), switchMap$1((value) => {
-            let isModifiedObs;
-            if (this.appPopoverActionModified) {
-                isModifiedObs = this.appPopoverActionModified(value).pipe(first$1());
-            }
-            else {
-                isModifiedObs = of(true); // Considered modified
-            }
-            return isModifiedObs;
-        })).subscribe((isModified) => {
-            this.source.setIsModified(isModified);
-        });
-        // Ready the value after the source is triggered.
-        this._triggeredSub.subscription = this.source.triggered$.pipe(switchMap$1(() => {
-            return this._popoverValue.pipe(filterMaybe(), first$1());
-        })).subscribe((x) => {
-            this.source.readyValue(x);
-        });
+    set dbxActionPopoverModified(isModifiedFunction) {
+        this.isModifiedFunction = isModifiedFunction;
     }
-    ngOnDestroy() {
-        this.source.lockSet.onNextUnlock(() => {
-            super.ngOnDestroy();
-            this._triggeredSub.destroy();
-            this._popoverValue.complete();
-        });
+    _getDataFromPopover() {
+        return this._makePopoverRef().afterClosed$.pipe(first(), map$1(x => x.data));
     }
     _makePopoverRef() {
         const origin = this.elementRef;
@@ -5146,52 +5561,22 @@ class DbxPopoverActionDirective extends AbstractPopoverRefWithEventsDirective {
             origin
         });
     }
-    _afterClosed(event) {
-        super._afterClosed(event);
-        const { data } = event;
-        if (data != null) {
-            this._popoverValue.next(data);
-        }
-    }
 }
-DbxPopoverActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverActionDirective, deps: [{ token: i0.ElementRef }, { token: i1.ActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
-DbxPopoverActionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxPopoverActionDirective, selector: "[dbxPopoverAction]", inputs: { fn: ["dbxPopoverAction", "fn"], appPopoverActionModified: "appPopoverActionModified" }, exportAs: ["popoverAction"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverActionDirective, decorators: [{
+DbxActionPopoverDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionPopoverDirective, deps: [{ token: i0.ElementRef }, { token: i1$2.DbxActionContextStoreSourceInstance }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionPopoverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionPopoverDirective, selector: "[dbxActionPopover]", inputs: { fn: ["dbxActionPopover", "fn"], dbxActionPopoverModified: "dbxActionPopoverModified" }, exportAs: ["dbxActionPopover"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionPopoverDirective, decorators: [{
             type: Directive,
             args: [{
-                    exportAs: 'popoverAction',
-                    selector: '[dbxPopoverAction]'
+                    exportAs: 'dbxActionPopover',
+                    selector: '[dbxActionPopover]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ActionContextStoreSourceInstance }]; }, propDecorators: { fn: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.DbxActionContextStoreSourceInstance }]; }, propDecorators: { fn: [{
                 type: Input,
-                args: ['dbxPopoverAction']
-            }], appPopoverActionModified: [{
+                args: ['dbxActionPopover']
+            }], dbxActionPopoverModified: [{
                 type: Input
             }] } });
 
-/**
- * Action directive that is used to link an DbxButton to an DbxPopoverActionDirective.
- */
-class DbxPopoverActionButtonDirective extends DbxActionButtonDirective {
-    constructor(button, source, ngZone, appPopoverActionDirective) {
-        super(button, source, ngZone);
-        this.appPopoverActionDirective = appPopoverActionDirective;
-    }
-    _buttonClicked() {
-        this.appPopoverActionDirective.showPopover();
-    }
-}
-DbxPopoverActionButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverActionButtonDirective, deps: [{ token: i1.DbxButtonDirective, host: true }, { token: i1.ActionContextStoreSourceInstance }, { token: i0.NgZone }, { token: DbxPopoverActionDirective }], target: i0.ɵɵFactoryTarget.Directive });
-DbxPopoverActionButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxPopoverActionButtonDirective, selector: "[dbxPopoverActionButton]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverActionButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dbxPopoverActionButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i1.DbxButtonDirective, decorators: [{
-                    type: Host
-                }] }, { type: i1.ActionContextStoreSourceInstance }, { type: i0.NgZone }, { type: DbxPopoverActionDirective }]; } });
-
 class DbxKeypressModule {
 }
 DbxKeypressModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxKeypressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -5233,14 +5618,14 @@ class DbxActionKeyTriggerDirective {
         }
     }
 }
-DbxActionKeyTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionKeyTriggerDirective, deps: [{ token: i1.ActionContextStoreSourceInstance, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionKeyTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionKeyTriggerDirective, deps: [{ token: i1$2.DbxActionContextStoreSourceInstance, host: true }], target: i0.ɵɵFactoryTarget.Directive });
 DbxActionKeyTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionKeyTriggerDirective, selector: "[dbxActionKeyTrigger]", inputs: { inputKey: ["dbxActionKeyTrigger", "inputKey"] }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionKeyTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionKeyTrigger]',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ActionContextStoreSourceInstance, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DbxActionContextStoreSourceInstance, decorators: [{
                     type: Host
                 }] }]; }, propDecorators: { inputKey: [{
                 type: Input,
@@ -5250,98 +5635,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 args: ['document:keyup', ['$event']]
             }] } });
 
-/**
- * Component for a snackbar that contains an action.
- */
-class DbxActionSnackbarComponent {
-    constructor(snackbar, data) {
-        this.snackbar = snackbar;
-        this.data = data;
-        this.complete$ = this.actionSourceInstance.isSuccess$;
-        this.snackbarStatusClass$ = this.actionSourceInstance.actionState$.pipe(map$1((x) => {
-            let classes = 'dbx-action-snackbar-';
-            switch (x) {
-                case ActionState.Rejected:
-                    classes += 'error';
-                    break;
-                case ActionState.Success:
-                    classes += 'success';
-                    break;
-                default:
-                    classes += 'idle';
-                    break;
-            }
-            return classes;
-        }), distinctUntilChanged(), shareReplay(1));
-        this.dismissEarly = () => {
-            this.snackbar._dismissAfter(ms('3s'));
-        };
-        this.dismiss = () => {
-            this.snackbar.dismiss();
-        };
-        if (!data.actionSource) {
-            throw new Error('No action was provided to ActionSnackbar.');
-        }
-    }
-    get message() {
-        return this.data.message;
-    }
-    get action() {
-        return this.data.action;
-    }
-    get actionSourceInstance() {
-        return this.data.actionSource;
-    }
-}
-DbxActionSnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarComponent, deps: [{ token: i1$c.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DbxActionSnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionSnackbarComponent, selector: "ng-component", ngImport: i0, template: `
-    <div class="dbx-action-snackbar" [ngClass]="(snackbarStatusClass$ | async)!">
-      <ng-container [ngSwitch]="complete$ | async">
-        <ng-container *ngSwitchCase="true">
-          <div class="spacer"></div>
-          <dbx-button (buttonClick)="dismiss()" color="accent" icon="done" text="Success"></dbx-button>
-        </ng-container>
-        <ng-container *ngSwitchCase="false">
-          <span>{{ message }}</span>
-          <div class="spacer"></div>
-          <dbx-action dbxActionValue [dbxActionSource]="actionSourceInstance" [dbxActionSuccess]="dismissEarly">
-            <dbx-button dbxActionButton color="warn" [text]="action"></dbx-button>
-          </dbx-action>
-          <dbx-button-spacer></dbx-button-spacer>
-          <dbx-button (buttonClick)="dismiss()" color="accent" icon="close"></dbx-button>
-        </ng-container>
-      </ng-container>
-    </div>
-  `, isInline: true, components: [{ type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color"] }, { type: DbxButtonSpacerComponent, selector: "dbx-button-spacer" }], directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action"] }, { type: i1.DbxActionValueDirective, selector: "[dbxActionValue]", inputs: ["dbxActionValue"] }, { type: i1.DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { type: i1.DbxActionSuccessDirective, selector: "[dbxActionSuccess]", inputs: ["dbxActionSuccess"] }], pipes: { "async": i3$1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-    <div class="dbx-action-snackbar" [ngClass]="(snackbarStatusClass$ | async)!">
-      <ng-container [ngSwitch]="complete$ | async">
-        <ng-container *ngSwitchCase="true">
-          <div class="spacer"></div>
-          <dbx-button (buttonClick)="dismiss()" color="accent" icon="done" text="Success"></dbx-button>
-        </ng-container>
-        <ng-container *ngSwitchCase="false">
-          <span>{{ message }}</span>
-          <div class="spacer"></div>
-          <dbx-action dbxActionValue [dbxActionSource]="actionSourceInstance" [dbxActionSuccess]="dismissEarly">
-            <dbx-button dbxActionButton color="warn" [text]="action"></dbx-button>
-          </dbx-action>
-          <dbx-button-spacer></dbx-button-spacer>
-          <dbx-button (buttonClick)="dismiss()" color="accent" icon="close"></dbx-button>
-        </ng-container>
-      </ng-container>
-    </div>
-  `,
-                    // TODO: styleUrls: ['./action.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1$c.MatSnackBarRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_SNACK_BAR_DATA]
-                }] }]; } });
-
 class DbxPromptConfirm {
 }
 function ProvideDbxPromptConfirm(sourceType) {
@@ -5418,7 +5711,7 @@ class DbxPromptConfirmComponent {
     }
 }
 DbxPromptConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxPromptConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: { config: "config" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "<dbx-prompt [header]=\"config.title\" [prompt]=\"config.prompt\">\n  <ng-content></ng-content>\n  <button mat-stroked-button (click)=\"onConfirm()\">{{ config.confirmText || 'Confirm' }}</button>\n  <dbx-button-spacer></dbx-button-spacer>\n  <button mat-stroked-button color=\"warn\" (click)=\"onCancel()\">{{ config.cancelText || 'Cancel' }}</button>\n</dbx-prompt>\n", components: [{ type: DbxPromptComponent, selector: "dbx-prompt", inputs: ["header", "prompt"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: DbxButtonSpacerComponent, selector: "dbx-button-spacer" }] });
+DbxPromptConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: { config: "config" }, outputs: { confirm: "confirm", cancel: "cancel" }, ngImport: i0, template: "<dbx-prompt [header]=\"config.title\" [prompt]=\"config.prompt\">\n  <ng-content></ng-content>\n  <button mat-stroked-button (click)=\"onConfirm()\">{{ config.confirmText || 'Confirm' }}</button>\n  <dbx-button-spacer></dbx-button-spacer>\n  <button mat-stroked-button color=\"warn\" (click)=\"onCancel()\">{{ config.cancelText || 'Cancel' }}</button>\n</dbx-prompt>\n", components: [{ type: DbxPromptComponent, selector: "dbx-prompt", inputs: ["header", "prompt"] }, { type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,dbxButtonSpacer" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-prompt-confirm', template: "<dbx-prompt [header]=\"config.title\" [prompt]=\"config.prompt\">\n  <ng-content></ng-content>\n  <button mat-stroked-button (click)=\"onConfirm()\">{{ config.confirmText || 'Confirm' }}</button>\n  <dbx-button-spacer></dbx-button-spacer>\n  <button mat-stroked-button color=\"warn\" (click)=\"onCancel()\">{{ config.cancelText || 'Cancel' }}</button>\n</dbx-prompt>\n" }]
@@ -5461,7 +5754,7 @@ DbxPromptConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         <dbx-injected-content [config]="injectedConfig"></dbx-injected-content>
       </dbx-prompt-confirm>
     </dbx-dialog-content>
-  `, isInline: true, components: [{ type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: DbxDialogContentDirective, selector: "dbx-dialog-content,.dbx-dialog-content", inputs: ["width"] }] });
+  `, isInline: true, components: [{ type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }], directives: [{ type: DbxDialogContentDirective, selector: "dbx-dialog-content,.dbx-dialog-content", inputs: ["width"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -5500,11 +5793,11 @@ class AbstractPromptConfirmDirective {
         return result;
     }
 }
-AbstractPromptConfirmDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPromptConfirmDirective, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractPromptConfirmDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPromptConfirmDirective, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
 AbstractPromptConfirmDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractPromptConfirmDirective, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPromptConfirmDirective, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; } });
 // MARK: Directive
 /**
  * Directive that shows a confirmation screen.
@@ -5514,7 +5807,7 @@ class DbxPromptConfirmDirective extends AbstractPromptConfirmDirective {
         super(dialog);
     }
 }
-DbxPromptConfirmDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmDirective, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+DbxPromptConfirmDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmDirective, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
 DbxPromptConfirmDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxPromptConfirmDirective, selector: "[dbxPromptConfirm]", inputs: { config: ["dbxPromptConfirm", "config"] }, providers: ProvideDbxPromptConfirm(DbxPromptConfirmDirective), usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmDirective, decorators: [{
             type: Directive,
@@ -5522,7 +5815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                     selector: '[dbxPromptConfirm]',
                     providers: ProvideDbxPromptConfirm(DbxPromptConfirmDirective)
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; }, propDecorators: { config: [{
                 type: Input,
                 args: ['dbxPromptConfirm']
             }] } });
@@ -5549,7 +5842,7 @@ class DbxActionConfirmDirective extends AbstractPromptConfirmDirective {
     }
     _handleDialogResult(result) {
         if (result) {
-            this.source.readyValue(null);
+            this.source.readyValue(this.config?.readyValue);
         }
         else {
             this.source.reject(undefined);
@@ -5557,16 +5850,16 @@ class DbxActionConfirmDirective extends AbstractPromptConfirmDirective {
         return result;
     }
 }
-DbxActionConfirmDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionConfirmDirective, deps: [{ token: i1.ActionContextStoreSourceInstance, host: true }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionConfirmDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionConfirmDirective, deps: [{ token: i1$2.DbxActionContextStoreSourceInstance, host: true }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
 DbxActionConfirmDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionConfirmDirective, selector: "[dbxActionConfirm]", inputs: { config: ["dbxActionConfirm", "config"] }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionConfirmDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionConfirm]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ActionContextStoreSourceInstance, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DbxActionContextStoreSourceInstance, decorators: [{
                     type: Host
-                }] }, { type: i1$1.MatDialog }]; }, propDecorators: { config: [{
+                }] }, { type: i1$3.MatDialog }]; }, propDecorators: { config: [{
                 type: Input,
                 args: ['dbxActionConfirm']
             }] } });
@@ -5627,21 +5920,21 @@ class DbxPromptConfirmButtonDirective {
         this.appButton = appButton;
         this.prompt = prompt;
         this.interceptButtonClick = () => {
-            return this.prompt.showDialog().pipe(map$1(x => Boolean(x)));
+            return this.prompt.showDialog().pipe(map(x => Boolean(x)));
         };
     }
     ngOnInit() {
         this.appButton.setButtonInterceptor(this);
     }
 }
-DbxPromptConfirmButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmButtonDirective, deps: [{ token: i1.DbxButtonDirective, host: true }, { token: DbxPromptConfirm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DbxPromptConfirmButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmButtonDirective, deps: [{ token: i1$2.DbxButtonDirective, host: true }, { token: DbxPromptConfirm, host: true }], target: i0.ɵɵFactoryTarget.Directive });
 DbxPromptConfirmButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxPromptConfirmButtonDirective, selector: "[dbxPromptConfirmButton]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPromptConfirmButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxPromptConfirmButton]',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DbxButtonDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DbxButtonDirective, decorators: [{
                     type: Host
                 }] }, { type: DbxPromptConfirm, decorators: [{
                     type: Host
@@ -5719,7 +6012,6 @@ class DbxActionModule {
 }
 DbxActionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DbxActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionModule, declarations: [DbxActionKeyTriggerDirective,
-        DbxActionSnackbarComponent,
         DbxActionConfirmDirective], imports: [CommonModule,
         DbxCoreActionModule,
         DbxButtonModule,
@@ -5728,7 +6020,6 @@ DbxActionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         MatButtonModule,
         DbxPromptModule], exports: [DbxCoreActionModule,
         DbxActionKeyTriggerDirective,
-        DbxActionSnackbarComponent,
         DbxActionConfirmDirective] });
 DbxActionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionModule, imports: [[
             CommonModule,
@@ -5753,13 +6044,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                     ],
                     declarations: [
                         DbxActionKeyTriggerDirective,
-                        DbxActionSnackbarComponent,
                         DbxActionConfirmDirective,
                     ],
                     exports: [
                         DbxCoreActionModule,
                         DbxActionKeyTriggerDirective,
-                        DbxActionSnackbarComponent,
                         DbxActionConfirmDirective,
                     ]
                 }]
@@ -5776,8 +6065,7 @@ class DbxPopoverInteractionModule {
     }
 }
 DbxPopoverInteractionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxPopoverInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverInteractionModule, declarations: [DbxPopoverActionButtonDirective,
-        DbxPopoverActionDirective,
+DbxPopoverInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverInteractionModule, declarations: [DbxActionPopoverDirective,
         DbxPopoverComponent,
         DbxPopoverCoordinatorComponent,
         DbxPopoverContentComponent,
@@ -5794,8 +6082,7 @@ DbxPopoverInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0
         DbxStyleLayoutModule,
         DbxInjectedComponentModule,
         NgOverlayContainerModule,
-        AngularResizeEventModule], exports: [DbxPopoverActionButtonDirective,
-        DbxPopoverActionDirective,
+        AngularResizeEventModule], exports: [DbxActionPopoverDirective,
         DbxPopoverContentComponent,
         DbxPopoverControlsDirective,
         DbxPopoverHeaderComponent,
@@ -5834,8 +6121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         AngularResizeEventModule
                     ],
                     declarations: [
-                        DbxPopoverActionButtonDirective,
-                        DbxPopoverActionDirective,
+                        DbxActionPopoverDirective,
                         DbxPopoverComponent,
                         DbxPopoverCoordinatorComponent,
                         DbxPopoverContentComponent,
@@ -5844,8 +6130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         DbxPopoverScrollContentComponent
                     ],
                     exports: [
-                        DbxPopoverActionButtonDirective,
-                        DbxPopoverActionDirective,
+                        DbxActionPopoverDirective,
                         DbxPopoverContentComponent,
                         DbxPopoverControlsDirective,
                         DbxPopoverHeaderComponent,
@@ -5873,7 +6158,7 @@ class DbxFilterWrapperComponent {
     }
 }
 DbxFilterWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFilterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxFilterWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFilterWrapperComponent, selector: "dbx-filter-wrapper", inputs: { modified: "modified" }, outputs: { applyFilter: "applyFilter", resetFilter: "resetFilter" }, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div fxLayout=\"row\">\n    <button mat-raised-button (click)=\"filterClicked()\">Apply Filter</button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetClicked()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }] });
+DbxFilterWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxFilterWrapperComponent, selector: "dbx-filter-wrapper", inputs: { modified: "modified" }, outputs: { applyFilter: "applyFilter", resetFilter: "resetFilter" }, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div fxLayout=\"row\">\n    <button mat-raised-button (click)=\"filterClicked()\">Apply Filter</button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetClicked()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxFilterWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-filter-wrapper', template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div fxLayout=\"row\">\n    <button mat-raised-button (click)=\"filterClicked()\">Apply Filter</button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetClicked()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n" }]
@@ -5936,6 +6221,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }] });
 
+/**
+ * Abstract class for showing and handling a popover ref.
+ */
+class AbstractPopoverRefDirective extends AbstractSubscriptionDirective {
+    showPopover() {
+        if (!this._popoverRef) {
+            this._showPopoverRef();
+        }
+    }
+    _showPopoverRef() {
+        this._popoverRef = this._makePopoverRef();
+        this._afterOpened(this._popoverRef);
+        this.sub = this._popoverRef.afterClosed$.subscribe((x) => {
+            this._afterClosed(x);
+            this._popoverRef = undefined;
+        });
+    }
+    _afterOpened(popoverRef) {
+        // Do nothing.
+    }
+    _afterClosed(value) {
+        // Do nothing.
+    }
+}
+AbstractPopoverRefDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractPopoverRefDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractPopoverRefDirective, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefDirective, decorators: [{
+            type: Directive
+        }] });
+/**
+ * {@link AbstractPopoverRefDirective} extension that includes open/closed events.
+ */
+class AbstractPopoverRefWithEventsDirective extends AbstractPopoverRefDirective {
+    constructor() {
+        super(...arguments);
+        this.popoverOpened = new EventEmitter();
+        this.popoverClosed = new EventEmitter();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.popoverClosed.complete();
+        this.popoverOpened.complete();
+    }
+    _afterOpened(popoverRef) {
+        this.popoverOpened.next(popoverRef);
+    }
+    _afterClosed(event) {
+        this.popoverClosed.next(event);
+    }
+}
+AbstractPopoverRefWithEventsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefWithEventsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractPopoverRefWithEventsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: AbstractPopoverRefWithEventsDirective, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: AbstractPopoverRefWithEventsDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { popoverOpened: [{
+                type: Output
+            }], popoverClosed: [{
+                type: Output
+            }] } });
+
 class PopupGlobalPositionStrategy extends GlobalPositionStrategy {
     constructor(position = 'bottom_right', offset) {
         super();
@@ -6029,7 +6374,7 @@ class DbxPopupCoordinatorComponent {
     constructor(service, popup) {
         this.service = service;
         this.popup = popup;
-        this.isPopupForKey$ = this.service.popups$.pipe(map$1(x => x.get(this.popup.key) === this.popup), shareReplay$1(1));
+        this.isPopupForKey$ = this.service.popups$.pipe(map(x => x.get(this.popup.key) === this.popup), shareReplay$1(1));
         this.show$ = this.isPopupForKey$.pipe(delay$1(0));
     }
     ngOnInit() {
@@ -6044,7 +6389,7 @@ DbxPopupCoordinatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
   <ng-container *ngIf="show$ | async">
     <ng-content></ng-content>
   </ng-container>
-  `, isInline: true, directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupCoordinatorComponent, decorators: [{
             type: Component,
             args: [{
@@ -6075,8 +6420,8 @@ class DbxPopupComponent extends AbstractTransitionWatcherDirective {
             init: this.config.init ? ((instance) => this.config.init(instance, this)) : undefined
         };
         this.closing = new Subject();
-        this.isClosing$ = this.closing.pipe(first$1(), map$1(x => true), startWith$1(false), shareReplay$1(1));
-        this.closing$ = this.isClosing$.pipe(filter$1(x => x));
+        this.isClosing$ = this.closing.pipe(first$1(), map(x => true), startWith$1(false), shareReplay$1(1));
+        this.closing$ = this.isClosing$.pipe(filter(x => x));
         this._windowState = new BehaviorSubject(DbxPopupWindowState.NORMAL);
         this.windowState$ = this._windowState.asObservable();
         this.compactContextState.setMode(CompactMode.COMPACT);
@@ -6139,7 +6484,7 @@ class DbxPopupComponent extends AbstractTransitionWatcherDirective {
         this._windowState.next(DbxPopupWindowState.FULLSCREEN);
     }
 }
-DbxPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupComponent, deps: [{ token: i1$a.NgPopoverRef }, { token: CompactContextStore }, { token: i1.DbxRouterTransitionService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+DbxPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupComponent, deps: [{ token: i1$b.NgPopoverRef }, { token: CompactContextStore }, { token: i1$2.DbxRouterTransitionService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 DbxPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: DbxPopupComponent, selector: "ng-component", providers: [{
             provide: DbxPopupController,
             useExisting: DbxPopupComponent
@@ -6149,7 +6494,7 @@ DbxPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
   <dbx-popup-coordinator>
     <div class="dbx-popup-component" dbx-injected-content [config]="contentConfig"></div>
   </dbx-popup-coordinator>
-  `, isInline: true, components: [{ type: DbxPopupCoordinatorComponent, selector: "dbx-popup-coordinator" }, { type: i1.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }] });
+  `, isInline: true, components: [{ type: DbxPopupCoordinatorComponent, selector: "dbx-popup-coordinator" }, { type: i1$2.DbxInjectedComponent, selector: "dbx-injected-content, [dbx-injected-content]", inputs: ["config", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupComponent, decorators: [{
             type: Component,
             args: [{
@@ -6165,7 +6510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             provide: CompactContextStore
                         }]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$a.NgPopoverRef }, { type: CompactContextStore }, { type: i1.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: i1$b.NgPopoverRef }, { type: CompactContextStore }, { type: i1$2.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
 
 /**
  * Abstract popup directive.
@@ -6190,7 +6535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxPopupContentComponent {
     constructor(appPopupController) {
         this.appPopupController = appPopupController;
-        this.showContent$ = this.appPopupController.windowState$.pipe(map$1(x => x !== DbxPopupWindowState.MINIMIZED));
+        this.showContent$ = this.appPopupController.windowState$.pipe(map(x => x !== DbxPopupWindowState.MINIMIZED));
     }
 }
 DbxPopupContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupContentComponent, deps: [{ token: DbxPopupController }], target: i0.ɵɵFactoryTarget.Component });
@@ -6199,7 +6544,7 @@ DbxPopupContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
     <div *ngIf="showContent$ | async" class="dbx-popup-content-container">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -6222,8 +6567,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxPopupControlButtonsComponent {
     constructor(appPopupController) {
         this.appPopupController = appPopupController;
-        this.isMinimized$ = this.appPopupController.windowState$.pipe(map$1(x => x === DbxPopupWindowState.MINIMIZED));
-        this.isFullscreen$ = this.appPopupController.windowState$.pipe(map$1(x => x === DbxPopupWindowState.FULLSCREEN));
+        this.isMinimized$ = this.appPopupController.windowState$.pipe(map(x => x === DbxPopupWindowState.MINIMIZED));
+        this.isFullscreen$ = this.appPopupController.windowState$.pipe(map(x => x === DbxPopupWindowState.FULLSCREEN));
     }
     minimizeClicked() {
         this.appPopupController.minimize();
@@ -6254,7 +6599,7 @@ DbxPopupControlButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
     </ng-container>
     <dbx-button-spacer></dbx-button-spacer>
     <dbx-button [flat]="true" icon="close" color="warn" (buttonClick)="closeClicked()"></dbx-button>
-  `, isInline: true, components: [{ type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color"] }, { type: DbxButtonSpacerComponent, selector: "dbx-button-spacer" }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i3$1.AsyncPipe } });
+  `, isInline: true, components: [{ type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color"] }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,dbxButtonSpacer" }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupControlButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -6337,11 +6682,11 @@ class DbxPopupService {
         });
     }
 }
-DbxPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupService, deps: [{ token: i1$b.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DbxPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupService, deps: [{ token: i1$c.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 DbxPopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$b.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$c.Overlay }, { type: i0.Injector }]; } });
 
 class DbxPopupInteractionModule {
     static forRoot() {
@@ -6440,6 +6785,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }]
         }] });
 
+class DbxActionSnackbarModule {
+}
+DbxActionSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxActionSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarModule, declarations: [DbxActionSnackbarComponent,
+        DbxActionSnackbarDirective], imports: [CommonModule,
+        DbxStyleLayoutModule,
+        DbxCoreActionModule,
+        DbxPromptModule,
+        DbxButtonModule,
+        DbxReadableErrorModule], exports: [DbxActionSnackbarComponent,
+        DbxActionSnackbarDirective] });
+DbxActionSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarModule, imports: [[
+            CommonModule,
+            DbxStyleLayoutModule,
+            DbxCoreActionModule,
+            DbxPromptModule,
+            DbxButtonModule,
+            DbxReadableErrorModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionSnackbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DbxStyleLayoutModule,
+                        DbxCoreActionModule,
+                        DbxPromptModule,
+                        DbxButtonModule,
+                        DbxReadableErrorModule
+                    ],
+                    declarations: [
+                        DbxActionSnackbarComponent,
+                        DbxActionSnackbarDirective
+                    ],
+                    exports: [
+                        DbxActionSnackbarComponent,
+                        DbxActionSnackbarDirective
+                    ]
+                }]
+        }] });
+
 var DbxActionTransitionSafetyDialogResult;
 (function (DbxActionTransitionSafetyDialogResult) {
     DbxActionTransitionSafetyDialogResult[DbxActionTransitionSafetyDialogResult["SUCCESS"] = 0] = "SUCCESS";
@@ -6477,7 +6863,7 @@ DbxActionUIRouterTransitionSafetyDialogComponent.ɵcmp = i0.ɵɵngDeclareCompone
         <dbx-button-spacer></dbx-button-spacer>
       </ng-container>
     </dbx-prompt-confirm>
-  `, isInline: true, components: [{ type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { type: DbxReadableErrorComponent, selector: "dbx-error", inputs: ["error"] }, { type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color"] }, { type: DbxButtonSpacerComponent, selector: "dbx-button-spacer" }], directives: [{ type: DbxActionErrorDirective, selector: "[dbxActionError]" }] });
+  `, isInline: true, components: [{ type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { type: DbxReadableErrorComponent, selector: "dbx-error", inputs: ["error"] }, { type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color"] }], directives: [{ type: DbxActionErrorDirective, selector: "[dbxActionError]" }, { type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,dbxButtonSpacer" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionUIRouterTransitionSafetyDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -6530,9 +6916,9 @@ class DbxActionTransitionSafetyDirective {
             if (isModified) {
                 return race([
                     // Watch for success to occur. At that point, close everything.
-                    this.source.success$.pipe(first$1(), map$1((x) => [true, undefined])),
-                    this._handleIsModifiedState(transition).pipe(first$1(), map$1((x) => [undefined, x]))
-                ]).pipe(map$1(([saveSuccess, handleResult]) => {
+                    this.source.success$.pipe(first$1(), map((x) => [true, undefined])),
+                    this._handleIsModifiedState(transition).pipe(first$1(), map((x) => [undefined, x]))
+                ]).pipe(map(([saveSuccess, handleResult]) => {
                     if (saveSuccess) {
                         return true;
                     }
@@ -6589,7 +6975,7 @@ class DbxActionTransitionSafetyDirective {
                 viewContainerRef: this.viewContainerRef
             });
         }
-        return this._dialogRef.afterClosed().pipe(first$1(), map$1((result = DbxActionTransitionSafetyDialogResult.STAY) => {
+        return this._dialogRef.afterClosed().pipe(first$1(), map((result = DbxActionTransitionSafetyDialogResult.STAY) => {
             // Default to Stay if the user clicks outside.
             switch (result) {
                 case DbxActionTransitionSafetyDialogResult.DISCARD:
@@ -6608,14 +6994,14 @@ class DbxActionTransitionSafetyDirective {
         this._dialogRef = undefined;
     }
 }
-DbxActionTransitionSafetyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionTransitionSafetyDirective, deps: [{ token: i1.ActionContextStoreSourceInstance }, { token: i2$3.TransitionService }, { token: i0.ViewContainerRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
+DbxActionTransitionSafetyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionTransitionSafetyDirective, deps: [{ token: i1$2.DbxActionContextStoreSourceInstance }, { token: i2$3.TransitionService }, { token: i0.ViewContainerRef }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Directive });
 DbxActionTransitionSafetyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.4", type: DbxActionTransitionSafetyDirective, selector: "[dbxActionTransitionSafety]", inputs: { inputSafetyType: ["dbxActionTransitionSafety", "inputSafetyType"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxActionTransitionSafetyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionTransitionSafety]',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ActionContextStoreSourceInstance }, { type: i2$3.TransitionService }, { type: i0.ViewContainerRef }, { type: i1$1.MatDialog }]; }, propDecorators: { inputSafetyType: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DbxActionContextStoreSourceInstance }, { type: i2$3.TransitionService }, { type: i0.ViewContainerRef }, { type: i1$3.MatDialog }]; }, propDecorators: { inputSafetyType: [{
                 type: Input,
                 args: ['dbxActionTransitionSafety']
             }] } });
@@ -6689,7 +7075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
 class DbxWebRootModule {
 }
 DbxWebRootModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxWebRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxWebRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxWebRootModule, imports: [i1$5.MatProgressButtonsModule] });
+DbxWebRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxWebRootModule, imports: [i1.MatProgressButtonsModule] });
 DbxWebRootModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxWebRootModule, imports: [[
             MatProgressButtonsModule.forRoot()
         ]] });
@@ -6706,5 +7092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxSelectionValueListViewItemComponent, AbstractDbxValueListViewDirective, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, AbstractSelectionValueListViewDirective, CompactContextStore, CompactMode, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_STATIC_LIST_DIRECTIVE_TEMPLATE, DbxActionConfirmDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionModule, DbxActionSnackbarComponent, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAnchorListModule, DbxAnchorModule, DbxAngularRouterSegueAnchorComponent, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerComponent, DbxCardBoxComponent, DbxCardBoxContainerComponent, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxDialogContentDirective, DbxDialogInteractionModule, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHintComponent, DbxIconItemComponent, DbxInteractionModule, DbxIntroActionSectionComponent, DbxItemLayoutModule, DbxKeypressModule, DbxLabelComponent, DbxLayoutModule, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListInternalContentDirective, DbxListLayoutModule, DbxListView, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxNavbarComponent, DbxNavbarModule, DbxNoteComponent, DbxNoticeComponent, DbxOkComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPopoverActionButtonDirective, DbxPopoverActionDirective, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionModule, DbxPopoverScrollContentComponent, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPromptBoxComponent, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptConfirmTypes, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorComponent, DbxReadableErrorModule, DbxRouterLayoutModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxScreenModule, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListItemViewComponent, DbxSelectionValueListViewComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavModule, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepComponent, DbxStepLayoutModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnLayoutModule, DbxTwoColumnsBackDirective, DbxTwoColumnsColumnHeadComponent, DbxTwoColumnsComponent, DbxTwoColumnsFullLeftDirective, DbxTwoColumnsRightComponent, DbxTwoColumnsSrefDirective, DbxUIRouterSegueAnchorComponent, DbxValueListViewComponent, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebRootModule, DbxWebUIRouterModule, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, ProvideDbxListView, ProvideDbxPromptConfirm, ProvideTwoColumnsContext, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TwoColumnsContextStore, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, mapCompactModeObs, mapItemValuesToValueListItemConfig, mapValuesToValuesListItemConfigObs, screenMediaWidthTypeIsActive };
+export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxSelectionValueListViewItemComponent, AbstractDbxValueListViewDirective, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, AbstractSelectionValueListViewDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_STATIC_LIST_DIRECTIVE_TEMPLATE, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAnchorListModule, DbxAnchorModule, DbxAngularRouterSegueAnchorComponent, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerComponent, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxDialogContentDirective, DbxDialogInteractionModule, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHintComponent, DbxIconItemComponent, DbxIconSpacerDirective, DbxInteractionModule, DbxIntroActionSectionComponent, DbxItemLayoutModule, DbxKeypressModule, DbxLabelComponent, DbxLayoutModule, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListInternalContentDirective, DbxListLayoutModule, DbxListView, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxNavbarComponent, DbxNavbarModule, DbxNoteComponent, DbxNoticeComponent, DbxOkComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionModule, DbxPopoverScrollContentComponent, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPromptBoxComponent, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptConfirmTypes, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorComponent, DbxReadableErrorModule, DbxRouterLayoutModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxScreenModule, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListItemViewComponent, DbxSelectionValueListViewComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavModule, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxStepComponent, DbxStepLayoutModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnLayoutModule, DbxTwoColumnsBackDirective, DbxTwoColumnsColumnHeadComponent, DbxTwoColumnsComponent, DbxTwoColumnsFullLeftDirective, DbxTwoColumnsRightComponent, DbxTwoColumnsSrefDirective, DbxUIRouterSegueAnchorComponent, DbxValueListViewComponent, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebRootModule, DbxWebUIRouterModule, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, ProvideDbxListView, ProvideDbxPromptConfirm, ProvideTwoColumnsContext, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TwoColumnsContextStore, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapItemValuesToValueListItemConfig, mapValuesToValuesListItemConfigObs, screenMediaWidthTypeIsActive };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map