@dereekb/dbx-web 9.15.8 → 9.16.0

package/fesm2015/dereekb-dbx-web.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Directive, InjectionToken, EventEmitter, Optional, Inject, Output, HostListener, Input, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Injectable, Host, NgModule, TemplateRef, forwardRef } from '@angular/core';
-import { filterMaybe, LoadingStateType, loadingStateType, skipFirstMaybe, SubscriptionObject, initialize, asObservable, ListLoadingStateContextInstance, loadingStateHasFinishedLoading, startWithBeginLoading, valueFromObservableOrValue, LoadingStateContextInstance, mapForEach, switchMapMaybeObs, LockSet } from '@dereekb/rxjs';
-import { BehaviorSubject, map, combineLatest, distinctUntilChanged, shareReplay, first, Subject, of, switchMap, startWith, filter, delay, throttleTime, distinct, merge, exhaustMap, catchError, from, mergeMap, race, tap, withLatestFrom } from 'rxjs';
+import { filterMaybe, LoadingStateType, loadingStateType, skipFirstMaybe, SubscriptionObject, initialize, asObservable, isNot, ListLoadingStateContextInstance, loadingStateHasFinishedLoading, startWithBeginLoading, valueFromObservableOrValue, LoadingStateContextInstance, mapForEach, switchMapMaybeObs, LockSet } from '@dereekb/rxjs';
+import { BehaviorSubject, map, combineLatest, distinctUntilChanged, shareReplay, first, Subject, of, switchMap, startWith, filter, delay, throttleTime, distinct, merge, exhaustMap, catchError, skip, from, mergeMap, race, tap, withLatestFrom } from 'rxjs';
 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, DBX_INJECTION_COMPONENT_DATA } from '@dereekb/dbx-core';
+import { AbstractSubscriptionDirective, safeMarkForCheck, AbstractDbxButtonDirective, provideDbxButton, DbxCoreButtonModule, AbstractTransitionWatcherDirective, AbstractDbxActionValueOnTriggerDirective, safeDetectChanges, AbstractDbxAnchorDirective, DbxInjectionComponentModule, expandClickableAnchorLinkTrees, AbstractTransitionDirective, tapDetectChanges, asSegueRef, isSegueRefActive, checkNgContentWrapperHasContent, anchorTypeForAnchor, AnchorType, DbxCoreActionModule, AbstractDbxActionHandlerDirective, provideActionStoreSource, DbxCoreFilterModule, isIdleActionState, canTriggerAction, DBX_INJECTION_COMPONENT_DATA } from '@dereekb/dbx-core';
 import ms from 'ms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -15,7 +15,7 @@ import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { getValueFromGetter, mergeObjects, splitCommaSeparatedStringToSet, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, isMaybeNot, isNotNullOrEmptyString, toReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction, filterMaybeValues, mapIterable } from '@dereekb/util';
+import { getValueFromGetter, mergeObjects, splitCommaSeparatedStringToSet, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, isMaybeNot, isNotNullOrEmptyString, toReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction, objectHasNoKeys, filterMaybeValues, mapIterable } from '@dereekb/util';
 import * as i3$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i4 from '@angular/material/core';
@@ -40,6 +40,7 @@ import { UIRouterModule } from '@uirouter/angular';
 import * as i1$6 from 'angular-resize-event';
 import { AngularResizeEventModule } from 'angular-resize-event';
 import { ComponentStore } from '@ngrx/component-store';
+import { shareReplay as shareReplay$1 } from 'rxjs/operators';
 import { isBoolean } from 'class-validator';
 import * as i3$3 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@@ -57,6 +58,7 @@ import { NgOverlayContainerService, NgOverlayContainerModule } from 'ng-overlay-
 import * as i1$9 from '@angular/cdk/overlay';
 import { GlobalPositionStrategy } from '@angular/cdk/overlay';
 import * as i7$1 from '@angular/flex-layout/flex';
+import * as i3$5 from '@angular/flex-layout/extended';
 import * as i2$4 from '@uirouter/core';
 import { startOfDay, endOfDay, startOfWeek, endOfWeek, startOfMonth, endOfMonth, differenceInDays, addDays, isSameDay, isBefore, isAfter, isSameMonth } from 'date-fns';
 import { formatToTimeAndDurationString } from '@dereekb/date';
@@ -64,7 +66,6 @@ import * as i5$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i6 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule, DateAdapter } from 'angular-calendar';
-import * as i8 from '@angular/flex-layout/extended';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 class DbxSpacerDirective {
@@ -1215,6 +1216,7 @@ class DbxAnchorComponent extends AbstractDbxAnchorDirective {
         this.templateRef$ = this._templateRef.pipe(skipFirstMaybe(), shareReplay(1));
         this.url$ = this.anchor$.pipe(map((x) => x === null || x === void 0 ? void 0 : x.url), distinctUntilChanged(), shareReplay(1));
         this.target$ = this.anchor$.pipe(map((x) => x === null || x === void 0 ? void 0 : x.target), distinctUntilChanged(), shareReplay(1));
+        this.selectedClass$ = this.selected$.pipe(map((selected) => (selected ? 'dbx-anchor-selected' : '')), shareReplay(1));
     }
     get templateRef() {
         return this._templateRef.value;
@@ -1235,13 +1237,13 @@ class DbxAnchorComponent extends AbstractDbxAnchorDirective {
     }
 }
 DbxAnchorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxAnchorComponent, deps: [{ token: DbxRouterWebProviderConfig }], target: i0.ɵɵFactoryTarget.Component });
-DbxAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: { block: "block" }, host: { attributes: { "dbx-anchor-block": "block" }, classAttribute: "d-inline dbx-anchor" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type$ | async\">\n  <!-- Plain -->\n  <ng-container *ngSwitchCase=\"0\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <!-- Click -->\n  <a class=\"dbx-anchor-a dbx-anchor-click\" (click)=\"clickAnchor()\" *ngSwitchCase=\"1\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Router -->\n  <dbx-injection [config]=\"srefAnchorConfig\" *ngSwitchCase=\"2\">\n    <!-- Injected in child. -->\n  </dbx-injection>\n  <!-- Href -->\n  <a class=\"dbx-anchor-a dbx-anchor-href\" [href]=\"url$ | async\" [attr.target]=\"target$ | async\" *ngSwitchCase=\"3\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Disabled or None -->\n  <a class=\"dbx-anchor-a dbx-anchor-disabled\" *ngSwitchDefault>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-container>\n<!-- Template content -->\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }] });
+DbxAnchorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: { block: "block" }, host: { attributes: { "dbx-anchor-block": "block" }, classAttribute: "d-inline dbx-anchor" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"type$ | async\">\n  <!-- Plain -->\n  <ng-container *ngSwitchCase=\"0\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <!-- Click -->\n  <a class=\"dbx-anchor-a dbx-anchor-click\" [ngClass]=\"(selectedClass$ | async) || ''\" (click)=\"clickAnchor()\" *ngSwitchCase=\"1\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Router -->\n  <dbx-injection [config]=\"srefAnchorConfig\" *ngSwitchCase=\"2\">\n    <!-- Injected in child. -->\n  </dbx-injection>\n  <!-- Href -->\n  <a class=\"dbx-anchor-a dbx-anchor-href\" [href]=\"url$ | async\" [attr.target]=\"target$ | async\" *ngSwitchCase=\"3\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Disabled or None -->\n  <a class=\"dbx-anchor-a dbx-anchor-disabled\" *ngSwitchDefault>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-container>\n<!-- Template content -->\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxAnchorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-anchor, [dbx-anchor]', host: {
                         class: 'd-inline dbx-anchor',
                         'dbx-anchor-block': 'block'
-                    }, template: "<ng-container [ngSwitch]=\"type$ | async\">\n  <!-- Plain -->\n  <ng-container *ngSwitchCase=\"0\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <!-- Click -->\n  <a class=\"dbx-anchor-a dbx-anchor-click\" (click)=\"clickAnchor()\" *ngSwitchCase=\"1\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Router -->\n  <dbx-injection [config]=\"srefAnchorConfig\" *ngSwitchCase=\"2\">\n    <!-- Injected in child. -->\n  </dbx-injection>\n  <!-- Href -->\n  <a class=\"dbx-anchor-a dbx-anchor-href\" [href]=\"url$ | async\" [attr.target]=\"target$ | async\" *ngSwitchCase=\"3\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Disabled or None -->\n  <a class=\"dbx-anchor-a dbx-anchor-disabled\" *ngSwitchDefault>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-container>\n<!-- Template content -->\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+                    }, template: "<ng-container [ngSwitch]=\"type$ | async\">\n  <!-- Plain -->\n  <ng-container *ngSwitchCase=\"0\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <!-- Click -->\n  <a class=\"dbx-anchor-a dbx-anchor-click\" [ngClass]=\"(selectedClass$ | async) || ''\" (click)=\"clickAnchor()\" *ngSwitchCase=\"1\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Router -->\n  <dbx-injection [config]=\"srefAnchorConfig\" *ngSwitchCase=\"2\">\n    <!-- Injected in child. -->\n  </dbx-injection>\n  <!-- Href -->\n  <a class=\"dbx-anchor-a dbx-anchor-href\" [href]=\"url$ | async\" [attr.target]=\"target$ | async\" *ngSwitchCase=\"3\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n  <!-- Disabled or None -->\n  <a class=\"dbx-anchor-a dbx-anchor-disabled\" *ngSwitchDefault>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </a>\n</ng-container>\n<!-- Template content -->\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: DbxRouterWebProviderConfig }]; }, propDecorators: { block: [{
                 type: Input
             }], templateRef: [{
@@ -2863,17 +2865,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Used with a DbxTwoColumnComponent to control showing right when the current route is a child of the backRef.
+ */
+class DbxTwoColumnSrefShowRightDirective extends AbstractSubscriptionDirective {
+    constructor(_twoColumnsContextStore, _dbxRouterService) {
+        super();
+        this._twoColumnsContextStore = _twoColumnsContextStore;
+        this._dbxRouterService = _dbxRouterService;
+        this.showRight$ = this._twoColumnsContextStore.backRef$.pipe(
+        // Only show right when the backRef is not exactly active
+        isSegueRefActive({ dbxRouterService: this._dbxRouterService, activeExactly: true }), isNot(), distinctUntilChanged(), shareReplay$1(1));
+    }
+    ngOnInit() {
+        this.sub = this._twoColumnsContextStore.setShowRight(this.showRight$);
+    }
+}
+DbxTwoColumnSrefShowRightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxTwoColumnSrefShowRightDirective, deps: [{ token: TwoColumnsContextStore }, { token: i1$2.DbxRouterService }], target: i0.ɵɵFactoryTarget.Directive });
+DbxTwoColumnSrefShowRightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: DbxTwoColumnSrefShowRightDirective, selector: "[dbxTwoColumnSrefShowRight]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxTwoColumnSrefShowRightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dbxTwoColumnSrefShowRight]'
+                }]
+        }], ctorParameters: function () { return [{ type: TwoColumnsContextStore }, { type: i1$2.DbxRouterService }]; } });
+
 class DbxTwoColumnLayoutModule {
 }
 DbxTwoColumnLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxTwoColumnLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxTwoColumnLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxTwoColumnLayoutModule, declarations: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective], imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule, AngularResizeEventModule], exports: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective] });
+DbxTwoColumnLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxTwoColumnLayoutModule, declarations: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective, DbxTwoColumnSrefShowRightDirective], imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule, AngularResizeEventModule], exports: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective, DbxTwoColumnSrefShowRightDirective] });
 DbxTwoColumnLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxTwoColumnLayoutModule, imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule, AngularResizeEventModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxTwoColumnLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatIconModule, MatButtonModule, DbxRouterAnchorModule, DbxContentLayoutModule, AngularResizeEventModule],
-                    declarations: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective],
-                    exports: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective]
+                    declarations: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective, DbxTwoColumnSrefShowRightDirective],
+                    exports: [DbxTwoColumnComponent, DbxTwoColumnRightComponent, DbxTwoColumnColumnHeadComponent, DbxTwoColumnSrefDirective, DbxTwoColumnBackDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnContextDirective, DbxTwoColumnSrefShowRightDirective]
                 }]
         }] });
 
@@ -5720,6 +5747,7 @@ const DEFAULT_FILTER_POPOVER_KEY = 'filter';
 class DbxFilterPopoverComponent extends AbstractPopoverDirective {
     constructor(popover) {
         super(popover);
+        this._closeOnChangeSub = new SubscriptionObject();
         /**
          * Whether or not to display buttons to toggle between custom and preset filters.
          */
@@ -5727,7 +5755,7 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
         this._showPreset = new BehaviorSubject(false);
         this.showPreset$ = this._showPreset.asObservable();
         this.config$ = this._showPreset.pipe(map((showPreset) => {
-            const { connector, initialFilterObs, customFilterComponentClass, presetFilterComponentClass } = this.config;
+            const { closeOnFilterChange = true, connector, initialFilterObs, customFilterComponentClass, presetFilterComponentClass } = this.config;
             let componentClass;
             if (showPreset) {
                 componentClass = presetFilterComponentClass;
@@ -5742,6 +5770,11 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
                     if (initialFilterObs && filterSource.initWithFilter) {
                         filterSource.initWithFilter(initialFilterObs);
                     }
+                    if (closeOnFilterChange) {
+                        this._closeOnChangeSub.subscription = filterSource.filter$.pipe(skip(1), filterMaybe(), first()).subscribe(() => {
+                            this.close();
+                        });
+                    }
                 }
             };
             return config;
@@ -5788,10 +5821,10 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
     }
 }
 DbxFilterPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterPopoverComponent, deps: [{ token: DbxPopoverComponent }], target: i0.ɵɵFactoryTarget.Component });
-DbxFilterPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFilterPopoverComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header icon=\"filter\" header=\"Filter\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n", dependencies: [{ 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: "component", type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { kind: "component", type: DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+DbxFilterPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFilterPopoverComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header icon=\"filter_list\" header=\"Filter\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n", dependencies: [{ 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: "component", type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { kind: "component", type: DbxPopoverScrollContentComponent, selector: "dbx-popover-scroll-content" }, { kind: "component", type: i1$2.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterPopoverComponent, decorators: [{
             type: Component,
-            args: [{ template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header icon=\"filter\" header=\"Filter\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n" }]
+            args: [{ template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header icon=\"filter_list\" header=\"Filter\">\n    <ng-container *ngIf=\"showSwitchButtons\" [ngSwitch]=\"showPreset$ | async\">\n      <button *ngSwitchCase=\"true\" mat-flat-button color=\"accent\" (click)=\"showCustom()\">Custom</button>\n      <button *ngSwitchCase=\"false\" mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n    </ng-container>\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"config$ | async\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n" }]
         }], ctorParameters: function () { return [{ type: DbxPopoverComponent }]; } });
 
 /**
@@ -6380,50 +6413,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
         }] });
 
 /**
- * Used for adding a reset and filter button to a form.
+ * Action component used to simplify creating a filter form.
+ *
+ * Provides a DbxAction and configures the action to set the filter on a FilterSourceDirective when triggered.
+ */
+class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective {
+    constructor(source, filterSourceDirective) {
+        super(source);
+        this.filterSourceDirective = filterSourceDirective;
+        this.applyRaised = true;
+        this.applyIcon = 'filter_list';
+        this.applyText = 'Filter';
+        // configure handler function
+        this._dbxActionHandlerInstance.handlerFunction = (filter) => {
+            this.filterSourceDirective.setFilter(filter);
+            return of(true);
+        };
+    }
+    applyFilter() {
+        this.source.setIsModified(true); // Force setting modified.
+        this.source.trigger();
+    }
+    resetFilter() {
+        this.filterSourceDirective.resetFilter();
+    }
+}
+DbxFilterWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterWrapperComponent, deps: [{ token: i1$2.DbxActionContextStoreSourceInstance }, { token: i1$2.FilterSourceDirective }], target: i0.ɵɵFactoryTarget.Component });
+DbxFilterWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFilterWrapperComponent, selector: "dbx-filter-wrapper", inputs: { applyRaised: "applyRaised", applyIcon: "applyIcon", applyText: "applyText" }, providers: [provideActionStoreSource(null)], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div fxLayout=\"row\">\n    <dbx-button dbxActionButton [raised]=\"applyRaised\" [text]=\"applyText\" [icon]=\"applyIcon\"></dbx-button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetFilter()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i7$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dbx-filter-wrapper', providers: [provideActionStoreSource(null)], template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div fxLayout=\"row\">\n    <dbx-button dbxActionButton [raised]=\"applyRaised\" [text]=\"applyText\" [icon]=\"applyIcon\"></dbx-button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetFilter()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.DbxActionContextStoreSourceInstance }, { type: i1$2.FilterSourceDirective }]; }, propDecorators: { applyRaised: [{
+                type: Input
+            }], applyIcon: [{
+                type: Input
+            }], applyText: [{
+                type: Input
+            }] } });
+
+/**
+ * Displays a button and menu for filtering presets.
+ */
+class AbstractDbxPresetFilterMenuComponent {
+    constructor(filterSourceDirective) {
+        this.filterSourceDirective = filterSourceDirective;
+        this._presets = new BehaviorSubject([]);
+        this.selected$ = this.filterSourceDirective.filter$.pipe(startWith(undefined), distinctUntilChanged());
+        this.selectedPresetString$ = this.selected$.pipe(map((selectedFilter) => (selectedFilter ? selectedFilter.preset : undefined)), distinctUntilChanged());
+        this.presetAnchors$ = combineLatest([this._presets, this.selectedPresetString$]).pipe(map(([presets, selectedPresetString]) => {
+            return presets.map((x) => (Object.assign(Object.assign({}, x), { selected: x.preset === selectedPresetString, onClick: () => {
+                    this.selectPreset(x);
+                } })));
+        }), shareReplay$1(1));
+        this.selectedPreset$ = combineLatest([this._presets, this.selectedPresetString$]).pipe(map(([presets, selectedPresetString]) => {
+            return selectedPresetString != null ? presets.find((x) => x.preset === selectedPresetString) : undefined;
+        }), shareReplay$1(1));
+    }
+    get presets() {
+        return this._presets.value;
+    }
+    set presets(presets) {
+        this._presets.next(presets);
+    }
+    selectPreset(preset) {
+        const presetValue = preset.presetValue;
+        if (presetValue == null || objectHasNoKeys(presetValue)) {
+            this.filterSourceDirective.setFilter((presetValue !== null && presetValue !== void 0 ? presetValue : {}));
+            this.filterSourceDirective.resetFilter();
+        }
+        else {
+            let filter = getValueFromGetter(preset.presetValue);
+            if (filter.preset !== preset.preset) {
+                filter = Object.assign(Object.assign({}, filter), { preset: preset.preset });
+            }
+            this.filterSourceDirective.setFilter(filter);
+        }
+    }
+    ngOnDestroy() {
+        this._presets.complete();
+    }
+}
+AbstractDbxPresetFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: AbstractDbxPresetFilterMenuComponent, deps: [{ token: i1$2.FilterSourceDirective }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractDbxPresetFilterMenuComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.2", type: AbstractDbxPresetFilterMenuComponent, inputs: { presets: "presets" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: AbstractDbxPresetFilterMenuComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i1$2.FilterSourceDirective }]; }, propDecorators: { presets: [{
+                type: Input
+            }] } });
+
+class DbxPresetFilterListComponent extends AbstractDbxPresetFilterMenuComponent {
+}
+DbxPresetFilterListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxPresetFilterListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPresetFilterListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxPresetFilterListComponent, selector: "dbx-preset-filter-list", usesInheritance: true, ngImport: i0, template: `
+    <dbx-anchor-list [anchors]="presetAnchors$ | async"></dbx-anchor-list>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxAnchorListComponent, selector: "dbx-anchor-list", inputs: ["anchors"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxPresetFilterListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-preset-filter-list',
+                    template: `
+    <dbx-anchor-list [anchors]="presetAnchors$ | async"></dbx-anchor-list>
+  `
+                }]
+        }] });
+
+/**
+ * Displays a button and menu for filtering presets.
  */
-class DbxFilterWrapperComponent {
+class DbxPresetFilterMenuComponent extends AbstractDbxPresetFilterMenuComponent {
     constructor() {
-        this.applyFilter = new EventEmitter();
-        this.resetFilter = new EventEmitter();
+        super(...arguments);
+        this._config = new BehaviorSubject({});
+        this.buttonText$ = combineLatest([this._config, this.selectedPreset$]).pipe(map(([config, preset]) => {
+            var _a, _b;
+            let buttonText = (_b = (_a = preset === null || preset === void 0 ? void 0 : preset.title) !== null && _a !== void 0 ? _a : config.unknownSelectionText) !== null && _b !== void 0 ? _b : 'Filter';
+            return buttonText;
+        }), distinctUntilChanged(), shareReplay$1(1));
+        this.buttonIcon$ = this._config.pipe(switchMap((config) => {
+            const filterIcon = config.filterIcon === false ? '' : config.filterIcon || 'arrow_drop_down';
+            return this.selectedPreset$.pipe(map((preset) => {
+                var _a;
+                let icon;
+                if (config.filterIcon === false) {
+                    if (config.usePresetIcon) {
+                        icon = preset === null || preset === void 0 ? void 0 : preset.icon;
+                    }
+                }
+                else if (config.usePresetIcon) {
+                    icon = (_a = preset === null || preset === void 0 ? void 0 : preset.icon) !== null && _a !== void 0 ? _a : filterIcon;
+                }
+                else {
+                    icon = filterIcon;
+                }
+                return icon;
+            }));
+        }), distinctUntilChanged(), shareReplay$1(1));
+    }
+    get config() {
+        return this._config.value;
     }
-    filterClicked() {
-        this.applyFilter.emit();
+    set config(config) {
+        this._config.next(config);
     }
-    resetClicked() {
-        this.resetFilter.emit();
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._config.complete();
     }
 }
-DbxFilterWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DbxFilterWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFilterWrapperComponent, selector: "dbx-filter-wrapper", inputs: { modified: "modified" }, outputs: { applyFilter: "applyFilter", resetFilter: "resetFilter" }, ngImport: i0, template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div fxLayout=\"row\">\n    <button mat-raised-button (click)=\"filterClicked()\">Apply Filter</button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetClicked()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i7$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterWrapperComponent, decorators: [{
+DbxPresetFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxPresetFilterMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbxPresetFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxPresetFilterMenuComponent, selector: "dbx-preset-filter-menu", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "<button mat-button [matMenuTriggerFor]=\"menu\" class=\"dbx-preset-filter-menu-button\" aria-label=\"open filter\">\n  <mat-icon class=\"dbx-icon-spacer\" *ngIf=\"buttonIcon$ | async\">{{ buttonIcon$ | async }}</mat-icon>\n  <span>{{ buttonText$ | async }}</span>\n</button>\n<mat-menu #menu class=\"dbx-preset-filter-menu\">\n  <dbx-anchor *ngFor=\"let anchor of presetAnchors$ | async\" [anchor]=\"anchor\">\n    <button mat-menu-item [ngClass]=\"anchor.selected ? 'active' : ''\">{{ anchor.title }}</button>\n  </dbx-anchor>\n</mat-menu>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i3$5.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"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxPresetFilterMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-filter-wrapper', template: "<div class=\"dbx-filter-wrapper\">\n  <div class=\"dbx-filter-wrapper-content\">\n    <ng-content></ng-content>\n  </div>\n  <div fxLayout=\"row\">\n    <button mat-raised-button (click)=\"filterClicked()\">Apply Filter</button>\n    <div class=\"spacer\"></div>\n    <button mat-icon-button (click)=\"resetClicked()\">\n      <mat-icon>clear</mat-icon>\n    </button>\n  </div>\n</div>\n" }]
-        }], propDecorators: { modified: [{
+            args: [{ selector: 'dbx-preset-filter-menu', template: "<button mat-button [matMenuTriggerFor]=\"menu\" class=\"dbx-preset-filter-menu-button\" aria-label=\"open filter\">\n  <mat-icon class=\"dbx-icon-spacer\" *ngIf=\"buttonIcon$ | async\">{{ buttonIcon$ | async }}</mat-icon>\n  <span>{{ buttonText$ | async }}</span>\n</button>\n<mat-menu #menu class=\"dbx-preset-filter-menu\">\n  <dbx-anchor *ngFor=\"let anchor of presetAnchors$ | async\" [anchor]=\"anchor\">\n    <button mat-menu-item [ngClass]=\"anchor.selected ? 'active' : ''\">{{ anchor.title }}</button>\n  </dbx-anchor>\n</mat-menu>\n" }]
+        }], propDecorators: { config: [{
                 type: Input
-            }], applyFilter: [{
-                type: Output
-            }], resetFilter: [{
-                type: Output
             }] } });
 
 class DbxFilterInteractionModule {
 }
 DbxFilterInteractionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterInteractionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DbxFilterInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterInteractionModule, declarations: [DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent], imports: [CommonModule,
+DbxFilterInteractionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterInteractionModule, declarations: [DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent], imports: [CommonModule,
         DbxPopoverInteractionModule,
         DbxCoreFilterModule,
+        DbxButtonModule,
+        DbxRouterAnchorModule,
+        DbxRouterAnchorListModule,
         DbxInjectionComponentModule,
         FlexLayoutModule,
         // Material
+        MatMenuModule,
         MatIconModule,
-        MatButtonModule], exports: [DbxCoreFilterModule, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent] });
+        MatButtonModule], exports: [DbxCoreFilterModule, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent] });
 DbxFilterInteractionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterInteractionModule, imports: [CommonModule,
         DbxPopoverInteractionModule,
         DbxCoreFilterModule,
+        DbxButtonModule,
+        DbxRouterAnchorModule,
+        DbxRouterAnchorListModule,
         DbxInjectionComponentModule,
         FlexLayoutModule,
         // Material
+        MatMenuModule,
         MatIconModule,
         MatButtonModule, DbxCoreFilterModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFilterInteractionModule, decorators: [{
@@ -6433,14 +6603,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
                         CommonModule,
                         DbxPopoverInteractionModule,
                         DbxCoreFilterModule,
+                        DbxButtonModule,
+                        DbxRouterAnchorModule,
+                        DbxRouterAnchorListModule,
                         DbxInjectionComponentModule,
                         FlexLayoutModule,
                         // Material
+                        MatMenuModule,
                         MatIconModule,
                         MatButtonModule
                     ],
-                    declarations: [DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent],
-                    exports: [DbxCoreFilterModule, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent]
+                    declarations: [DbxFilterPopoverComponent, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent],
+                    exports: [DbxCoreFilterModule, DbxFilterPopoverButtonComponent, DbxFilterWrapperComponent, DbxPresetFilterListComponent, DbxPresetFilterMenuComponent]
                 }]
         }] });
 
@@ -7329,7 +7503,7 @@ class DbxCalendarComponent {
     }
 }
 DbxCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxCalendarComponent, deps: [{ token: DbxCalendarStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i6.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"] }, { kind: "component", type: i6.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"] }, { kind: "component", type: i6.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"] }, { kind: "directive", type: i7$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$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"] }, { kind: "directive", type: i8.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"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ɵCalendarDatePipe, name: "calendarDate" }] });
+DbxCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i6.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"] }, { kind: "component", type: i6.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"] }, { kind: "component", type: i6.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"] }, { kind: "directive", type: i7$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7$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"] }, { kind: "directive", type: i3$5.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"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ɵCalendarDatePipe, name: "calendarDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.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" }]
@@ -7648,5 +7822,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.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, 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, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, addConfigToValueListItems, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, dbxColorBackground, disableRightClickInCdkBackdrop, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewModifier, provideTwoColumnsContext, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier, 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, 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, DbxStyleBodyDirective, DbxStyleDirective, DbxStyleLayoutModule, DbxStyleService, DbxSubSectionComponent, DbxSuccessComponent, DbxTextChipsComponent, DbxTextModule, DbxTwoBlocksComponent, DbxTwoColumnBackDirective, DbxTwoColumnColumnHeadComponent, DbxTwoColumnComponent, DbxTwoColumnContextDirective, DbxTwoColumnFullLeftDirective, DbxTwoColumnLayoutModule, DbxTwoColumnRightComponent, DbxTwoColumnSrefDirective, DbxTwoColumnSrefShowRightDirective, 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, TRACK_BY_MODEL_ID, TRACK_BY_MODEL_KEY, TwoColumnsContextStore, addConfigToValueListItems, catchErrorServerParams, compactModeFromInput, compareScreenMediaWidthTypes, convertServerErrorParams, convertToPOJOServerErrorResponse, convertToServerErrorResponse, dbxColorBackground, disableRightClickInCdkBackdrop, listItemModifier, makeDbxActionSnackbarDisplayConfigGeneratorFunction, mapCompactModeObs, mapValuesToValuesListItemConfigObs, provideDbxListView, provideDbxListViewWrapper, provideDbxPromptConfirm, provideDbxValueListView, provideDbxValueListViewModifier, provideTwoColumnsContext, screenMediaWidthTypeIsActive, trackByModelKeyRef, trackByUniqueIdentifier, visibleDateRangeForCalendarState };
 //# sourceMappingURL=dereekb-dbx-web.mjs.map