@dereekb/dbx-web 8.13.8 → 8.15.0

package/fesm2020/dereekb-dbx-web.mjs

@@ -5,7 +5,7 @@ import { BehaviorSubject, map, combineLatest, distinctUntilChanged, shareReplay,
 import * as i1$1 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1$2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, safeMarkForCheck, AbstractDbxButtonDirective, provideDbxButton, DbxCoreButtonModule, AbstractTransitionWatcherDirective, AbstractDbxActionValueOnTriggerDirective, safeDetectChanges, AbstractDbxAnchorDirective, DbxInjectionComponentModule, expandClickableAnchorLinkTrees, AbstractTransitionDirective, tapDetectChanges, asSegueRef, checkNgContentWrapperHasContent, anchorTypeForAnchor, AnchorType, DbxCoreActionModule, DbxCoreFilterModule, isIdleActionState, canTriggerAction } from '@dereekb/dbx-core';
+import { AbstractSubscriptionDirective, safeMarkForCheck, AbstractDbxButtonDirective, provideDbxButton, DbxCoreButtonModule, AbstractTransitionWatcherDirective, AbstractDbxActionValueOnTriggerDirective, safeDetectChanges, AbstractDbxAnchorDirective, DbxInjectionComponentModule, expandClickableAnchorLinkTrees, AbstractTransitionDirective, tapDetectChanges, asSegueRef, checkNgContentWrapperHasContent, anchorTypeForAnchor, AnchorType, DbxCoreActionModule, DbxCoreFilterModule, isIdleActionState, canTriggerAction, DBX_INJECTION_COMPONENT_DATA } from '@dereekb/dbx-core';
 import ms from 'ms';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -15,7 +15,7 @@ import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { getValueFromGetter, mergeObjects, splitCommaSeparatedStringToSet, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, isMaybeNot, isNotNullOrEmptyString, toReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction } from '@dereekb/util';
+import { getValueFromGetter, mergeObjects, splitCommaSeparatedStringToSet, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, isMaybeNot, isNotNullOrEmptyString, toReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction, filterMaybeValues, mapIterable } from '@dereekb/util';
 import * as i3$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i6 from '@angular/material/core';
@@ -46,7 +46,7 @@ import { isBoolean } from 'class-validator';
 import * as i3$4 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { HttpErrorResponse } from '@angular/common/http';
-import * as i4$1 from '@angular/flex-layout/grid';
+import * as i5$1 from '@angular/flex-layout/grid';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import linkifyStr from 'linkify-string';
 import * as i1$8 from '@angular/platform-browser';
@@ -61,9 +61,9 @@ import * as i2$2 from '@uirouter/core';
 import { startOfDay, endOfDay, startOfWeek, endOfWeek, startOfMonth, endOfMonth, differenceInDays, addDays, isSameDay, isBefore, isAfter, isSameMonth } from 'date-fns';
 import { distinctUntilChanged as distinctUntilChanged$1, switchMap as switchMap$1, first as first$1, tap as tap$1, map as map$1, shareReplay as shareReplay$1, withLatestFrom } from 'rxjs/operators';
 import { formatToTimeAndDurationString } from '@dereekb/date';
-import * as i4$2 from '@angular/material/button-toggle';
+import * as i4$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i5$1 from 'angular-calendar';
+import * as i5$2 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule, DateAdapter } from 'angular-calendar';
 import * as i9 from '@angular/flex-layout/extended';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@@ -4372,40 +4372,72 @@ const DEFAULT_LIST_GRID_SIZE_CONFIG = {
     gap: '8px'
 };
 /**
- * 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.
+ * Optional parent directive used to control grid size.
  */
-class DbxValueListGridItemViewComponent extends DbxValueListItemViewComponent {
+class DbxValueListGridSizeDirective {
     constructor() {
-        super(...arguments);
-        this._grid = DEFAULT_LIST_GRID_SIZE_CONFIG;
+        this._gridSize = new BehaviorSubject(undefined);
+        this.gridSize$ = this._gridSize.asObservable();
     }
-    get grid() {
-        return this._grid;
+    get gridSize() {
+        return this._gridSize.value;
     }
-    set grid(grid) {
-        this._grid = mergeObjects([DEFAULT_LIST_GRID_SIZE_CONFIG, grid]);
+    set gridSize(gridSize) {
+        if (gridSize) {
+            this._gridSize.next(gridSize);
+        }
+    }
+    ngOnDestroy() {
+        this._gridSize.complete();
+    }
+}
+DbxValueListGridSizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxValueListGridSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DbxValueListGridSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: DbxValueListGridSizeDirective, selector: "[dbxListGridSize]", inputs: { gridSize: ["dbxListGridSize", "gridSize"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxValueListGridSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxListGridSize]'
+                }]
+        }], propDecorators: { gridSize: [{
+                type: Input,
+                args: ['dbxListGridSize']
+            }] } });
+/**
+ * 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 {
+    constructor(dbxListView, _gridSizeOverride) {
+        super(dbxListView);
+        this._gridSizeOverride = _gridSizeOverride;
+        this._defaultGrid = new BehaviorSubject(undefined);
+        this.grid$ = combineLatest([this._defaultGrid, this._gridSizeOverride?.gridSize$ ?? of(undefined)]).pipe(map(([defaultGrid, overrideGrid]) => {
+            const grid = mergeObjects([DEFAULT_LIST_GRID_SIZE_CONFIG, defaultGrid, overrideGrid]);
+            return grid;
+        }), shareReplay(1));
+        this.gap$ = this.grid$.pipe(map((x) => x.gap));
+        this.columns$ = this.grid$.pipe(map((x) => x.columns));
     }
-    get gap() {
-        return this._grid.gap;
+    set grid(grid) {
+        this._defaultGrid.next(grid);
     }
-    get columns() {
-        return this._grid.columns;
+    ngOnDestroy() {
+        this._defaultGrid.complete();
     }
 }
-DbxValueListGridItemViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxValueListGridItemViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxValueListGridItemViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxValueListGridItemViewComponent, deps: [{ token: DbxListView }, { token: DbxValueListGridSizeDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DbxValueListGridItemViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxValueListGridItemViewComponent, selector: "dbx-list-grid-view-content", inputs: { grid: "grid" }, host: { classAttribute: "dbx-list-grid-view" }, usesInheritance: true, ngImport: i0, template: `
-    <div [gdGap]="gap" [gdColumns]="columns">
+    <div [gdGap]="gap$ | async" [gdColumns]="columns$ | async">
       <dbx-anchor *ngFor="let item of items" 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, components: [{ type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], directives: [{ type: i4$1.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"] }, { type: i4$1.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] });
+  `, isInline: true, components: [{ type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], directives: [{ type: i5$1.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"] }, { type: i5$1.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"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "async": i3$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxValueListGridItemViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-list-grid-view-content',
                     template: `
-    <div [gdGap]="gap" [gdColumns]="columns">
+    <div [gdGap]="gap$ | async" [gdColumns]="columns$ | async">
       <dbx-anchor *ngFor="let item of items" 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>
@@ -4415,7 +4447,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         class: 'dbx-list-grid-view'
                     }
                 }]
-        }], propDecorators: { grid: [{
+        }], ctorParameters: function () { return [{ type: DbxListView }, { type: DbxValueListGridSizeDirective, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { grid: [{
                 type: Input
             }] } });
 
@@ -4429,6 +4463,7 @@ DbxListLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         DbxListEmptyContentComponent,
         DbxValueListViewComponent,
         DbxValueListItemViewComponent,
+        DbxValueListGridSizeDirective,
         DbxValueListGridViewComponent,
         DbxValueListGridItemViewComponent,
         DbxSelectionValueListViewComponent,
@@ -4440,6 +4475,7 @@ DbxListLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ver
         DbxListEmptyContentComponent,
         DbxValueListViewComponent,
         DbxValueListItemViewComponent,
+        DbxValueListGridSizeDirective,
         DbxValueListGridViewComponent,
         DbxValueListGridItemViewComponent,
         DbxSelectionValueListViewComponent,
@@ -4458,6 +4494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         DbxListEmptyContentComponent,
                         DbxValueListViewComponent,
                         DbxValueListItemViewComponent,
+                        DbxValueListGridSizeDirective,
                         DbxValueListGridViewComponent,
                         DbxValueListGridItemViewComponent,
                         DbxSelectionValueListViewComponent,
@@ -4471,6 +4508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         DbxListEmptyContentComponent,
                         DbxValueListViewComponent,
                         DbxValueListItemViewComponent,
+                        DbxValueListGridSizeDirective,
                         DbxValueListGridViewComponent,
                         DbxValueListGridItemViewComponent,
                         DbxSelectionValueListViewComponent,
@@ -7185,7 +7223,7 @@ class DbxCalendarComponent {
     }
 }
 DbxCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxCalendarComponent, deps: [{ token: DbxCalendarStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxCalendarComponent, selector: "dbx-calendar", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"dbx-calendar\">\n  <h3 class=\"dbx-calendar-title\">{{ (viewDate$ | async)! | calendarDate: (displayType$ | async) + 'ViewTitle':'en' }}</h3>\n  <div class=\"dbx-calendar-header\">\n    <div class=\"dbx-calendar-controls\" fxLayout=\"row\">\n      <span class=\"dbx-calendar-controls-left\" fxFlex=\"nogrow\">\n        <button mat-stroked-button (click)=\"todayClicked()\">Today</button>\n        <dbx-button-spacer></dbx-button-spacer>\n        <button mat-icon-button [attr.aria-label]=\"'Previous ' + (displayType$ | async) + ' button'\" (click)=\"previousButtonClicked()\">\n          <mat-icon>navigate_before</mat-icon>\n        </button>\n        <button mat-icon-button [attr.aria-label]=\"'Next' + (displayType$ | async)! + ' button'\" (click)=\"nextButtonClicked()\">\n          <mat-icon>navigate_next</mat-icon>\n        </button>\n      </span>\n      <span class=\"spacer\"></span>\n      <span class=\"dbx-calendar-controls-right\" fxFlex=\"nogrow\">\n        <mat-button-toggle-group name=\"calendarDisplayStyle\" [value]=\"(displayType$ | async)!\" (change)=\"typeToggleChanged($event)\" aria-label=\"Display Style\">\n          <mat-button-toggle value=\"month\">Month</mat-button-toggle>\n          <mat-button-toggle value=\"week\">Week</mat-button-toggle>\n          <mat-button-toggle value=\"day\">Day</mat-button-toggle>\n        </mat-button-toggle-group>\n      </span>\n    </div>\n  </div>\n  <div class=\"dbx-calendar-content\" [ngClass]=\"'dbx-calendar-content-' + (displayType$ | async)!\" [ngSwitch]=\"displayType$ | async\">\n    <mwl-calendar-month-view *ngSwitchCase=\"'month'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" [activeDayIsOpen]=\"(activeDayIsOpen$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-month-view>\n    <mwl-calendar-week-view *ngSwitchCase=\"'week'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-week-view>\n    <mwl-calendar-day-view *ngSwitchCase=\"'day'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-day-view>\n  </div>\n</div>\n", components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { type: i5$1.CalendarWeekViewComponent, selector: "mwl-calendar-week-view", inputs: ["viewDate", "events", "excludeDays", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "precision", "weekendDays", "snapDraggedEvents", "hourSegments", "hourDuration", "hourSegmentHeight", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "hourSegmentTemplate", "eventSnapSize", "allDayEventsLabelTemplate", "daysInWeek", "currentTimeMarkerTemplate", "validateEventTimesChanged"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { type: i5$1.CalendarDayViewComponent, selector: "mwl-calendar-day-view", inputs: ["viewDate", "events", "hourSegments", "hourSegmentHeight", "hourDuration", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "refresh", "locale", "eventSnapSize", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "hourSegmentTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "snapDraggedEvents", "allDayEventsLabelTemplate", "currentTimeMarkerTemplate", "validateEventTimesChanged"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }], directives: [{ type: i6$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"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { type: i4$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "calendarDate": i5$1.ɵCalendarDatePipe, "async": i3$1.AsyncPipe } });
+DbxCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxCalendarComponent, selector: "dbx-calendar", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div class=\"dbx-calendar\">\n  <h3 class=\"dbx-calendar-title\">{{ (viewDate$ | async)! | calendarDate: (displayType$ | async) + 'ViewTitle':'en' }}</h3>\n  <div class=\"dbx-calendar-header\">\n    <div class=\"dbx-calendar-controls\" fxLayout=\"row\">\n      <span class=\"dbx-calendar-controls-left\" fxFlex=\"nogrow\">\n        <button mat-stroked-button (click)=\"todayClicked()\">Today</button>\n        <dbx-button-spacer></dbx-button-spacer>\n        <button mat-icon-button [attr.aria-label]=\"'Previous ' + (displayType$ | async) + ' button'\" (click)=\"previousButtonClicked()\">\n          <mat-icon>navigate_before</mat-icon>\n        </button>\n        <button mat-icon-button [attr.aria-label]=\"'Next' + (displayType$ | async)! + ' button'\" (click)=\"nextButtonClicked()\">\n          <mat-icon>navigate_next</mat-icon>\n        </button>\n      </span>\n      <span class=\"spacer\"></span>\n      <span class=\"dbx-calendar-controls-right\" fxFlex=\"nogrow\">\n        <mat-button-toggle-group name=\"calendarDisplayStyle\" [value]=\"(displayType$ | async)!\" (change)=\"typeToggleChanged($event)\" aria-label=\"Display Style\">\n          <mat-button-toggle value=\"month\">Month</mat-button-toggle>\n          <mat-button-toggle value=\"week\">Week</mat-button-toggle>\n          <mat-button-toggle value=\"day\">Day</mat-button-toggle>\n        </mat-button-toggle-group>\n      </span>\n    </div>\n  </div>\n  <div class=\"dbx-calendar-content\" [ngClass]=\"'dbx-calendar-content-' + (displayType$ | async)!\" [ngSwitch]=\"displayType$ | async\">\n    <mwl-calendar-month-view *ngSwitchCase=\"'month'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" [activeDayIsOpen]=\"(activeDayIsOpen$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-month-view>\n    <mwl-calendar-week-view *ngSwitchCase=\"'week'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-week-view>\n    <mwl-calendar-day-view *ngSwitchCase=\"'day'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-day-view>\n  </div>\n</div>\n", components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$2.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { type: i5$2.CalendarWeekViewComponent, selector: "mwl-calendar-week-view", inputs: ["viewDate", "events", "excludeDays", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "precision", "weekendDays", "snapDraggedEvents", "hourSegments", "hourDuration", "hourSegmentHeight", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "hourSegmentTemplate", "eventSnapSize", "allDayEventsLabelTemplate", "daysInWeek", "currentTimeMarkerTemplate", "validateEventTimesChanged"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { type: i5$2.CalendarDayViewComponent, selector: "mwl-calendar-day-view", inputs: ["viewDate", "events", "hourSegments", "hourSegmentHeight", "hourDuration", "minimumEventHeight", "dayStartHour", "dayStartMinute", "dayEndHour", "dayEndMinute", "refresh", "locale", "eventSnapSize", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "hourSegmentTemplate", "eventTemplate", "eventTitleTemplate", "eventActionsTemplate", "snapDraggedEvents", "allDayEventsLabelTemplate", "currentTimeMarkerTemplate", "validateEventTimesChanged"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }], directives: [{ type: i6$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"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "calendarDate": i5$2.ɵCalendarDatePipe, "async": i3$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-calendar', template: "<div class=\"dbx-calendar\">\n  <h3 class=\"dbx-calendar-title\">{{ (viewDate$ | async)! | calendarDate: (displayType$ | async) + 'ViewTitle':'en' }}</h3>\n  <div class=\"dbx-calendar-header\">\n    <div class=\"dbx-calendar-controls\" fxLayout=\"row\">\n      <span class=\"dbx-calendar-controls-left\" fxFlex=\"nogrow\">\n        <button mat-stroked-button (click)=\"todayClicked()\">Today</button>\n        <dbx-button-spacer></dbx-button-spacer>\n        <button mat-icon-button [attr.aria-label]=\"'Previous ' + (displayType$ | async) + ' button'\" (click)=\"previousButtonClicked()\">\n          <mat-icon>navigate_before</mat-icon>\n        </button>\n        <button mat-icon-button [attr.aria-label]=\"'Next' + (displayType$ | async)! + ' button'\" (click)=\"nextButtonClicked()\">\n          <mat-icon>navigate_next</mat-icon>\n        </button>\n      </span>\n      <span class=\"spacer\"></span>\n      <span class=\"dbx-calendar-controls-right\" fxFlex=\"nogrow\">\n        <mat-button-toggle-group name=\"calendarDisplayStyle\" [value]=\"(displayType$ | async)!\" (change)=\"typeToggleChanged($event)\" aria-label=\"Display Style\">\n          <mat-button-toggle value=\"month\">Month</mat-button-toggle>\n          <mat-button-toggle value=\"week\">Week</mat-button-toggle>\n          <mat-button-toggle value=\"day\">Day</mat-button-toggle>\n        </mat-button-toggle-group>\n      </span>\n    </div>\n  </div>\n  <div class=\"dbx-calendar-content\" [ngClass]=\"'dbx-calendar-content-' + (displayType$ | async)!\" [ngSwitch]=\"displayType$ | async\">\n    <mwl-calendar-month-view *ngSwitchCase=\"'month'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" [activeDayIsOpen]=\"(activeDayIsOpen$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-month-view>\n    <mwl-calendar-week-view *ngSwitchCase=\"'week'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-week-view>\n    <mwl-calendar-day-view *ngSwitchCase=\"'day'\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (eventClicked)=\"eventClicked('Clicked', $event.event)\"></mwl-calendar-day-view>\n  </div>\n</div>\n" }]
@@ -7245,7 +7283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class DbxCalendarRootModule {
 }
 DbxCalendarRootModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxCalendarRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxCalendarRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxCalendarRootModule, imports: [i5$1.CalendarModule], exports: [DbxCalendarModule] });
+DbxCalendarRootModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxCalendarRootModule, imports: [i5$2.CalendarModule], exports: [DbxCalendarModule] });
 DbxCalendarRootModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxCalendarRootModule, imports: [[CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory })], DbxCalendarModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxCalendarRootModule, decorators: [{
             type: NgModule,
@@ -7255,6 +7293,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 }]
         }] });
 
+/**
+ * Service used to register widgets.
+ */
+class DbxWidgetService {
+    constructor() {
+        this._entries = new Map();
+    }
+    /**
+     * Used to register an entry. If an entry with the same type is already registered, this will override it by default.
+     *
+     * @param entry
+     * @param override
+     */
+    register(entry, override = true) {
+        if (override || !this._entries.has(entry.type)) {
+            this._entries.set(entry.type, entry);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    // MARK: Get
+    getWidgetIdentifiers() {
+        return Array.from(this._entries.keys());
+    }
+    getWidgetEntry(type) {
+        return this._entries.get(type);
+    }
+    getWidgetEntries(types) {
+        return filterMaybeValues(mapIterable(types ?? [], (x) => this._entries.get(x)));
+    }
+}
+DbxWidgetService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DbxWidgetService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Used to display a corresponding widget based on the input data.
+ */
+class DbxWidgetViewComponent {
+    constructor(dbxWidgetService) {
+        this.dbxWidgetService = dbxWidgetService;
+        this._config = new BehaviorSubject(undefined);
+        this.config$ = this._config.pipe(map((pair) => {
+            let config;
+            if (pair != null) {
+                const entry = this.dbxWidgetService.getWidgetEntry(pair.type);
+                if (entry) {
+                    config = {
+                        componentClass: entry.componentClass,
+                        data: pair.data
+                    };
+                }
+            }
+            return config;
+        }));
+    }
+    ngOnDestroy() {
+        this._config.complete();
+    }
+    set config(config) {
+        this._config.next(config);
+    }
+}
+DbxWidgetViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetViewComponent, deps: [{ token: DbxWidgetService }], target: i0.ɵɵFactoryTarget.Component });
+DbxWidgetViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxWidgetViewComponent, selector: "dbx-widget-view", inputs: { config: "config" }, host: { classAttribute: "dbx-widget-view" }, ngImport: i0, template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `, isInline: true, components: [{ type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], pipes: { "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-widget-view',
+                    template: `
+    <dbx-injection [config]="config$ | async"></dbx-injection>
+  `,
+                    host: {
+                        class: 'dbx-widget-view'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: DbxWidgetService }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class AbstractDbxWidgetComponent {
+    constructor(data) {
+        this.data = data;
+    }
+}
+AbstractDbxWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxWidgetComponent, deps: [{ token: DBX_INJECTION_COMPONENT_DATA }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxWidgetComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.2", type: AbstractDbxWidgetComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: AbstractDbxWidgetComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DBX_INJECTION_COMPONENT_DATA]
+                }] }]; } });
+
+/**
+ * Demo DbxSelectionListWrapperDirective
+ */
+class DbxWidgetListGridComponent extends AbstractDbxListWrapperDirective {
+    constructor() {
+        super({
+            componentClass: DbxWidgetListGridViewComponent,
+            defaultSelectionMode: 'view'
+        });
+    }
+}
+DbxWidgetListGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetListGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DbxWidgetListGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxWidgetListGridComponent, selector: "dbx-widget-grid", usesInheritance: true, ngImport: i0, template: "\n<dbx-list [state$]=\"state$\" [config]=\"config$ | async\" [disabled]=\"disabled\" [selectionMode]=\"selectionMode\">\n  <ng-content top select=\"[top]\"></ng-content>\n  <ng-content bottom select=\"[bottom]\"></ng-content>\n  <ng-content empty select=\"[empty]\"></ng-content>\n</dbx-list>\n", isInline: true, components: [{ type: DbxListComponent, selector: "dbx-list", inputs: ["padded", "state$", "config", "disabled", "selectionMode"], outputs: ["contentScrolled"] }], pipes: { "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetListGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-widget-grid',
+                    template: DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE
+                }]
+        }], ctorParameters: function () { return []; } });
+class DbxWidgetListGridViewComponent extends AbstractDbxListGridViewDirective {
+    constructor() {
+        super(...arguments);
+        this.config = {
+            grid: {
+                // TODO: Make configurable.
+                columns: 'repeat(auto-fill, minmax(120px, 1fr))',
+                gap: '8px'
+            },
+            componentClass: DbxWidgetListGridViewItemComponent,
+            mapValuesToItemValues: (x) => of(x.map((y) => ({ ...y, itemValue: y })))
+        };
+    }
+}
+DbxWidgetListGridViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetListGridViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxWidgetListGridViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxWidgetListGridViewComponent, selector: "ng-component", providers: provideDbxListView(DbxWidgetListGridViewComponent), usesInheritance: true, ngImport: i0, template: "<dbx-list-grid-view [config]=\"config\"></dbx-list-grid-view>", isInline: true, components: [{ type: DbxValueListGridViewComponent, selector: "dbx-list-grid-view" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetListGridViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE,
+                    providers: provideDbxListView(DbxWidgetListGridViewComponent)
+                }]
+        }] });
+class DbxWidgetListGridViewItemComponent extends AbstractDbxValueListViewItemComponent {
+}
+DbxWidgetListGridViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetListGridViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxWidgetListGridViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: DbxWidgetListGridViewItemComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    <dbx-widget-view [config]="itemValue"></dbx-widget-view>
+  `, isInline: true, components: [{ type: DbxWidgetViewComponent, selector: "dbx-widget-view", inputs: ["config"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetListGridViewItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <dbx-widget-view [config]="itemValue"></dbx-widget-view>
+  `
+                }]
+        }] });
+
+/**
+ * Contains components related to displaying "widgets" for pieces of data.
+ */
+class DbxWidgetModule {
+}
+DbxWidgetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DbxWidgetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetModule, declarations: [DbxWidgetViewComponent, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent], imports: [
+        //
+        CommonModule,
+        DbxListLayoutModule,
+        DbxInjectionComponentModule], exports: [DbxWidgetViewComponent, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent] });
+DbxWidgetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetModule, imports: [[
+            //
+            CommonModule,
+            DbxListLayoutModule,
+            DbxInjectionComponentModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWidgetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        //
+                        CommonModule,
+                        DbxListLayoutModule,
+                        DbxInjectionComponentModule
+                    ],
+                    declarations: [DbxWidgetViewComponent, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent],
+                    exports: [DbxWidgetViewComponent, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent]
+                }]
+        }] });
+
 class DbxWebModule {
 }
 DbxWebModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: DbxWebModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -7287,5 +7517,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CalendarDisplayType, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_STATIC_LIST_DIRECTIVE_TEMPLATE, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionProgressComponent, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxBarButtonComponent, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerDirective, DbxCalendarComponent, DbxCalendarModule, DbxCalendarRootModule, DbxCalendarStore, DbxCardBoxComponent, DbxCardBoxContainerComponent, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxDialogContentDirective, DbxDialogInteractionModule, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHintComponent, DbxIconItemComponent, DbxIconSpacerDirective, DbxInteractionModule, DbxIntroActionSectionComponent, DbxItemLayoutModule, DbxKeypressModule, DbxLabelComponent, DbxLayoutModule, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListLayoutModule, DbxListView, DbxListViewWrapper, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxNavbarComponent, DbxNoteComponent, DbxNoticeComponent, DbxOkComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionModule, DbxPopoverScrollContentComponent, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxProgressButtonsModule, DbxPromptBoxComponent, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptConfirmTypes, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorComponent, DbxReadableErrorModule, DbxRouterAnchorListModule, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterListModule, DbxRouterNavbarModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxScreenModule, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListItemViewComponent, DbxSelectionValueListViewComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxSpinnerButtonComponent, DbxStepComponent, DbxStepLayoutModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadComponent, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxUIRouterSegueAnchorComponent, DbxValueListGridItemViewComponent, DbxValueListGridViewComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListItemViewComponent, DbxValueListView, DbxValueListViewComponent, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebRootModule, DbxWebUIRouterModule, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TwoColumnsContextStore, addConfigToValueListItems, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewModifier, provideTwoColumnsContext, screenMediaWidthTypeIsActive, visibleDateRangeForCalendarState };
+export { APP_POPUP_MINIMIZED_WIDTH, APP_POPUP_NORMAL_HEIGHT, APP_POPUP_NORMAL_WIDTH, AbstractDbxListGridViewDirective, AbstractDbxListViewDirective, AbstractDbxListWrapperDirective, AbstractDbxSegueAnchorDirective, AbstractDbxSelectionListViewDirective, AbstractDbxSelectionListWrapperDirective, AbstractDbxValueListItemModifierDirective, AbstractDbxValueListViewDirective, AbstractDbxValueListViewItemComponent, AbstractDbxWidgetComponent, AbstractDialogDirective, AbstractFilterPopoverButtonDirective, AbstractPopoverDirective, AbstractPopoverRefDirective, AbstractPopoverRefWithEventsDirective, AbstractPopupDirective, AbstractPromptConfirmDirective, CalendarDisplayType, CompactContextStore, CompactMode, DBX_ACTION_SNACKBAR_DEFAULTS, DBX_ACTION_SNACKBAR_SERVICE_CONFIG, DBX_LIST_ITEM_DEFAULT_DISABLE_FUNCTION, DBX_LIST_ITEM_DISABLE_RIPPLE_LIST_ITEM_MODIFIER_KEY, DBX_MAT_PROGRESS_BUTTON_GLOBAL_CONFIG, DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY, DBX_STYLE_DEFAULT_CONFIG_TOKEN, DBX_VALUE_LIST_VIEW_ITEM, DEFAULT_DBX_PROMPT_CONFIRM_DIALOG_CONFIG, DEFAULT_DBX_SELECTION_VALUE_LIST_DIRECTIVE_TEMPLATE, DEFAULT_DBX_VALUE_LIST_CONFIG_MAP_VALUES, DEFAULT_DBX_VALUE_LIST_GRID_DIRECTIVE_TEMPLATE, DEFAULT_FILTER_POPOVER_KEY, DEFAULT_LIST_GRID_SIZE_CONFIG, DEFAULT_LIST_WRAPPER_DIRECTIVE_TEMPLATE, DEFAULT_LOADING_PROGRESS_DIAMETER, DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG, DEFAULT_SNACKBAR_DIRECTIVE_DURATION, DEFAULT_STATIC_LIST_DIRECTIVE_TEMPLATE, DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH, DbxActionConfirmDirective, DbxActionDialogDirective, DbxActionErrorDirective, DbxActionKeyTriggerDirective, DbxActionLoadingContextDirective, DbxActionModule, DbxActionPopoverDirective, DbxActionProgressComponent, DbxActionSnackbarComponent, DbxActionSnackbarDirective, DbxActionSnackbarModule, DbxActionSnackbarService, DbxActionTransitionSafetyDialogResult, DbxActionTransitionSafetyDirective, DbxActionUIRouterTransitionModule, DbxActionUIRouterTransitionSafetyDialogComponent, DbxAnchorComponent, DbxAnchorContentComponent, DbxAnchorIconComponent, DbxAnchorLinkComponent, DbxAnchorListComponent, DbxAngularRouterSegueAnchorComponent, DbxBarButtonComponent, DbxBarDirective, DbxBarHeaderComponent, DbxBarLayoutModule, DbxBasicLoadingComponent, DbxBlockLayoutModule, DbxButtonComponent, DbxButtonDisplayType, DbxButtonModule, DbxButtonSpacerDirective, DbxCalendarComponent, DbxCalendarModule, DbxCalendarRootModule, DbxCalendarStore, DbxCardBoxComponent, DbxCardBoxContainerComponent, DbxCardBoxLayoutModule, DbxColumnLayoutModule, DbxCompactDirective, DbxCompactLayoutModule, DbxContentBorderDirective, DbxContentBoxDirective, DbxContentContainerDirective, DbxContentDirective, DbxContentElevateDirective, DbxContentLayoutModule, DbxContentPageDirective, DbxDialogContentDirective, DbxDialogInteractionModule, DbxFilterInteractionModule, DbxFilterPopoverButtonComponent, DbxFilterPopoverComponent, DbxFilterWrapperComponent, DbxFlagComponent, DbxFlagLayoutModule, DbxFlagPromptComponent, DbxFlexGroupDirective, DbxFlexLayoutModule, DbxFlexSizeDirective, DbxHintComponent, DbxIconItemComponent, DbxIconSpacerDirective, DbxInteractionModule, DbxIntroActionSectionComponent, DbxItemLayoutModule, DbxKeypressModule, DbxLabelComponent, DbxLayoutModule, DbxLinkifyComponent, DbxListComponent, DbxListEmptyContentComponent, DbxListInternalContentDirective, DbxListItemAnchorModifierDirective, DbxListItemDisableRippleModifierDirective, DbxListLayoutModule, DbxListView, DbxListViewWrapper, DbxLoadingComponent, DbxLoadingErrorDirective, DbxLoadingModule, DbxLoadingProgressComponent, DbxNavbarComponent, DbxNoteComponent, DbxNoticeComponent, DbxOkComponent, DbxOneColumnComponent, DbxOneColumnLayoutModule, DbxPagebarComponent, DbxPopoverComponent, DbxPopoverComponentController, DbxPopoverContentComponent, DbxPopoverController, DbxPopoverControlsDirective, DbxPopoverCoordinatorComponent, DbxPopoverCoordinatorService, DbxPopoverHeaderComponent, DbxPopoverInteractionModule, DbxPopoverScrollContentComponent, DbxPopoverService, DbxPopupComponent, DbxPopupComponentController, DbxPopupContentComponent, DbxPopupControlButtonsComponent, DbxPopupController, DbxPopupControlsComponent, DbxPopupCoordinatorComponent, DbxPopupCoordinatorService, DbxPopupInteractionModule, DbxPopupService, DbxPopupWindowState, DbxProgressButtonsModule, DbxPromptBoxComponent, DbxPromptComponent, DbxPromptConfirm, DbxPromptConfirmButtonDirective, DbxPromptConfirmComponent, DbxPromptConfirmDialogComponent, DbxPromptConfirmDirective, DbxPromptConfirmTypes, DbxPromptModule, DbxPromptPageComponent, DbxReadableErrorComponent, DbxReadableErrorModule, DbxRouterAnchorListModule, DbxRouterAnchorModule, DbxRouterLayoutModule, DbxRouterListModule, DbxRouterNavbarModule, DbxRouterSidenavModule, DbxRouterWebProviderConfig, DbxScreenMediaService, DbxScreenMediaServiceConfig, DbxScreenModule, DbxSectionComponent, DbxSectionHeaderComponent, DbxSectionLayoutModule, DbxSectionPageComponent, DbxSelectionValueListItemViewComponent, DbxSelectionValueListViewComponent, DbxSetStyleDirective, DbxSidenavButtonComponent, DbxSidenavComponent, DbxSidenavPageComponent, DbxSidenavPagebarComponent, DbxSpacerDirective, DbxSpinnerButtonComponent, DbxStepComponent, DbxStepLayoutModule, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadComponent, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxUIRouterSegueAnchorComponent, DbxValueListGridItemViewComponent, DbxValueListGridSizeDirective, DbxValueListGridViewComponent, DbxValueListItemModifier, DbxValueListItemModifierDirective, DbxValueListItemViewComponent, DbxValueListView, DbxValueListViewComponent, DbxWarnComponent, DbxWebAngularRouterModule, DbxWebModule, DbxWebRootModule, DbxWebUIRouterModule, DbxWidgetListGridComponent, DbxWidgetListGridViewComponent, DbxWidgetListGridViewItemComponent, DbxWidgetModule, DbxWidgetService, DbxWidgetViewComponent, DbxWindowKeyDownListenerDirective, LoadingComponentState, PopoverPositionStrategy, PopupGlobalPositionStrategy, SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP, SideNavDisplayMode, TwoColumnsContextStore, addConfigToValueListItems, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewModifier, provideTwoColumnsContext, screenMediaWidthTypeIsActive, visibleDateRangeForCalendarState };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map