@dereekb/dbx-web 10.0.24 → 10.1.0

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';
@@ -1286,7 +1286,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 +1296,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 +2237,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 +2250,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 +2294,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 +2304,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]
                 }]
         }] });
 
@@ -3691,7 +3691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const declarations$8 = [
+const declarations$9 = [
     //
     DbxContentDirective,
     DbxContentContainerDirective,
@@ -3729,8 +3729,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 +3768,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 +3778,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 +3990,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 +4035,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]
                 }]
         }] });
 
@@ -6318,7 +6318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-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 +6328,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 +6368,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 +6422,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 +6432,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 +6537,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 +6579,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 +6593,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 +6630,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 +6764,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 +6778,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 +6796,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 +6811,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 +6834,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 +6900,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 +6949,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 +6965,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 +6990,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 +7037,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 +7222,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
                 }]
         }] });
 
@@ -9259,5 +9519,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_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