@dereekb/dbx-web 10.0.24 → 10.1.1

package/fesm2022/dereekb-dbx-web.mjs

@@ -9,7 +9,7 @@ import { AbstractSubscriptionDirective, safeMarkForCheck, AbstractDbxButtonDirec
 import ms from 'ms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { spaceSeparatedCssClasses, getValueFromGetter, mergeObjects, cssClassesSet, splitCommaSeparatedStringToSet, asPromise, objectHasNoKeys, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, filterMaybeValues, asArray, firstValue, filterUndefinedValues, isMaybeNot, isNotNullOrEmptyString, mapIterable, toReadableError, isDefaultReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue, MS_IN_SECOND } from '@dereekb/util';
+import { spaceSeparatedCssClasses, getValueFromGetter, mergeObjects, cssClassesSet, splitCommaSeparatedStringToSet, asPromise, objectHasNoKeys, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, filterMaybeValues, asArray, firstValue, filterUndefinedValues, isMaybeNot, isNotNullOrEmptyString, mapIterable, toReadableError, isDefaultReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue, MS_IN_SECOND } from '@dereekb/util';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3 from '@angular/material/progress-spinner';
@@ -232,22 +232,25 @@ class DbxSpinnerButtonComponent extends AbstractProgressButtonDirective {
         return size;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSpinnerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSpinnerButtonComponent, selector: "dbx-spinner-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-spinner-button\" #button mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"showText\">\n    <ng-container *ngIf=\"options.buttonIcon\">\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [class.working]=\"options.working && !options.disabled\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\">\n        {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n      </mat-icon>\n    </ng-container>\n\n    <span class=\"button-text\" [class.working]=\"options.working && !options.disabled\">\n      {{ options.text }}\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"!showText && options.buttonIcon\">\n    <mat-icon class=\"mat-fab-icon\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.fab && options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <mat-spinner class=\"spinner\" *ngIf=\"options.working && !options.disabled\" [diameter]=\"calcSpinnerSize()\" [color]=\"options.spinnerColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\" [ngStyle]=\"customSpinnerStyle!\" [ngClass]=\"{ 'dbx-spinner-custom': customSpinnerStyle! }\" [class.working]=\"options.working && !options.disabled\"></mat-spinner>\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;--mdc-icon-button-icon-size: unset}:host button.fullWidth{width:100%}:host button .spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .spinner.working{opacity:1}:host button .dbx-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-spinner-custom.mat-spinner.mat-accent circle{stroke:unset!important}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out}:host button mat-icon.mat-button-icon.is-mat-icon{font-size:18px;position:relative;top:3px}:host button mat-icon.mat-button-icon.working{opacity:0}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSpinnerButtonComponent, selector: "dbx-spinner-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-base-button dbx-spinner-button\" #button mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"showText\">\n    <ng-container *ngIf=\"options.buttonIcon\">\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [class.working]=\"options.working && !options.disabled\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\">\n        {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n      </mat-icon>\n    </ng-container>\n\n    <span class=\"button-text\" [class.working]=\"options.working && !options.disabled\">\n      {{ options.text }}\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"!showText && options.buttonIcon\">\n    <mat-icon class=\"mat-fab-icon\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.fab && options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <mat-spinner class=\"spinner\" *ngIf=\"options.working && !options.disabled\" [diameter]=\"calcSpinnerSize()\" [color]=\"options.spinnerColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\" [ngStyle]=\"customSpinnerStyle!\" [ngClass]=\"{ 'dbx-spinner-custom': customSpinnerStyle! }\" [class.working]=\"options.working && !options.disabled\"></mat-spinner>\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;--mdc-icon-button-icon-size: unset}:host button.fullWidth{width:100%}:host button .spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .spinner.working{opacity:1}:host button .dbx-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-spinner-custom.mat-spinner.mat-accent circle{stroke:unset!important}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out}:host button mat-icon.mat-button-icon.is-mat-icon{font-size:18px;position:relative;top:3px}:host button mat-icon.mat-button-icon.working{opacity:0}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSpinnerButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-spinner-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"dbx-spinner-button\" #button mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"showText\">\n    <ng-container *ngIf=\"options.buttonIcon\">\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [class.working]=\"options.working && !options.disabled\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\">\n        {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n      </mat-icon>\n    </ng-container>\n\n    <span class=\"button-text\" [class.working]=\"options.working && !options.disabled\">\n      {{ options.text }}\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"!showText && options.buttonIcon\">\n    <mat-icon class=\"mat-fab-icon\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.fab && options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <mat-spinner class=\"spinner\" *ngIf=\"options.working && !options.disabled\" [diameter]=\"calcSpinnerSize()\" [color]=\"options.spinnerColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\" [ngStyle]=\"customSpinnerStyle!\" [ngClass]=\"{ 'dbx-spinner-custom': customSpinnerStyle! }\" [class.working]=\"options.working && !options.disabled\"></mat-spinner>\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;--mdc-icon-button-icon-size: unset}:host button.fullWidth{width:100%}:host button .spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .spinner.working{opacity:1}:host button .dbx-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-spinner-custom.mat-spinner.mat-accent circle{stroke:unset!important}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out}:host button mat-icon.mat-button-icon.is-mat-icon{font-size:18px;position:relative;top:3px}:host button mat-icon.mat-button-icon.working{opacity:0}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
+            args: [{ selector: 'dbx-spinner-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"dbx-base-button dbx-spinner-button\" #button mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"showText\">\n    <ng-container *ngIf=\"options.buttonIcon\">\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [class.working]=\"options.working && !options.disabled\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\">\n        {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n      </mat-icon>\n    </ng-container>\n\n    <span class=\"button-text\" [class.working]=\"options.working && !options.disabled\">\n      {{ options.text }}\n      <ng-content></ng-content>\n    </span>\n  </ng-container>\n\n  <ng-container *ngIf=\"!showText && options.buttonIcon\">\n    <mat-icon class=\"mat-fab-icon\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.fab && options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <mat-spinner class=\"spinner\" *ngIf=\"options.working && !options.disabled\" [diameter]=\"calcSpinnerSize()\" [color]=\"options.spinnerColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\" [ngStyle]=\"customSpinnerStyle!\" [ngClass]=\"{ 'dbx-spinner-custom': customSpinnerStyle! }\" [class.working]=\"options.working && !options.disabled\"></mat-spinner>\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;--mdc-icon-button-icon-size: unset}:host button.fullWidth{width:100%}:host button .spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .spinner.working{opacity:1}:host button .dbx-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-spinner-custom.mat-spinner.mat-accent circle{stroke:unset!important}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out}:host button mat-icon.mat-button-icon.is-mat-icon{font-size:18px;position:relative;top:3px}:host button mat-icon.mat-button-icon.working{opacity:0}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
         }], propDecorators: { buttonRef: [{
                 type: ViewChild,
                 args: ['button', { static: true, read: ElementRef }]
             }] } });
 
+/**
+ * @deprecated use DbxButtonType instead.
+ */
 var DbxButtonDisplayType;
 (function (DbxButtonDisplayType) {
-    DbxButtonDisplayType[DbxButtonDisplayType["RAISED"] = 0] = "RAISED";
-    DbxButtonDisplayType[DbxButtonDisplayType["STROKED"] = 1] = "STROKED";
-    DbxButtonDisplayType[DbxButtonDisplayType["FLAT"] = 2] = "FLAT";
-    DbxButtonDisplayType[DbxButtonDisplayType["ICON_ONLY"] = 3] = "ICON_ONLY";
+    DbxButtonDisplayType["RAISED"] = "raised";
+    DbxButtonDisplayType["STROKED"] = "stroked";
+    DbxButtonDisplayType["FLAT"] = "flag";
+    DbxButtonDisplayType["ICON_ONLY"] = "icon";
 })(DbxButtonDisplayType || (DbxButtonDisplayType = {}));
 /**
  * Complex button that supports loading states.
@@ -255,38 +258,47 @@ var DbxButtonDisplayType;
 class DbxButtonComponent extends AbstractDbxButtonDirective {
     constructor() {
         super(...arguments);
-        this.color = 'primary';
+        this.color = undefined;
+        this.spinnerColor = undefined;
+    }
+    get basic() {
+        return !this.type || this.type === 'basic';
+    }
+    set basic(basic) {
+        if (basic) {
+            this.type = 'basic';
+        }
     }
     get raised() {
-        return this.type === DbxButtonDisplayType.RAISED;
+        return this.type === 'raised';
     }
     set raised(raised) {
         if (raised) {
-            this.type = DbxButtonDisplayType.RAISED;
+            this.type = 'raised';
         }
     }
     get stroked() {
-        return this.type === DbxButtonDisplayType.STROKED;
+        return this.type === 'stroked';
     }
     set stroked(stroked) {
         if (stroked) {
-            this.type = DbxButtonDisplayType.STROKED;
+            this.type = 'stroked';
         }
     }
     get flat() {
-        return this.type === DbxButtonDisplayType.FLAT;
+        return this.type === 'flat';
     }
     set flat(flat) {
         if (flat) {
-            this.type = DbxButtonDisplayType.FLAT;
+            this.type = 'flat';
         }
     }
     get iconOnly() {
-        return this.type === DbxButtonDisplayType.ICON_ONLY;
+        return this.type === 'icon';
     }
     set iconOnly(iconOnly) {
         if (iconOnly) {
-            this.type = DbxButtonDisplayType.ICON_ONLY;
+            this.type = 'icon';
         }
     }
     get btnOptions() {
@@ -319,17 +331,17 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
             flat: this.flat,
             iconOnly: this.iconOnly,
             mode: 'indeterminate',
-            spinnerColor: this.color === 'primary' ? 'accent' : 'primary',
+            spinnerColor: this.spinnerColor ?? this.color,
             customSpinnerColor,
             disabled
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxButtonComponent, selector: "dbx-button", inputs: { type: "type", raised: "raised", stroked: "stroked", flat: "flat", iconOnly: "iconOnly", color: "color", customButtonColor: "customButtonColor", customTextColor: "customTextColor", customSpinnerColor: "customSpinnerColor" }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxButtonComponent, selector: "dbx-button", inputs: { type: "type", basic: "basic", raised: "raised", stroked: "stroked", flat: "flat", iconOnly: "iconOnly", color: "color", spinnerColor: "spinnerColor", customButtonColor: "customButtonColor", customTextColor: "customTextColor", customSpinnerColor: "customSpinnerColor" }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
     <dbx-spinner-button (btnClick)="clickButton()" [options]="btnOptions">
       <ng-content></ng-content>
     </dbx-spinner-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxSpinnerButtonComponent, selector: "dbx-spinner-button" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxSpinnerButtonComponent, selector: "dbx-spinner-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxButtonComponent, decorators: [{
             type: Component,
@@ -340,10 +352,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       <ng-content></ng-content>
     </dbx-spinner-button>
   `,
-                    providers: provideDbxButton(DbxButtonComponent)
+                    providers: provideDbxButton(DbxButtonComponent),
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { type: [{
                 type: Input
+            }], basic: [{
+                type: Input
             }], raised: [{
                 type: Input
             }], stroked: [{
@@ -354,6 +369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], color: [{
                 type: Input
+            }], spinnerColor: [{
+                type: Input
             }], customButtonColor: [{
                 type: Input
             }], customTextColor: [{
@@ -452,7 +469,7 @@ class DbxActionSnackbarComponent extends AbstractSubscriptionDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionSnackbarComponent, deps: [{ token: i1$1.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxActionSnackbarComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"(snackbarStatusClass$ | async)!\">\n  <ng-container [ngSwitch]=\"complete$ | async\">\n    <ng-container *ngSwitchCase=\"true\">\n      <dbx-spacer></dbx-spacer>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"false\">\n      <span>{{ message }}</span>\n      <dbx-spacer></dbx-spacer>\n      <ng-container *ngIf=\"hasAction\">\n        <dbx-action [dbxActionValueStream]=\"value$\" [dbxActionSource]=\"sourceInstance$ | async\" [dbxActionSuccessHandler]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      </ng-container>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { kind: "directive", type: i1$2.dbxActionValueStreamDirective, selector: "[dbxActionValueStream]", inputs: ["dbxActionValueStream", "dbxActionValueStreamIsNotEmpty", "dbxActionValueStreamModified"] }, { kind: "directive", type: i1$2.DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxActionSnackbarComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"(snackbarStatusClass$ | async)!\">\n  <ng-container [ngSwitch]=\"complete$ | async\">\n    <ng-container *ngSwitchCase=\"true\">\n      <dbx-spacer></dbx-spacer>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"false\">\n      <span>{{ message }}</span>\n      <dbx-spacer></dbx-spacer>\n      <ng-container *ngIf=\"hasAction\">\n        <dbx-action [dbxActionValueStream]=\"value$\" [dbxActionSource]=\"sourceInstance$ | async\" [dbxActionSuccessHandler]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      </ng-container>\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { kind: "directive", type: i1$2.dbxActionValueStreamDirective, selector: "[dbxActionValueStream]", inputs: ["dbxActionValueStream", "dbxActionValueStreamIsNotEmpty", "dbxActionValueStreamModified"] }, { kind: "directive", type: i1$2.DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionSnackbarComponent, decorators: [{
             type: Component,
@@ -825,11 +842,11 @@ class DbxBarButtonComponent extends AbstractProgressButtonDirective {
         this.buttonCss$ = this.baseCssClasses$.pipe(distinctUntilItemsHaveDifferentValues((x) => x[1]), map((x) => spaceSeparatedCssClasses(x[1])), shareReplay(1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxBarButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxBarButtonComponent, selector: "dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-bar-button\" mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"options.buttonIcon\">\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <span>\n    {{ options.text }}\n    <ng-content></ng-content>\n  </span>\n\n  <mat-progress-bar class=\"bar\" *ngIf=\"options.working && !options.disabled\" [color]=\"options.barColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\"></mat-progress-bar>\n</button>\n", styles: [":host>button.dbx-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxBarButtonComponent, selector: "dbx-bar-button", usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-base-button dbx-bar-button\" mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"options.buttonIcon\">\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <span>\n    {{ options.text }}\n    <ng-content></ng-content>\n  </span>\n\n  <mat-progress-bar class=\"bar\" *ngIf=\"options.working && !options.disabled\" [color]=\"options.barColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\"></mat-progress-bar>\n</button>\n", styles: [":host>button.dbx-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxBarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-bar-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"dbx-bar-button\" mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"options.buttonIcon\">\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <span>\n    {{ options.text }}\n    <ng-content></ng-content>\n  </span>\n\n  <mat-progress-bar class=\"bar\" *ngIf=\"options.working && !options.disabled\" [color]=\"options.barColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\"></mat-progress-bar>\n</button>\n", styles: [":host>button.dbx-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
+            args: [{ selector: 'dbx-bar-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"dbx-base-button dbx-bar-button\" mat-button [type]=\"options.type\" [color]=\"options.buttonColor\" [ngClass]=\"buttonCss$ | async\" [ngStyle]=\"options.customStyle!\" [disabled]=\"options.working || options.disabled\">\n  <ng-container *ngIf=\"options.buttonIcon\">\n    <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!options.buttonIcon.fontSet\" [ngClass]=\"options.buttonIcon.customClass!\" [fontSet]=\"options.buttonIcon.fontSet!\" [fontIcon]=\"options.buttonIcon.fontIcon!\" [color]=\"options.buttonIcon.color!\" [svgIcon]=\"options.buttonIcon.svgIcon!\" [inline]=\"options.buttonIcon.inline!\">\n      {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n    </mat-icon>\n  </ng-container>\n\n  <span>\n    {{ options.text }}\n    <ng-content></ng-content>\n  </span>\n\n  <mat-progress-bar class=\"bar\" *ngIf=\"options.working && !options.disabled\" [color]=\"options.barColor!\" [mode]=\"options.mode!\" [value]=\"options.value!\"></mat-progress-bar>\n</button>\n", styles: [":host>button.dbx-bar-button.mdc-button.mat-mdc-button.working{cursor:not-allowed}:host>button.dbx-bar-button.mdc-button.mat-mdc-button.fullWidth{width:100%}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label{position:unset;display:flex;align-items:center}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label .bar{position:absolute;top:0;left:0}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon{padding-right:5px}:host>button.dbx-bar-button.mdc-button.mat-mdc-button>::ng-deep .mdc-button__label mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
         }] });
 
 class DbxProgressButtonsModule {
@@ -1243,18 +1260,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: DbxStyleService }, { type: i0.ChangeDetectorRef }]; } });
 
-const DBX_THEME_COLORS = ['primary', 'accent', 'warn', 'ok', 'success', 'background', 'grey', 'disabled', 'notice'];
+const DBX_THEME_COLORS_MAIN = ['primary', 'accent', 'warn'];
+const DBX_THEME_COLORS_EXTRA = ['notice', 'ok', 'success', 'grey'];
+const DBX_THEME_COLORS_EXTRA_SECONDARY = ['background', 'disabled'];
+const DBX_THEME_COLORS = [...DBX_THEME_COLORS_MAIN, ...DBX_THEME_COLORS_EXTRA, ...DBX_THEME_COLORS_EXTRA_SECONDARY];
 function dbxColorBackground(color) {
-    let cssClass = 'dbx-bg';
+    let cssClass = 'dbx-bg'; // background by default
     switch (color) {
         case 'primary':
         case 'accent':
+        case 'warn':
+        case 'notice':
         case 'ok':
         case 'success':
-        case 'warn':
         case 'grey':
         case 'disabled':
-        case 'notice':
             cssClass = `dbx-${color}-bg`;
             break;
     }
@@ -1286,7 +1306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const declarations$b = [DbxColorDirective, DbxSpacerDirective, DbxStyleDirective, DbxSetStyleDirective, DbxStyleBodyDirective];
+const declarations$c = [DbxColorDirective, DbxSpacerDirective, DbxStyleDirective, DbxSetStyleDirective, DbxStyleBodyDirective];
 class DbxStyleLayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxStyleLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxStyleLayoutModule, declarations: [DbxColorDirective, DbxSpacerDirective, DbxStyleDirective, DbxSetStyleDirective, DbxStyleBodyDirective], imports: [CommonModule], exports: [DbxColorDirective, DbxSpacerDirective, DbxStyleDirective, DbxSetStyleDirective, DbxStyleBodyDirective] }); }
@@ -1296,8 +1316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: declarations$b,
-                    exports: declarations$b
+                    declarations: declarations$c,
+                    exports: declarations$c
                 }]
         }] });
 
@@ -2237,7 +2257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: DbxPopoverComponent }]; } });
 
-const declarations$a = [DbxPopoverContentComponent, DbxPopoverControlsDirective, DbxPopoverHeaderComponent, DbxPopoverCloseButtonComponent, DbxPopoverScrollContentComponent];
+const declarations$b = [DbxPopoverContentComponent, DbxPopoverControlsDirective, DbxPopoverHeaderComponent, DbxPopoverCloseButtonComponent, DbxPopoverScrollContentComponent];
 /**
  * Contains all popover content components, allowing other sibling dbx-web modules to use the directives without referencing the full popover module.
  */
@@ -2250,8 +2270,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatIconModule, MatButtonModule, MatDividerModule, DbxKeypressModule, DbxStyleLayoutModule, DbxInjectionComponentModule, NgOverlayContainerModule, AngularResizeEventModule],
-                    declarations: declarations$a,
-                    exports: declarations$a
+                    declarations: declarations$b,
+                    exports: declarations$b
                 }]
         }] });
 
@@ -2294,7 +2314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const declarations$9 = [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective];
+const declarations$a = [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective];
 class DbxPopoverInteractionModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPopoverInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxPopoverInteractionModule, declarations: [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective], imports: [CommonModule, MatIconModule, MatButtonModule, MatDividerModule, DbxKeypressModule, DbxStyleLayoutModule, DbxInjectionComponentModule, NgOverlayContainerModule, AngularResizeEventModule, DbxPopoverInteractionContentModule], exports: [DbxPopoverComponent, DbxPopoverCoordinatorComponent, DbxActionPopoverDirective, DbxPopoverInteractionContentModule] }); }
@@ -2304,8 +2324,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatIconModule, MatButtonModule, MatDividerModule, DbxKeypressModule, DbxStyleLayoutModule, DbxInjectionComponentModule, NgOverlayContainerModule, AngularResizeEventModule, DbxPopoverInteractionContentModule],
-                    declarations: declarations$9,
-                    exports: [...declarations$9, DbxPopoverInteractionContentModule]
+                    declarations: declarations$a,
+                    exports: [...declarations$a, DbxPopoverInteractionContentModule]
                 }]
         }] });
 
@@ -2336,7 +2356,7 @@ class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective {
         this.filterSourceDirective.resetFilter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFilterWrapperComponent, deps: [{ token: i1$2.DbxActionContextStoreSourceInstance }, { token: i1$2.FilterSourceDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFilterWrapperComponent, selector: "dbx-filter-wrapper", inputs: { showButtons: "showButtons", applyRaised: "applyRaised", applyIcon: "applyIcon", applyText: "applyText" }, providers: [provideActionStoreSource(null)], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"showButtons\" fxLayout=\"row\">\n    <dbx-button dbxActionButton [raised]=\"applyRaised\" [text]=\"applyText\" [icon]=\"applyIcon\"></dbx-button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetFilter()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i4$1.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"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFilterWrapperComponent, selector: "dbx-filter-wrapper", inputs: { showButtons: "showButtons", applyRaised: "applyRaised", applyIcon: "applyIcon", applyText: "applyText" }, providers: [provideActionStoreSource(null)], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"showButtons\" fxLayout=\"row\">\n    <dbx-button dbxActionButton [raised]=\"applyRaised\" [text]=\"applyText\" [icon]=\"applyIcon\"></dbx-button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetFilter()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i4$1.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"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFilterWrapperComponent, decorators: [{
             type: Component,
@@ -3691,7 +3711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const declarations$8 = [
+const declarations$9 = [
     //
     DbxContentDirective,
     DbxContentContainerDirective,
@@ -3729,8 +3749,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule],
-                    declarations: declarations$8,
-                    exports: declarations$8
+                    declarations: declarations$9,
+                    exports: declarations$9
                 }]
         }] });
 
@@ -3768,7 +3788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['dbxIfSidenavDisplayMode']
             }] } });
 
-const declarations$7 = [DbxIfSidenavDisplayModeDirective, DbxSidenavComponent, DbxSidenavButtonComponent, DbxSidenavPagebarComponent, DbxSidenavPageComponent];
+const declarations$8 = [DbxIfSidenavDisplayModeDirective, DbxSidenavComponent, DbxSidenavButtonComponent, DbxSidenavPagebarComponent, DbxSidenavPageComponent];
 class DbxRouterSidenavModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxRouterSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxRouterSidenavModule, declarations: [DbxIfSidenavDisplayModeDirective, DbxSidenavComponent, DbxSidenavButtonComponent, DbxSidenavPagebarComponent, DbxSidenavPageComponent], imports: [CommonModule, DbxBarLayoutModule, DbxRouterAnchorModule, DbxRouterAnchorListModule, DbxButtonModule, DbxContentLayoutModule, MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule, MatDividerModule, UIRouterModule], exports: [DbxIfSidenavDisplayModeDirective, DbxSidenavComponent, DbxSidenavButtonComponent, DbxSidenavPagebarComponent, DbxSidenavPageComponent] }); }
@@ -3778,8 +3798,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, DbxBarLayoutModule, DbxRouterAnchorModule, DbxRouterAnchorListModule, DbxButtonModule, DbxContentLayoutModule, MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule, MatDividerModule, UIRouterModule],
-                    declarations: declarations$7,
-                    exports: declarations$7
+                    declarations: declarations$8,
+                    exports: declarations$8
                 }]
         }] });
 
@@ -3990,7 +4010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-const declarations$6 = [DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent];
+const declarations$7 = [DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent];
 class DbxFilterInteractionModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFilterInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxFilterInteractionModule, declarations: [DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent], imports: [CommonModule,
@@ -4035,8 +4055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         MatIconModule,
                         MatButtonModule
                     ],
-                    declarations: declarations$6,
-                    exports: [...declarations$6, DbxCoreFilterModule]
+                    declarations: declarations$7,
+                    exports: [...declarations$7, DbxCoreFilterModule]
                 }]
         }] });
 
@@ -4983,19 +5003,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     args: [DBX_INJECTION_COMPONENT_DATA]
                 }] }]; } });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxLabelComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxLabelComponent, selector: "dbx-label", host: { classAttribute: "dbx-label" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxLabelComponent, selector: "dbx-label", host: { classAttribute: "dbx-label" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxLabelComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-label',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-label'
                     }
@@ -5010,7 +5028,7 @@ class DbxLabelBlockComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxLabelBlockComponent, selector: "dbx-label-block", inputs: { header: "header" }, host: { classAttribute: "dbx-label-block" }, ngImport: i0, template: `
     <dbx-label class="d-block dbx-label-padded">{{ header }}</dbx-label>
     <ng-content></ng-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxLabelComponent, selector: "dbx-label" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxLabelComponent, selector: "dbx-label" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxLabelBlockComponent, decorators: [{
             type: Component,
@@ -6063,38 +6081,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxFormDescriptionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormDescriptionComponent, selector: "dbx-form-description", host: { classAttribute: "dbx-form-description" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxFormDescriptionComponent, selector: "dbx-form-description", host: { classAttribute: "dbx-form-description" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxFormDescriptionComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-form-description',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-form-description'
                     }
                 }]
         }] });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxHintComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxHintComponent, selector: "dbx-hint", host: { classAttribute: "dbx-hint" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxHintComponent, selector: "dbx-hint", host: { classAttribute: "dbx-hint" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxHintComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-hint',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-hint'
                     }
@@ -6166,76 +6180,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxNoteComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxNoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxNoteComponent, selector: "dbx-note", host: { classAttribute: "dbx-note" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxNoteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxNoteComponent, selector: "dbx-note", host: { classAttribute: "dbx-note" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxNoteComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-note',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-note'
                     }
                 }]
         }] });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxNoticeComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxNoticeComponent, selector: "dbx-notice", host: { classAttribute: "dbx-notice" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxNoticeComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxNoticeComponent, selector: "dbx-notice", host: { classAttribute: "dbx-notice" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxNoticeComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-notice',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-notice'
                     }
                 }]
         }] });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxOkComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxOkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxOkComponent, selector: "dbx-ok", host: { classAttribute: "dbx-ok" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxOkComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxOkComponent, selector: "dbx-ok", host: { classAttribute: "dbx-ok" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxOkComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-ok',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-ok'
                     }
                 }]
         }] });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxSuccessComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSuccessComponent, selector: "dbx-success", host: { classAttribute: "dbx-success" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxSuccessComponent, selector: "dbx-success", host: { classAttribute: "dbx-success" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSuccessComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-success',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-success'
                     }
@@ -6299,26 +6305,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @deprecated Compat: Remove in future version.
+ */
 class DbxWarnComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxWarnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxWarnComponent, selector: "dbx-warn", host: { classAttribute: "dbx-warn" }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxWarnComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxWarnComponent, selector: "dbx-warn", host: { classAttribute: "dbx-warn" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxWarnComponent, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'dbx-warn',
-                    template: `
-    <ng-content></ng-content>
-  `,
                     host: {
                         class: 'dbx-warn'
                     }
                 }]
         }] });
 
-const declarations$5 = [DbxUnitedStatesAddressComponent, DbxChipDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxNoteComponent, DbxNoticeComponent, DbxSuccessComponent, DbxWarnComponent, DbxHintComponent, DbxLabelBlockComponent, DbxLabelComponent, DbxLinkifyComponent, DbxOkComponent, DbxTextChipsComponent, DbxIconSpacerDirective, DbxFormDescriptionComponent];
+const declarations$6 = [DbxUnitedStatesAddressComponent, DbxChipDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxNoteComponent, DbxNoticeComponent, DbxSuccessComponent, DbxWarnComponent, DbxHintComponent, DbxLabelBlockComponent, DbxLabelComponent, DbxLinkifyComponent, DbxOkComponent, DbxTextChipsComponent, DbxIconSpacerDirective, DbxFormDescriptionComponent];
 class DbxTextModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxTextModule, declarations: [DbxUnitedStatesAddressComponent, DbxChipDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxNoteComponent, DbxNoticeComponent, DbxSuccessComponent, DbxWarnComponent, DbxHintComponent, DbxLabelBlockComponent, DbxLabelComponent, DbxLinkifyComponent, DbxOkComponent, DbxTextChipsComponent, DbxIconSpacerDirective, DbxFormDescriptionComponent], imports: [CommonModule, MatChipsModule, MatTooltipModule, MatIconModule], exports: [DbxUnitedStatesAddressComponent, DbxChipDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxNoteComponent, DbxNoticeComponent, DbxSuccessComponent, DbxWarnComponent, DbxHintComponent, DbxLabelBlockComponent, DbxLabelComponent, DbxLinkifyComponent, DbxOkComponent, DbxTextChipsComponent, DbxIconSpacerDirective, DbxFormDescriptionComponent] }); }
@@ -6328,12 +6332,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatChipsModule, MatTooltipModule, MatIconModule],
-                    declarations: declarations$5,
-                    exports: declarations$5
+                    declarations: declarations$6,
+                    exports: declarations$6
                 }]
         }] });
 
-const declarations$4 = [
+const declarations$5 = [
     //
     DbxReadableErrorComponent,
     DbxLoadingErrorDirective,
@@ -6368,8 +6372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, DbxTextModule, DbxInjectionComponentModule, DbxPopoverInteractionContentModule, MatButtonModule, MatIconModule],
-                    declarations: declarations$4,
-                    exports: declarations$4
+                    declarations: declarations$5,
+                    exports: declarations$5
                 }]
         }] });
 
@@ -6422,7 +6426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type: Host
                 }] }, { type: i1$2.DbxActionContextStoreSourceInstance }]; } });
 
-const declarations$3 = [DbxLoadingComponent, DbxBasicLoadingComponent, DbxLoadingProgressComponent, DbxActionLoadingContextDirective];
+const declarations$4 = [DbxLoadingComponent, DbxBasicLoadingComponent, DbxLoadingProgressComponent, DbxActionLoadingContextDirective];
 class DbxLoadingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxLoadingModule, declarations: [DbxLoadingComponent, DbxBasicLoadingComponent, DbxLoadingProgressComponent, DbxActionLoadingContextDirective], imports: [CommonModule, DbxReadableErrorModule, MatProgressSpinnerModule, MatProgressBarModule], exports: [DbxLoadingComponent, DbxBasicLoadingComponent, DbxLoadingProgressComponent, DbxActionLoadingContextDirective, MatProgressSpinnerModule, MatProgressBarModule] }); }
@@ -6432,8 +6436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, DbxReadableErrorModule, MatProgressSpinnerModule, MatProgressBarModule],
-                    declarations: declarations$3,
-                    exports: [...declarations$3, MatProgressSpinnerModule, MatProgressBarModule]
+                    declarations: declarations$4,
+                    exports: [...declarations$4, MatProgressSpinnerModule, MatProgressBarModule]
                 }]
         }] });
 
@@ -6537,6 +6541,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+const defaultDbxValueListViewGroupValuesFunction = (items) => {
+    const data = {};
+    const result = {
+        id: '_',
+        data,
+        items
+    };
+    return [result];
+};
+/**
+ * Interface for a view that renders the items of a DbxList.
+ */
+class DbxValueListViewGroupDelegate {
+}
+function defaultDbxValueListViewGroupDelegate() {
+    const result = {
+        groupValues: defaultDbxValueListViewGroupValuesFunction
+    };
+    return result;
+}
+// eslint-disable-next-line
+function provideDbxValueListViewGroupDelegate(sourceType) {
+    // use of any here is allowed as typings are not relevant for providers
+    return [
+        {
+            provide: DbxValueListViewGroupDelegate,
+            useExisting: forwardRef(() => sourceType)
+        }
+    ];
+}
+
 /**
  * Renders a list view using input configuration. Requires a parent DbxListView.
  */
@@ -6548,7 +6583,7 @@ class DbxValueListViewComponent extends AbstractDbxValueListViewDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxValueListViewComponent, selector: "dbx-list-view", usesInheritance: true, ngImport: i0, template: `
     <dbx-list-view-content [items]="items$ | async" [emitAllClicks]="emitAllClicks$ | async"></dbx-list-view-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(function () { return DbxValueListItemViewComponent; }), selector: "dbx-list-view-content", inputs: ["emitAllClicks", "items"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(function () { return DbxValueListViewContentComponent; }), selector: "dbx-list-view-content", inputs: ["emitAllClicks", "items"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListViewComponent, decorators: [{
             type: Component,
@@ -6562,13 +6597,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Content view for a DbxValueListView. It can be used directly in cases where the items are already configured, or want to be configured in a non-standard fashion.
  */
-class DbxValueListItemViewComponent {
-    constructor(dbxListView) {
+class DbxValueListViewContentComponent {
+    constructor(dbxListView, inputDbxListGroupDelegate) {
         this.dbxListView = dbxListView;
+        this._items = new BehaviorSubject(undefined);
+        this.groups$ = this._items.pipe(switchMap((items) => asObservable(this._dbxListGroupDelegate.groupValues(items ?? []))), shareReplay(1));
         this.disabled$ = this.dbxListView.disabled$;
+        this.trackGroupByFunction = (_, v) => {
+            return v.id; // track by the id
+        };
+        this._dbxListGroupDelegate = inputDbxListGroupDelegate ?? defaultDbxValueListViewGroupDelegate();
         const trackBy = dbxListView.trackBy;
         this.trackByFunction = trackBy ? (index, item) => trackBy(index, item.itemValue) : () => undefined;
     }
+    ngOnDestroy() {
+        this._items.complete();
+    }
+    get items() {
+        return this._items.value;
+    }
+    set items(items) {
+        this._items.next(items);
+    }
     onClickItem(item) {
         // do not emit clicks for disabled items.
         if (!item.disabled) {
@@ -6584,39 +6634,125 @@ class DbxValueListItemViewComponent {
     rippleDisabledOnItem(item) {
         return item.rippleDisabled || (!this.emitAllClicks && !item.anchor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListItemViewComponent, deps: [{ token: DbxListView }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxValueListItemViewComponent, selector: "dbx-list-view-content", inputs: { emitAllClicks: "emitAllClicks", items: "items" }, host: { classAttribute: "dbx-list-view" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListViewContentComponent, deps: [{ token: DbxListView }, { token: DbxValueListViewGroupDelegate, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxValueListViewContentComponent, selector: "dbx-list-view-content", inputs: { emitAllClicks: "emitAllClicks", items: "items" }, host: { classAttribute: "dbx-list-view" }, ngImport: i0, template: `
+    <mat-nav-list [disabled]="disabled$ | async">
+      <ng-container *ngFor="let group of groups$ | async; trackBy: trackGroupByFunction">
+        <dbx-list-view-content-group [group]="group"></dbx-list-view-content-group>
+      </ng-container>
+    </mat-nav-list>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(function () { return i4$2.MatNavList; }), selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i0.forwardRef(function () { return DbxValueListViewContentGroupComponent; }), selector: "dbx-list-view-content-group", inputs: ["group"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListViewContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-list-view-content',
+                    template: `
     <mat-nav-list [disabled]="disabled$ | async">
+      <ng-container *ngFor="let group of groups$ | async; trackBy: trackGroupByFunction">
+        <dbx-list-view-content-group [group]="group"></dbx-list-view-content-group>
+      </ng-container>
+    </mat-nav-list>
+  `,
+                    host: {
+                        class: 'dbx-list-view'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: DbxListView }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DbxValueListViewGroupDelegate]
+                }] }]; }, propDecorators: { emitAllClicks: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }] } });
+/**
+ * Content view for a DbxValueListView. It can be used directly in cases where the items are already configured, or want to be configured in a non-standard fashion.
+ */
+class DbxValueListViewContentGroupComponent {
+    get cssClasses() {
+        return this._cssClasses;
+    }
+    get items() {
+        return this._group?.items;
+    }
+    get headerConfig() {
+        return this._group?.headerConfig;
+    }
+    get footerConfig() {
+        return this._group?.footerConfig;
+    }
+    constructor(dbxValueListViewContentComponent, cdRef) {
+        this.dbxValueListViewContentComponent = dbxValueListViewContentComponent;
+        this.cdRef = cdRef;
+        this.disabled$ = this.dbxValueListViewContentComponent.disabled$;
+        this.trackByFunction = this.dbxValueListViewContentComponent.trackByFunction;
+    }
+    get group() {
+        return this._group;
+    }
+    set group(group) {
+        this._group = group;
+        this._cssClasses = spaceSeparatedCssClasses(group?.cssClasses);
+        this.cdRef.markForCheck();
+    }
+    onClickItem(item) {
+        this.dbxValueListViewContentComponent.onClickItem(item);
+    }
+    onClickValue(value) {
+        this.dbxValueListViewContentComponent.onClickValue(value);
+    }
+    rippleDisabledOnItem(item) {
+        return this.dbxValueListViewContentComponent.rippleDisabledOnItem(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListViewContentGroupComponent, deps: [{ token: DbxValueListViewContentComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxValueListViewContentGroupComponent, selector: "dbx-list-view-content-group", inputs: { group: "group" }, host: { properties: { "class": "cssClasses" }, classAttribute: "dbx-list-view-group" }, ngImport: i0, template: `
+    <div class="dbx-list-view-group-content">
+      <div class="dbx-list-view-group-header" *ngIf="headerConfig">
+        <dbx-injection [config]="headerConfig"></dbx-injection>
+      </div>
       <dbx-anchor *ngFor="let item of items; trackBy: trackByFunction" [anchor]="item.anchor" [disabled]="item.disabled">
         <a mat-list-item class="dbx-list-view-item" [disabled]="item.disabled" [disableRipple]="rippleDisabledOnItem(item)" (click)="onClickItem(item)">
           <mat-icon matListItemIcon *ngIf="item.icon">{{ item.icon }}</mat-icon>
           <dbx-injection [config]="item.config"></dbx-injection>
         </a>
       </dbx-anchor>
-    </mat-nav-list>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+      <div class="dbx-list-view-group-footer" *ngIf="footerConfig">
+        <dbx-injection [config]="footerConfig"></dbx-injection>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListItemViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListViewContentGroupComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'dbx-list-view-content',
+                    selector: 'dbx-list-view-content-group',
                     template: `
-    <mat-nav-list [disabled]="disabled$ | async">
+    <div class="dbx-list-view-group-content">
+      <div class="dbx-list-view-group-header" *ngIf="headerConfig">
+        <dbx-injection [config]="headerConfig"></dbx-injection>
+      </div>
       <dbx-anchor *ngFor="let item of items; trackBy: trackByFunction" [anchor]="item.anchor" [disabled]="item.disabled">
         <a mat-list-item class="dbx-list-view-item" [disabled]="item.disabled" [disableRipple]="rippleDisabledOnItem(item)" (click)="onClickItem(item)">
           <mat-icon matListItemIcon *ngIf="item.icon">{{ item.icon }}</mat-icon>
           <dbx-injection [config]="item.config"></dbx-injection>
         </a>
       </dbx-anchor>
-    </mat-nav-list>
+      <div class="dbx-list-view-group-footer" *ngIf="footerConfig">
+        <dbx-injection [config]="footerConfig"></dbx-injection>
+      </div>
+    </div>
   `,
                     host: {
-                        class: 'dbx-list-view'
-                    }
+                        class: 'dbx-list-view-group',
+                        '[class]': 'cssClasses'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: DbxListView }]; }, propDecorators: { emitAllClicks: [{
-                type: Input
-            }], items: [{
+        }], ctorParameters: function () { return [{ type: DbxValueListViewContentComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { group: [{
                 type: Input
             }] } });
 
@@ -6632,7 +6768,7 @@ class DbxSelectionValueListViewComponent extends AbstractDbxValueListViewDirecti
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSelectionValueListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSelectionValueListViewComponent, selector: "dbx-selection-list-view", usesInheritance: true, ngImport: i0, template: `
     <dbx-selection-list-view-content [selectionMode]="selectionMode$ | async" [multiple]="multiple$ | async" [items]="items$ | async"></dbx-selection-list-view-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(function () { return DbxSelectionValueListItemViewComponent; }), selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(function () { return DbxSelectionValueListViewContentComponent; }), selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSelectionValueListViewComponent, decorators: [{
             type: Component,
@@ -6646,9 +6782,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Content view for a DbxSelectionValueListView. It can be used directly in cases where the items are already configured, or want to be configured in a non-standard fashion.
  */
-class DbxSelectionValueListItemViewComponent extends DbxValueListItemViewComponent {
-    constructor(dbxListView) {
-        super(dbxListView);
+class DbxSelectionValueListViewContentComponent extends DbxValueListViewContentComponent {
+    constructor(dbxListView, inputDbxListGroupDelegate) {
+        super(dbxListView, inputDbxListGroupDelegate);
         if (!dbxListView.selectionChange) {
             throw new Error('Parent dbxListView to DbxSelectionValueListViewComponent has no selectionChange emitter.');
         }
@@ -6664,8 +6800,8 @@ class DbxSelectionValueListItemViewComponent extends DbxValueListItemViewCompone
             items
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSelectionValueListItemViewComponent, deps: [{ token: DbxListView }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSelectionValueListItemViewComponent, selector: "dbx-selection-list-view-content", inputs: { multiple: "multiple", selectionMode: "selectionMode" }, host: { classAttribute: "dbx-list-view dbx-selection-list-view" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSelectionValueListViewContentComponent, deps: [{ token: DbxListView }, { token: DbxValueListViewGroupDelegate, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxSelectionValueListViewContentComponent, selector: "dbx-selection-list-view-content", inputs: { multiple: "multiple", selectionMode: "selectionMode" }, host: { classAttribute: "dbx-list-view dbx-selection-list-view" }, usesInheritance: true, ngImport: i0, template: `
     <ng-container [ngSwitch]="selectionMode">
       <ng-container *ngSwitchCase="'view'">
         <dbx-list-view-content [items]="items"></dbx-list-view-content>
@@ -6679,9 +6815,9 @@ class DbxSelectionValueListItemViewComponent extends DbxValueListItemViewCompone
         </mat-selection-list>
       </ng-container>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i4$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxValueListItemViewComponent, selector: "dbx-list-view-content", inputs: ["emitAllClicks", "items"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i4$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i4$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxValueListViewContentComponent, selector: "dbx-list-view-content", inputs: ["emitAllClicks", "items"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSelectionValueListItemViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxSelectionValueListViewContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-selection-list-view-content',
@@ -6702,9 +6838,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   `,
                     host: {
                         class: 'dbx-list-view dbx-selection-list-view'
-                    }
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: DbxListView }]; }, propDecorators: { multiple: [{
+        }], ctorParameters: function () { return [{ type: DbxListView }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DbxValueListViewGroupDelegate]
+                }] }]; }, propDecorators: { multiple: [{
                 type: Input
             }], selectionMode: [{
                 type: Input
@@ -6762,7 +6904,7 @@ class DbxValueListGridViewComponent extends AbstractDbxValueListViewDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListGridViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxValueListGridViewComponent, selector: "dbx-list-grid-view", usesInheritance: true, ngImport: i0, template: `
     <dbx-list-grid-view-content [grid]="grid$ | async" [items]="items$ | async" [emitAllClicks]="emitAllClicks$ | async"></dbx-list-grid-view-content>
-  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(function () { return DbxValueListGridItemViewComponent; }), selector: "dbx-list-grid-view-content", inputs: ["grid"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(function () { return DbxValueListGridViewContentComponent; }), selector: "dbx-list-grid-view-content", inputs: ["grid"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListGridViewComponent, decorators: [{
             type: Component,
@@ -6811,9 +6953,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Content view for a DbxValueListGridView. It can be used directly in cases where the items are already configured, or want to be configured in a non-standard fashion.
  */
-class DbxValueListGridItemViewComponent extends DbxValueListItemViewComponent {
+class DbxValueListGridViewContentComponent extends DbxValueListViewContentComponent {
     constructor(dbxListView, _gridSizeOverride) {
-        super(dbxListView);
+        super(dbxListView, undefined);
         this._gridSizeOverride = _gridSizeOverride;
         this._defaultGrid = new BehaviorSubject(undefined);
         this.grid$ = combineLatest([this._defaultGrid, this._gridSizeOverride?.gridSize$ ?? of(undefined)]).pipe(map(([defaultGrid, overrideGrid]) => {
@@ -6827,18 +6969,19 @@ class DbxValueListGridItemViewComponent extends DbxValueListItemViewComponent {
         this._defaultGrid.next(grid);
     }
     ngOnDestroy() {
+        super.ngOnDestroy();
         this._defaultGrid.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListGridItemViewComponent, deps: [{ token: DbxListView }, { token: DbxValueListGridSizeDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxValueListGridItemViewComponent, selector: "dbx-list-grid-view-content", inputs: { grid: "grid" }, host: { classAttribute: "dbx-list-grid-view" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListGridViewContentComponent, deps: [{ token: DbxListView }, { token: DbxValueListGridSizeDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxValueListGridViewContentComponent, selector: "dbx-list-grid-view-content", inputs: { grid: "grid" }, host: { classAttribute: "dbx-list-grid-view" }, usesInheritance: true, ngImport: i0, template: `
     <div [gdGap]="gap$ | async" [gdColumns]="columns$ | async">
       <dbx-anchor *ngFor="let item of items; trackBy: trackByFunction" matRipple [matRippleDisabled]="rippleDisabledOnItem(item)" class="dbx-list-grid-view-item" [anchor]="item.anchor" [disabled]="item.disabled" (click)="onClickItem(item)">
         <div dbx-injection [config]="item.config"></div>
       </dbx-anchor>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i4$4.DefaultGridColumnsDirective, selector: "  [gdColumns],  [gdColumns.xs], [gdColumns.sm], [gdColumns.md], [gdColumns.lg], [gdColumns.xl],  [gdColumns.lt-sm], [gdColumns.lt-md], [gdColumns.lt-lg], [gdColumns.lt-xl],  [gdColumns.gt-xs], [gdColumns.gt-sm], [gdColumns.gt-md], [gdColumns.gt-lg]", inputs: ["gdColumns", "gdColumns.xs", "gdColumns.sm", "gdColumns.md", "gdColumns.lg", "gdColumns.xl", "gdColumns.lt-sm", "gdColumns.lt-md", "gdColumns.lt-lg", "gdColumns.lt-xl", "gdColumns.gt-xs", "gdColumns.gt-sm", "gdColumns.gt-md", "gdColumns.gt-lg"] }, { kind: "directive", type: i4$4.DefaultGridGapDirective, selector: "  [gdGap],  [gdGap.xs], [gdGap.sm], [gdGap.md], [gdGap.lg], [gdGap.xl],  [gdGap.lt-sm], [gdGap.lt-md], [gdGap.lt-lg], [gdGap.lt-xl],  [gdGap.gt-xs], [gdGap.gt-sm], [gdGap.gt-md], [gdGap.gt-lg]", inputs: ["gdGap", "gdGap.xs", "gdGap.sm", "gdGap.md", "gdGap.lg", "gdGap.xl", "gdGap.lt-sm", "gdGap.lt-md", "gdGap.lt-lg", "gdGap.lt-xl", "gdGap.gt-xs", "gdGap.gt-sm", "gdGap.gt-md", "gdGap.gt-lg"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i4$4.DefaultGridColumnsDirective, selector: "  [gdColumns],  [gdColumns.xs], [gdColumns.sm], [gdColumns.md], [gdColumns.lg], [gdColumns.xl],  [gdColumns.lt-sm], [gdColumns.lt-md], [gdColumns.lt-lg], [gdColumns.lt-xl],  [gdColumns.gt-xs], [gdColumns.gt-sm], [gdColumns.gt-md], [gdColumns.gt-lg]", inputs: ["gdColumns", "gdColumns.xs", "gdColumns.sm", "gdColumns.md", "gdColumns.lg", "gdColumns.xl", "gdColumns.lt-sm", "gdColumns.lt-md", "gdColumns.lt-lg", "gdColumns.lt-xl", "gdColumns.gt-xs", "gdColumns.gt-sm", "gdColumns.gt-md", "gdColumns.gt-lg"] }, { kind: "directive", type: i4$4.DefaultGridGapDirective, selector: "  [gdGap],  [gdGap.xs], [gdGap.sm], [gdGap.md], [gdGap.lg], [gdGap.xl],  [gdGap.lt-sm], [gdGap.lt-md], [gdGap.lt-lg], [gdGap.lt-xl],  [gdGap.gt-xs], [gdGap.gt-sm], [gdGap.gt-md], [gdGap.gt-lg]", inputs: ["gdGap", "gdGap.xs", "gdGap.sm", "gdGap.md", "gdGap.lg", "gdGap.xl", "gdGap.lt-sm", "gdGap.lt-md", "gdGap.lt-lg", "gdGap.lt-xl", "gdGap.gt-xs", "gdGap.gt-sm", "gdGap.gt-md", "gdGap.gt-lg"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListGridItemViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxValueListGridViewContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-list-grid-view-content',
@@ -6851,7 +6994,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   `,
                     host: {
                         class: 'dbx-list-grid-view'
-                    }
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: function () { return [{ type: DbxListView }, { type: DbxValueListGridSizeDirective, decorators: [{
                     type: Optional
@@ -6897,33 +7041,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['dbxListItemIsSelectedModifier']
             }] } });
 
+const DBX_LIST_TITLE_GROUP_DATA = new InjectionToken('DbxListTitleGroupData');
+/**
+ * Delegate used to for grouping DbxValueListItemConfig<T, I> values.
+ */
+class DbxListTitleGroupDirective {
+    constructor() {
+        this._delegate = new BehaviorSubject(undefined);
+        this.groupValues = (items) => {
+            return this._delegate.pipe(map((delegate) => {
+                let groups;
+                if (delegate != null) {
+                    const groupsValuesMap = makeValuesGroupMap(items, delegate.groupValueForItem);
+                    const { sortGroupsByData, cssClasses: inputCssClasses } = delegate;
+                    const cssClassesForAllGroups = inputCssClasses ?? [];
+                    const componentClass = delegate.headerComponentClass ?? DbxListTitleGroupHeaderComponent;
+                    groups = Array.from(groupsValuesMap.entries()).map(([value, items]) => {
+                        const data = delegate.dataForGroupValue(value, items);
+                        data.value = value;
+                        const cssClasses = data.cssClasses ? [...cssClassesForAllGroups, ...data.cssClasses] : cssClassesForAllGroups;
+                        const group = {
+                            id: String(value),
+                            data,
+                            items,
+                            headerConfig: {
+                                componentClass,
+                                providers: [
+                                    {
+                                        provide: DBX_LIST_TITLE_GROUP_DATA,
+                                        useValue: data
+                                    }
+                                ]
+                            },
+                            cssClasses
+                        };
+                        return group;
+                    });
+                    if (sortGroupsByData) {
+                        groups.sort(compareWithMappedValuesFunction((x) => x.data, sortGroupsByData));
+                    }
+                }
+                else {
+                    groups = [
+                        {
+                            id: '_',
+                            data: { value: null, title: '' },
+                            items
+                        }
+                    ];
+                }
+                return groups;
+            }));
+        };
+    }
+    ngOnDestroy() {
+        this._delegate.complete();
+    }
+    get delegate() {
+        return this._delegate.value;
+    }
+    set delegate(delegate) {
+        this._delegate.next(delegate);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxListTitleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DbxListTitleGroupDirective, selector: "[dbxListTitleGroup]", inputs: { delegate: ["dbxListTitleGroup", "delegate"] }, providers: [provideDbxValueListViewGroupDelegate(DbxListTitleGroupDirective)], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxListTitleGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxListTitleGroup]',
+                    providers: [provideDbxValueListViewGroupDelegate(DbxListTitleGroupDirective)]
+                }]
+        }], propDecorators: { delegate: [{
+                type: Input,
+                args: ['dbxListTitleGroup']
+            }] } });
+/**
+ *
+ */
+class DbxListTitleGroupHeaderComponent {
+    get icon() {
+        return this.data.icon;
+    }
+    get title() {
+        return this.data.title;
+    }
+    get hint() {
+        return this.data.hint;
+    }
+    constructor(data) {
+        this.data = data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxListTitleGroupHeaderComponent, deps: [{ token: DBX_LIST_TITLE_GROUP_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxListTitleGroupHeaderComponent, selector: "dbx-list-title-group-header", host: { classAttribute: "dbx-list-title-group-header" }, ngImport: i0, template: `
+    <div class="dbx-list-item-padded dbx-list-two-line-item">
+      <mat-icon class="item-icon" *ngIf="icon">{{ icon }}</mat-icon>
+      <div class="item-left">
+        <div class="mat-subtitle-2">{{ title }}</div>
+        <div *ngIf="hint" class="item-details">{{ hint }}</div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxListTitleGroupHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-list-title-group-header',
+                    template: `
+    <div class="dbx-list-item-padded dbx-list-two-line-item">
+      <mat-icon class="item-icon" *ngIf="icon">{{ icon }}</mat-icon>
+      <div class="item-left">
+        <div class="mat-subtitle-2">{{ title }}</div>
+        <div *ngIf="hint" class="item-details">{{ hint }}</div>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'dbx-list-title-group-header'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DBX_LIST_TITLE_GROUP_DATA]
+                }] }]; } });
+
+const privateDeclarations = [DbxListInternalContentDirective];
+const declarations$3 = [
+    // directives
+    DbxListComponent,
+    DbxListEmptyContentComponent,
+    DbxValueListViewComponent,
+    DbxValueListViewContentComponent,
+    DbxValueListViewContentGroupComponent,
+    DbxValueListGridSizeDirective,
+    DbxValueListGridViewComponent,
+    DbxValueListGridViewContentComponent,
+    DbxListTitleGroupDirective,
+    DbxListTitleGroupHeaderComponent,
+    DbxSelectionValueListViewComponent,
+    DbxSelectionValueListViewContentComponent,
+    DbxValueListItemModifierDirective,
+    DbxListItemDisableRippleModifierDirective,
+    DbxListItemIsSelectedModifierDirective
+];
 class DbxListLayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxListLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxListLayoutModule, declarations: [
-            //
+            // directives
             DbxListComponent,
-            DbxListInternalContentDirective,
             DbxListEmptyContentComponent,
             DbxValueListViewComponent,
-            DbxValueListItemViewComponent,
+            DbxValueListViewContentComponent,
+            DbxValueListViewContentGroupComponent,
             DbxValueListGridSizeDirective,
             DbxValueListGridViewComponent,
-            DbxValueListGridItemViewComponent,
+            DbxValueListGridViewContentComponent,
+            DbxListTitleGroupDirective,
+            DbxListTitleGroupHeaderComponent,
             DbxSelectionValueListViewComponent,
-            DbxSelectionValueListItemViewComponent,
+            DbxSelectionValueListViewContentComponent,
             DbxValueListItemModifierDirective,
             DbxListItemDisableRippleModifierDirective,
-            DbxListItemIsSelectedModifierDirective], imports: [CommonModule, MatRippleModule, FlexLayoutModule, DbxLoadingModule, DbxRouterAnchorModule, InfiniteScrollModule, DbxInjectionComponentModule, MatListModule, MatIconModule], exports: [
-            //
+            DbxListItemIsSelectedModifierDirective, DbxListInternalContentDirective], imports: [CommonModule, MatRippleModule, FlexLayoutModule, DbxLoadingModule, DbxRouterAnchorModule, InfiniteScrollModule, DbxInjectionComponentModule, MatListModule, MatIconModule], exports: [
+            // directives
             DbxListComponent,
             DbxListEmptyContentComponent,
             DbxValueListViewComponent,
-            DbxValueListItemViewComponent,
+            DbxValueListViewContentComponent,
+            DbxValueListViewContentGroupComponent,
             DbxValueListGridSizeDirective,
             DbxValueListGridViewComponent,
-            DbxValueListGridItemViewComponent,
+            DbxValueListGridViewContentComponent,
+            DbxListTitleGroupDirective,
+            DbxListTitleGroupHeaderComponent,
             DbxSelectionValueListViewComponent,
-            DbxSelectionValueListItemViewComponent,
+            DbxSelectionValueListViewContentComponent,
             DbxValueListItemModifierDirective,
             DbxListItemDisableRippleModifierDirective,
             DbxListItemIsSelectedModifierDirective] }); }
@@ -6933,37 +7226,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatRippleModule, FlexLayoutModule, DbxLoadingModule, DbxRouterAnchorModule, InfiniteScrollModule, DbxInjectionComponentModule, MatListModule, MatIconModule],
-                    declarations: [
-                        //
-                        DbxListComponent,
-                        DbxListInternalContentDirective,
-                        DbxListEmptyContentComponent,
-                        DbxValueListViewComponent,
-                        DbxValueListItemViewComponent,
-                        DbxValueListGridSizeDirective,
-                        DbxValueListGridViewComponent,
-                        DbxValueListGridItemViewComponent,
-                        DbxSelectionValueListViewComponent,
-                        DbxSelectionValueListItemViewComponent,
-                        DbxValueListItemModifierDirective,
-                        DbxListItemDisableRippleModifierDirective,
-                        DbxListItemIsSelectedModifierDirective
-                    ],
-                    exports: [
-                        //
-                        DbxListComponent,
-                        DbxListEmptyContentComponent,
-                        DbxValueListViewComponent,
-                        DbxValueListItemViewComponent,
-                        DbxValueListGridSizeDirective,
-                        DbxValueListGridViewComponent,
-                        DbxValueListGridItemViewComponent,
-                        DbxSelectionValueListViewComponent,
-                        DbxSelectionValueListItemViewComponent,
-                        DbxValueListItemModifierDirective,
-                        DbxListItemDisableRippleModifierDirective,
-                        DbxListItemIsSelectedModifierDirective
-                    ]
+                    declarations: [...declarations$3, ...privateDeclarations],
+                    exports: declarations$3
                 }]
         }] });
 
@@ -7797,7 +8061,7 @@ class DbxPopupControlButtonsComponent {
     </ng-container>
     <dbx-button-spacer></dbx-button-spacer>
     <dbx-button [flat]="true" icon="close" color="warn" (buttonClick)="closeClicked()"></dbx-button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxPopupControlButtonsComponent, decorators: [{
             type: Component,
@@ -8339,7 +8603,7 @@ class DbxActionUIRouterTransitionSafetyDialogComponent extends AbstractDialogDir
         <dbx-button-spacer></dbx-button-spacer>
       </ng-container>
     </dbx-prompt-confirm>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxReadableErrorComponent, selector: "dbx-error", inputs: ["error"] }, { kind: "directive", type: DbxActionErrorDirective, selector: "[dbxActionError]" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxPromptConfirmComponent, selector: "dbx-prompt-confirm", inputs: ["config"], outputs: ["confirm", "cancel"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxReadableErrorComponent, selector: "dbx-error", inputs: ["error"] }, { kind: "directive", type: DbxActionErrorDirective, selector: "[dbxActionError]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxActionUIRouterTransitionSafetyDialogComponent, decorators: [{
             type: Component,
@@ -8903,7 +9167,7 @@ class DbxDownloadTextViewComponent extends AbstractSubscriptionDirective {
         this._contentLoadingState.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDownloadTextViewComponent, deps: [{ token: i1$c.Clipboard }, { token: i1$1.MatSnackBar }, { token: i1$9.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxDownloadTextViewComponent, selector: "dbx-download-text-view", inputs: { loadingText: "loadingText", linear: "linear", showTitle: "showTitle", showPreview: "showPreview", content: "content", contentState: "contentState" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear\" [text]=\"loadingText\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    <div *ngIf=\"showTitle\" class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileName$ | async }}</div>\n    <div *ngIf=\"showPreview\" class=\"dbx-download-text-preview dbx-json dbx-content-pit dbx-content-pit-scrollable dbx-mb3\">{{ contentData$ | async }}</div>\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      <dbx-button-spacer></dbx-button-spacer>\n      <a #downloadButton [href]=\"fileUrl$ | async\" [attr.download]=\"fileName$ | async\"><dbx-button icon=\"download\" text=\"Download\" [raised]=\"true\" [working]=\"!(downloadReady$ | async)\" [disabled]=\"!(downloadReady$ | async)\"></dbx-button></a>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxDownloadTextViewComponent, selector: "dbx-download-text-view", inputs: { loadingText: "loadingText", linear: "linear", showTitle: "showTitle", showPreview: "showPreview", content: "content", contentState: "contentState" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear\" [text]=\"loadingText\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    <div *ngIf=\"showTitle\" class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileName$ | async }}</div>\n    <div *ngIf=\"showPreview\" class=\"dbx-download-text-preview dbx-json dbx-content-pit dbx-content-pit-scrollable dbx-mb3\">{{ contentData$ | async }}</div>\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      <dbx-button-spacer></dbx-button-spacer>\n      <a #downloadButton [href]=\"fileUrl$ | async\" [attr.download]=\"fileName$ | async\"><dbx-button icon=\"download\" text=\"Download\" [raised]=\"true\" [working]=\"!(downloadReady$ | async)\" [disabled]=\"!(downloadReady$ | async)\"></dbx-button></a>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "padding", "context", "loading", "error"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "basic", "raised", "stroked", "flat", "iconOnly", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
             type: Component,
@@ -9259,5 +9523,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxErrorWidgetComponent, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxPartialPresetFilterMenuDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_THEME_COLORS, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, 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, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxBarButtonComponent, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxBodyDirective, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerComponent, DbxCardBoxLayoutModule, DbxChipDirective, DbxColorDirective, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDownloadTextModule, DbxDownloadTextViewComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxFormDescriptionComponent, DbxHintComponent, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIfSidenavDisplayModeDirective, DbxInteractionModule, DbxIntroActionSectionComponent, DbxItemLayoutModule, DbxKeypressModule, DbxLabelBlockComponent, DbxLabelComponent, DbxLayoutModule, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, DbxListLayoutModule, DbxListView, DbxListViewWrapper, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxModelInfoModule, DbxModelObjectStateService, actions as DbxModelStateActions, model_actions as DbxModelStateModelActions, DbxModelTrackerService, DbxModelTypesService, DbxModelViewTrackerStorage, DbxNavbarComponent, DbxNoteComponent, DbxNoticeComponent, DbxOkComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxPopoverCloseButtonComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionContentModule, DbxPopoverInteractionModule, DbxPopoverScrollContentComponent, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, 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, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadComponent, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListGridItemViewComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListItemViewComponent, DbxValueListView, DbxValueListViewComponent, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebUIRouterModule, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetModule, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, appObjectViewTrackerStorageFactory, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, dbxColorBackground, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxValueListItemDecisionFunction, disableRightClickInCdkBackdrop, index as fromDbxModel, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, index$1 as onDbxModel, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewModifier, provideTwoColumnsContext, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier };
+export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxErrorWidgetComponent, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxPartialPresetFilterMenuDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_LIST_ITEM_IS_SELECTED_ITEM_MODIFIER_KEY, DBX_LIST_TITLE_GROUP_DATA, DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_THEME_COLORS, DBX_THEME_COLORS_EXTRA, DBX_THEME_COLORS_EXTRA_SECONDARY, DBX_THEME_COLORS_MAIN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_LIST_ITEM_IS_SELECTED_FUNCTION, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_SIDENAV_MENU_ICON, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_ERROR_POPOVER_KEY, DEFAULT_ERROR_WIDGET_CODE, 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, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxBarButtonComponent, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxBodyDirective, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerDirective, DbxCardBoxComponent, DbxCardBoxContainerComponent, DbxCardBoxLayoutModule, DbxChipDirective, DbxColorDirective, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxDetailBlockHeaderComponent, DbxDialogContentCloseComponent, DbxDialogContentDirective, DbxDialogContentFooterComponent, DbxDialogInteractionModule, DbxDownloadTextModule, DbxDownloadTextViewComponent, DbxErrorDefaultErrorWidgetComponent, DbxErrorDetailsComponent, DbxErrorPopoverComponent, DbxErrorWidgetService, DbxErrorWidgetViewComponent, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxFormDescriptionComponent, DbxHintComponent, DbxIconButtonComponent, DbxIconButtonModule, DbxIconItemComponent, DbxIconSpacerDirective, DbxIfSidenavDisplayModeDirective, DbxInteractionModule, DbxIntroActionSectionComponent, DbxItemLayoutModule, DbxKeypressModule, DbxLabelBlockComponent, DbxLabelComponent, DbxLayoutModule, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListItemIsSelectedModifierDirective, DbxListLayoutModule, DbxListTitleGroupDirective, DbxListTitleGroupHeaderComponent, DbxListView, DbxListViewWrapper, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxModelInfoModule, DbxModelObjectStateService, actions as DbxModelStateActions, model_actions as DbxModelStateModelActions, DbxModelTrackerService, DbxModelTypesService, DbxModelViewTrackerStorage, DbxNavbarComponent, DbxNoteComponent, DbxNoticeComponent, DbxOkComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPartialPresetFilterListComponent, DbxPartialPresetFilterMenuComponent, DbxPopoverCloseButtonComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionContentModule, DbxPopoverInteractionModule, DbxPopoverScrollContentComponent, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent, 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, DbxSelectionValueListViewComponent, DbxSelectionValueListViewContentComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxSpinnerButtonComponent, DbxStepComponent, DbxStepLayoutModule, DbxStructureDirective, DbxStructureModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadComponent, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, DbxUIRouterSegueAnchorComponent, DbxUnitedStatesAddressComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListGridViewContentComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListView, DbxValueListViewComponent, DbxValueListViewContentComponent, DbxValueListViewContentGroupComponent, DbxValueListViewGroupDelegate, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebUIRouterModule, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetModule, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, addConfigToValueListItems, allDbxModelViewTrackerEventModelKeys, allDbxModelViewTrackerEventSetModelKeys, appObjectViewTrackerStorageFactory, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, dbxColorBackground, dbxPresetFilterMenuButtonIconObservable, dbxPresetFilterMenuButtonTextObservable, dbxValueListItemDecisionFunction, defaultDbxValueListViewGroupDelegate, defaultDbxValueListViewGroupValuesFunction, disableRightClickInCdkBackdrop, index as fromDbxModel, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, index$1 as onDbxModel, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewGroupDelegate, provideDbxValueListViewModifier, provideTwoColumnsContext, sanitizeDbxDialogContentConfig, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map