@dereekb/dbx-web 8.7.2 → 8.7.5

package/fesm2020/dereekb-dbx-web.mjs

@@ -2448,15 +2448,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+const DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH = 320;
 const INITIAL_STATE = {
     showRight: false,
-    fullLeft: false
+    fullLeft: false,
+    minRightWidth: DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH
 };
 class TwoColumnsContextStore extends ComponentStore {
     constructor() {
         super({ ...INITIAL_STATE });
         this._back = new Subject();
         // MARK: Accessors
+        this.hideLeft$ = this.state$.pipe(map((x) => {
+            /**
+             * The right side is less-than or equal to half the total width when resizing, so we can use the total width to guess the best case current scenario.
+             */
+            const expectedRightWidth = (x.totalWidth ?? 0) / 2;
+            const hideLeft = x.showRight && expectedRightWidth < x.minRightWidth;
+            return hideLeft;
+        }));
         /**
          * Pipes the current state of showRight.
          */
@@ -2498,6 +2508,14 @@ class TwoColumnsContextStore extends ComponentStore {
          * Sets the new back ref.
          */
         this.setBackRef = this.updater((state, backRef) => ({ ...state, backRef }));
+        /**
+         * Sets the new total width.
+         */
+        this.setTotalWidth = this.updater((state, totalWidth) => ({ ...state, totalWidth }));
+        /**
+         * Sets the new min right width.
+         */
+        this.setMinRightWidth = this.updater((state, minRightWidth) => ({ ...state, minRightWidth: minRightWidth ?? DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH }));
     }
     /**
      * Emits a back event.
@@ -2561,22 +2579,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Requires a TwoColumnsContextStore to be provided.
  */
 class DbxTwoColumnComponent extends AbstractSubscriptionDirective {
-    constructor(twoColumnsContextStore, cdRef) {
+    constructor(twoColumnsContextStore, elementRef, cdRef) {
         super();
         this.twoColumnsContextStore = twoColumnsContextStore;
+        this.elementRef = elementRef;
         this.cdRef = cdRef;
-        this._view = { showRight: false, showFullLeft: true, reverseSizing: false, inSectionPage: false };
+        this._view = { showRight: false, showFullLeft: true, hideLeftColumn: false, reverseSizing: false, inSectionPage: false };
         this._reverseSizing = new BehaviorSubject(false);
         this._inSectionPage = new BehaviorSubject(false);
+        this.hideLeftColumn$ = this.twoColumnsContextStore.hideLeft$;
         this.showRight$ = this.twoColumnsContextStore.showRight$;
         this.showFullLeft$ = this.twoColumnsContextStore.showFullLeft$;
         this.hideRight$ = this.twoColumnsContextStore.hideRight$;
     }
     ngOnInit() {
-        this.sub = combineLatest([this.showRight$, this.showFullLeft$, this._reverseSizing, this._inSectionPage]).subscribe(([showRight, showFullLeft, reverseSizing, inSectionPage]) => {
+        this.sub = combineLatest([this.showRight$, this.showFullLeft$, this.hideLeftColumn$, this._reverseSizing, this._inSectionPage]).subscribe(([showRight, showFullLeft, hideLeftColumn, reverseSizing, inSectionPage]) => {
             this._view = {
                 showRight,
                 showFullLeft,
+                hideLeftColumn,
                 reverseSizing,
                 inSectionPage
             };
@@ -2597,19 +2618,23 @@ class DbxTwoColumnComponent extends AbstractSubscriptionDirective {
     set inSectionPage(inSectionPage) {
         this._inSectionPage.next(inSectionPage);
     }
+    onResized(event) {
+        const totalWidth = this.elementRef.nativeElement.clientWidth;
+        this.twoColumnsContextStore.setTotalWidth(totalWidth);
+    }
 }
-DbxTwoColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnComponent, deps: [{ token: TwoColumnsContextStore }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbxTwoColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxTwoColumnComponent, selector: "dbx-two-column", inputs: { reverseSizing: "reverseSizing", inSectionPage: "inSectionPage" }, host: { properties: { "class": "{ 'right-shown': v.showRight, 'full-left': v.fullLeft, 'two-column-reverse-sizing': v.reverseSizing, 'dbx-section-page-two': v.inSectionPage }" }, classAttribute: "dbx-two-column" }, exportAs: ["columns"], usesInheritance: true, ngImport: i0, template: "<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height left-column\">\n  <ng-content select=\"[left]\"></ng-content>\n</dbx-content-container>\n<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height right-column\" *ngIf=\"v.showRight\">\n  <ng-content select=\"[right]\"></ng-content>\n</dbx-content-container>\n", directives: [{ type: DbxContentContainerDirective, selector: "dbx-content-container,[dbxContentContainer],.dbx-content-container", inputs: ["grow", "padding"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DbxTwoColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnComponent, deps: [{ token: TwoColumnsContextStore }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbxTwoColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxTwoColumnComponent, selector: "dbx-two-column", inputs: { reverseSizing: "reverseSizing", inSectionPage: "inSectionPage" }, host: { properties: { "class": "{ 'right-shown': v.showRight, 'full-left': v.showFullLeft,'hide-left-column': v.hideLeftColumn, 'two-column-reverse-sizing': v.reverseSizing, 'dbx-section-page-two': v.inSectionPage }" }, classAttribute: "dbx-two-column" }, exportAs: ["columns"], usesInheritance: true, ngImport: i0, template: "<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height left-column\">\n  <ng-content select=\"[left]\"></ng-content>\n</dbx-content-container>\n<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height right-column\" *ngIf=\"v.showRight\" (resized)=\"onResized($event)\">\n  <ng-content select=\"[right]\"></ng-content>\n</dbx-content-container>\n", directives: [{ type: DbxContentContainerDirective, selector: "dbx-content-container,[dbxContentContainer],.dbx-content-container", inputs: ["grow", "padding"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.ResizedDirective, selector: "[resized]", outputs: ["resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-two-column', exportAs: 'columns', host: {
                         class: 'dbx-two-column',
-                        '[class]': "{ 'right-shown': v.showRight, 'full-left': v.fullLeft, 'two-column-reverse-sizing': v.reverseSizing, 'dbx-section-page-two': v.inSectionPage }"
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height left-column\">\n  <ng-content select=\"[left]\"></ng-content>\n</dbx-content-container>\n<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height right-column\" *ngIf=\"v.showRight\">\n  <ng-content select=\"[right]\"></ng-content>\n</dbx-content-container>\n" }]
+                        '[class]': "{ 'right-shown': v.showRight, 'full-left': v.showFullLeft,'hide-left-column': v.hideLeftColumn, 'two-column-reverse-sizing': v.reverseSizing, 'dbx-section-page-two': v.inSectionPage }"
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height left-column\">\n  <ng-content select=\"[left]\"></ng-content>\n</dbx-content-container>\n<dbx-content-container grow=\"full\" padding=\"none\" class=\"dbx-content dbx-content-auto-height right-column\" *ngIf=\"v.showRight\" (resized)=\"onResized($event)\">\n  <ng-content select=\"[right]\"></ng-content>\n</dbx-content-container>\n" }]
         }], ctorParameters: function () { return [{ type: TwoColumnsContextStore, decorators: [{
                     type: Inject,
                     args: [TwoColumnsContextStore]
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { reverseSizing: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { reverseSizing: [{
                 type: Input
             }], inSectionPage: [{
                 type: Input
@@ -2687,20 +2712,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxTwoColumnColumnHeadComponent {
 }
 DbxTwoColumnColumnHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnColumnHeadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxTwoColumnColumnHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxTwoColumnColumnHeadComponent, selector: "dbx-two-column-head", inputs: { block: "block", full: "full" }, ngImport: i0, template: `
-    <div class="dbx-two-column-head" [ngClass]="{ block: block, full: full }">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, directives: [{ type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+DbxTwoColumnColumnHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxTwoColumnColumnHeadComponent, selector: "dbx-two-column-head", inputs: { block: "block", full: "full" }, host: { properties: { "class.dbx-block": "block", "class.full": "full" }, classAttribute: "dbx-two-column-head" }, ngImport: i0, template: `
+    <ng-content></ng-content>
+  `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnColumnHeadComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-two-column-head',
                     template: `
-    <div class="dbx-two-column-head" [ngClass]="{ block: block, full: full }">
-      <ng-content></ng-content>
-    </div>
-  `
+    <ng-content></ng-content>
+  `,
+                    host: {
+                        class: 'dbx-two-column-head',
+                        '[class.dbx-block]': 'block',
+                        '[class.full]': 'full'
+                    }
                 }]
         }], propDecorators: { block: [{
                 type: Input
@@ -2762,17 +2788,23 @@ class DbxTwoColumnRightComponent {
     set showBack(showBack) {
         this._showBack.next(showBack);
     }
+    /**
+     * Minimum right-side width allowed in pixels.
+     */
+    set minRightWidth(minRightWidth) {
+        this.twoColumnsContextStore.setMinRightWidth(typeof minRightWidth === 'number' ? minRightWidth : undefined);
+    }
     backClicked() {
         this.twoColumnsContextStore.back();
     }
 }
 DbxTwoColumnRightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnRightComponent, deps: [{ token: TwoColumnsContextStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxTwoColumnRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxTwoColumnRightComponent, selector: "dbx-two-column-right", inputs: { header: "header", showBack: "showBack" }, host: { classAttribute: "dbx-two-column-right d-block" }, ngImport: i0, template: "<dbx-two-column-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-column-head>\n<div class=\"dbx-two-column-right-content\">\n  <ng-content></ng-content>\n</div>\n", components: [{ type: DbxTwoColumnColumnHeadComponent, selector: "dbx-two-column-head", inputs: ["block", "full"] }, { type: i1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+DbxTwoColumnRightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxTwoColumnRightComponent, selector: "dbx-two-column-right", inputs: { header: "header", showBack: "showBack", minRightWidth: "minRightWidth" }, host: { classAttribute: "dbx-two-column-right d-block" }, ngImport: i0, template: "<dbx-two-column-head [block]=\"true\" [full]=\"true\">\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-column-head>\n<div class=\"dbx-two-column-right-content\">\n  <ng-content></ng-content>\n</div>\n", components: [{ type: DbxTwoColumnColumnHeadComponent, selector: "dbx-two-column-head", inputs: ["block", "full"] }, { type: i1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnRightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-two-column-right', host: {
                         class: 'dbx-two-column-right d-block'
-                    }, template: "<dbx-two-column-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-column-head>\n<div class=\"dbx-two-column-right-content\">\n  <ng-content></ng-content>\n</div>\n" }]
+                    }, template: "<dbx-two-column-head [block]=\"true\" [full]=\"true\">\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-column-head>\n<div class=\"dbx-two-column-right-content\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: TwoColumnsContextStore, decorators: [{
                     type: Inject,
                     args: [TwoColumnsContextStore]
@@ -2780,17 +2812,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }], showBack: [{
                 type: Input
+            }], minRightWidth: [{
+                type: Input
             }] } });
 
 class DbxTwoColumnLayoutModule {
 }
 DbxTwoColumnLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxTwoColumnLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnLayoutModule, declarations: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective], imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule], exports: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective] });
-DbxTwoColumnLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnLayoutModule, imports: [[CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule]] });
+DbxTwoColumnLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnLayoutModule, declarations: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective], imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule, AngularResizeEventModule], exports: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective] });
+DbxTwoColumnLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnLayoutModule, imports: [[CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule, AngularResizeEventModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxTwoColumnLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule],
+                    imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule, AngularResizeEventModule],
                     declarations: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective],
                     exports: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective]
                 }]
@@ -7001,5 +7035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, 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, DbxActionProgressComponent, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxBarButtonComponent, 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, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListLayoutModule, DbxListView, DbxListViewWrapper, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxNavbarComponent, 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, DbxProgressButtonsModule, DbxPromptBoxComponent, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptConfirmTypes, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorComponent, DbxReadableErrorModule, DbxRouterAnchorListModule, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterListModule, DbxRouterNavbarModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxScreenModule, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListItemViewComponent, DbxSelectionValueListViewComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxSpinnerButtonComponent, DbxStepComponent, DbxStepLayoutModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadComponent, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxUIRouterSegueAnchorComponent, DbxValueListGridItemViewComponent, DbxValueListGridViewComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListItemViewComponent, DbxValueListView, DbxValueListViewComponent, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebRootModule, DbxWebUIRouterModule, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TwoColumnsContextStore, addConfigToValueListItems, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewModifier, provideTwoColumnsContext, screenMediaWidthTypeIsActive };
+export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_STATIC_LIST_DIRECTIVE_TEMPLATE, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionProgressComponent, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxBarButtonComponent, 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, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListLayoutModule, DbxListView, DbxListViewWrapper, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxNavbarComponent, 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, DbxProgressButtonsModule, DbxPromptBoxComponent, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptConfirmTypes, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorComponent, DbxReadableErrorModule, DbxRouterAnchorListModule, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterListModule, DbxRouterNavbarModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxScreenModule, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListItemViewComponent, DbxSelectionValueListViewComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxSpinnerButtonComponent, DbxStepComponent, DbxStepLayoutModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadComponent, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxUIRouterSegueAnchorComponent, DbxValueListGridItemViewComponent, DbxValueListGridViewComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListItemViewComponent, DbxValueListView, DbxValueListViewComponent, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebRootModule, DbxWebUIRouterModule, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TwoColumnsContextStore, addConfigToValueListItems, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewModifier, provideTwoColumnsContext, screenMediaWidthTypeIsActive };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map