@dereekb/dbx-web 2.0.0 → 2.1.0

package/fesm2020/dereekb-dbx-web.mjs

@@ -1,12 +1,12 @@
 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, combineLatest, map as map$1, delay, throttleTime, first, filter as filter$1, merge, exhaustMap, catchError, from, race } from '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 { 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, switchMap as switchMap$1, mergeMap, tap } from 'rxjs/operators';
+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, safeDetectChanges, AbstractDbxAnchorDirective, DbxInjectedComponentModule, expandClickableAnchorLinkTrees, AbstractTransitionDirective, tapDetectChanges, checkNgContentWrapperHasContent, anchorTypeForAnchor, AnchorType, DbxActionButtonDirective, DbxCoreActionModule, DbxCoreFilterModule, isIdleActionState, canTriggerAction } 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';
@@ -17,13 +17,13 @@ import * as i1$3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$c from 'ng-overlay-container';
+import * as i1$b from 'ng-overlay-container';
 import { NgOverlayContainerService, NgOverlayContainerModule } from 'ng-overlay-container';
-import * as i1$5 from '@angular/material/toolbar';
+import * as i1$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i1$4 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$6 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';
@@ -33,31 +33,31 @@ 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$7 from '@angular/cdk/layout';
-import * as i3$1 from '@angular/material/sidenav';
+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$8 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$9 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';
-import * as i3$2 from 'ngx-infinite-scroll';
+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$a from '@angular/platform-browser';
-import * as i1$b 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$3 from '@angular/material/tooltip';
+import * as i3$4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$d from '@angular/cdk/overlay';
+import * as i1$c from '@angular/cdk/overlay';
 import { GlobalPositionStrategy } from '@angular/cdk/overlay';
-import * as i3$4 from '@angular/flex-layout/flex';
+import * as i3$5 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i2$3 from '@uirouter/core';
 
@@ -584,6 +584,9 @@ class AbstractDialogDirective extends AbstractTransitionWatcherDirective {
     updateForSuccessfulTransition() {
         this.close();
     }
+    returnValue(value) {
+        this.close(value);
+    }
     close(value) {
         this.dialogRef.close(value);
     }
@@ -625,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.
@@ -852,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
@@ -867,9 +908,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                     ],
                     declarations: [
                         DbxDialogContentDirective,
+                        DbxActionDialogDirective
                     ],
                     exports: [
-                        DbxDialogContentDirective
+                        DbxDialogContentDirective,
+                        DbxActionDialogDirective
                     ]
                 }]
         }] });
@@ -968,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: i1$4.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"] }] });
+    `, 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: [{
@@ -994,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$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], directives: [{ type: i3.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" }]
@@ -1094,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: i1$4.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: [{
@@ -1159,16 +1202,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * 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: [], 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" }, ngImport: i0, template: `<mat-icon *ngIf="anchor?.icon">{{ anchor?.icon }}</mat-icon><span *ngIf="anchor?.title">{{ anchor?.title }}</span>`, isInline: true, components: [{ type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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 *ngIf="anchor?.icon">{{ anchor?.icon }}</mat-icon><span *ngIf="anchor?.title">{{ anchor?.title }}</span>`
+                    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'
+                    }
                 }]
-        }], propDecorators: { anchor: [{
+        }], ctorParameters: function () { return [{ type: DbxAnchorComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { anchor: [{
                 type: Input
             }] } });
 
@@ -1255,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$6.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i1$4.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$6.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i6.MatLine, selector: "[mat-line], [matLine]" }], pipes: { "async": i3.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" }]
@@ -1406,11 +1468,11 @@ class DbxScreenMediaService {
         }
     }
 }
-DbxScreenMediaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxScreenMediaService, deps: [{ token: i1$7.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$7.MediaMatcher }, { type: DbxScreenMediaServiceConfig }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.MediaMatcher }, { type: DbxScreenMediaServiceConfig }]; } });
 
 /**
  * Component that displays a navbar.
@@ -1457,7 +1519,7 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
     }
 }
 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: i1$4.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 });
+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: {
@@ -1641,7 +1703,7 @@ class DbxSidenavComponent extends AbstractTransitionWatcherDirective {
     }
 }
 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$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }, { type: i3$1.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3.AsyncPipe } });
+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" }]
@@ -1670,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: i1$4.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 } });
+  `, 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: [{
@@ -2160,7 +2222,7 @@ DbxTwoBlocksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       <ng-content></ng-content>
     </div>
   </div>
-  `, isInline: true, directives: [{ type: i1$8.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: [{
@@ -2231,7 +2293,7 @@ DbxCardBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
       <ng-content></ng-content>
     </div>
   </div>
-  `, isInline: true, components: [{ type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.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: [{
@@ -2566,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: i1$4.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 } });
+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" }]
@@ -2820,7 +2882,7 @@ DbxFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         <ng-content></ng-content>
       </mat-toolbar>
     </div>
-  `, isInline: true, components: [{ type: i1$5.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: [{
@@ -3019,7 +3081,7 @@ DbxIconItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
       </div>
     </div>
   </div>
-  `, isInline: true, components: [{ type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.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: [{
@@ -3126,7 +3188,7 @@ DbxLoadingProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
     </ng-container>
     <div *ngIf="text" class="hint">{{ text }}</div>
   </div>
-  `, isInline: true, components: [{ type: i1$9.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"] }] });
+  `, 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: [{
@@ -3550,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$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$2.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; }) } });
+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: {
@@ -4028,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$6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i1$6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i1$4.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$6.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }], pipes: { "async": i3.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: [{
@@ -4081,7 +4143,7 @@ DbxValueListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         </a>
       </dbx-anchor>
     </mat-nav-list>
-  `, isInline: true, components: [{ type: i1$6.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i1$4.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$6.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }], pipes: { "async": i3.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: [{
@@ -4286,7 +4348,7 @@ 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: i1$4.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"] }] });
+  `, 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: [{
@@ -4547,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: i1$4.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"] }] });
+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" }]
@@ -4660,7 +4722,7 @@ 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$a.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+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,
@@ -4668,7 +4730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                     selector: 'dbx-linkify',
                     template: `<span class="dbx-linkify" [innerHTML]="linkifiedBody$ | async"></span>`
                 }]
-        }], ctorParameters: function () { return [{ type: i1$a.DomSanitizer }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: i1$9.DomSanitizer }]; }, propDecorators: { text: [{
                 type: Input
             }] } });
 
@@ -4741,7 +4803,7 @@ DbxTextChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
       {{chip.text}}
     </mat-chip>
   </mat-chip-list>
-  `, isInline: true, components: [{ type: i1$b.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$b.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$3.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: [{
@@ -5100,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$c.NgPopoverRef }, { token: CompactContextStore }, { token: i1$2.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
@@ -5126,7 +5188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             provide: CompactContextStore
                         }]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$c.NgPopoverRef }, { type: CompactContextStore }, { type: i1$2.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.
@@ -5161,11 +5223,11 @@ class DbxPopoverService {
         });
     }
 }
-DbxPopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopoverService, deps: [{ token: i1$d.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$d.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$c.Overlay }, { type: i0.Injector }]; } });
 
 /**
  * Abstract popover directive.
@@ -5212,7 +5274,7 @@ DbxPopoverContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
       <ng-content></ng-content>
     </div>
   </div>
-`, isInline: true, directives: [{ type: i1$8.ResizedDirective, selector: "[resized]", outputs: ["resized"] }], pipes: { "async": i3.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: [{
@@ -5248,7 +5310,7 @@ DbxPopoverHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
     </div>
   </div>
   <mat-divider></mat-divider>
-  `, isInline: true, components: [{ type: i1$4.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"] }] });
+  `, 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: [{
@@ -5436,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: i1$4.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: [{
@@ -5477,107 +5539,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                 }] }]; } });
 
 /**
- * Abstract class for showing and handling a popover ref.
+ * Action directive that is used to trigger/display a popover, then watches that popover for a value.
  */
-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
- */
-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;
@@ -5588,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$2.DbxActionContextStoreSourceInstance }], 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$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, cdRef, appPopoverActionDirective) {
-        super(button, source, cdRef);
-        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$2.DbxButtonDirective, host: true }, { token: i1$2.DbxActionContextStoreSourceInstance }, { token: i0.ChangeDetectorRef }, { 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$2.DbxButtonDirective, decorators: [{
-                    type: Host
-                }] }, { type: i1$2.DbxActionContextStoreSourceInstance }, { type: i0.ChangeDetectorRef }, { 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 });
@@ -6122,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,
@@ -6140,8 +6082,7 @@ DbxPopoverInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0
         DbxStyleLayoutModule,
         DbxInjectedComponentModule,
         NgOverlayContainerModule,
-        AngularResizeEventModule], exports: [DbxPopoverActionButtonDirective,
-        DbxPopoverActionDirective,
+        AngularResizeEventModule], exports: [DbxActionPopoverDirective,
         DbxPopoverContentComponent,
         DbxPopoverControlsDirective,
         DbxPopoverHeaderComponent,
@@ -6180,8 +6121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         AngularResizeEventModule
                     ],
                     declarations: [
-                        DbxPopoverActionButtonDirective,
-                        DbxPopoverActionDirective,
+                        DbxActionPopoverDirective,
                         DbxPopoverComponent,
                         DbxPopoverCoordinatorComponent,
                         DbxPopoverContentComponent,
@@ -6190,8 +6130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         DbxPopoverScrollContentComponent
                     ],
                     exports: [
-                        DbxPopoverActionButtonDirective,
-                        DbxPopoverActionDirective,
+                        DbxActionPopoverDirective,
                         DbxPopoverContentComponent,
                         DbxPopoverControlsDirective,
                         DbxPopoverHeaderComponent,
@@ -6219,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: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$4.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" }]
@@ -6282,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();
@@ -6485,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$c.NgPopoverRef }, { token: CompactContextStore }, { token: i1$2.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
@@ -6511,7 +6510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             provide: CompactContextStore
                         }]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$c.NgPopoverRef }, { type: CompactContextStore }, { type: i1$2.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: i1$b.NgPopoverRef }, { type: CompactContextStore }, { type: i1$2.DbxRouterTransitionService }, { type: i0.NgZone }]; } });
 
 /**
  * Abstract popup directive.
@@ -6683,11 +6682,11 @@ class DbxPopupService {
         });
     }
 }
-DbxPopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: DbxPopupService, deps: [{ token: i1$d.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$d.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$c.Overlay }, { type: i0.Injector }]; } });
 
 class DbxPopupInteractionModule {
     static forRoot() {
@@ -7093,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_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, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, 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, 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, makeDbxActionSnackbarDisplayConfigGeneratorFunction, 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