@dereekb/dbx-web 10.2.0 → 11.0.0

package/calendar/fesm2022/dereekb-dbx-web-calendar.mjs

@@ -1,24 +1,24 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Output, NgModule } from '@angular/core';
+import { Injectable, inject, Component, EventEmitter, Output, NgModule } from '@angular/core';
 import { startOfDay, endOfDay, startOfWeek, endOfWeek, startOfMonth, endOfMonth, differenceInDays, isAfter, isBefore, addDays, isSameDay, isSameMonth } from 'date-fns';
 import { isDateInDateRange, isSameDateRange, isSameDateDay, isFullDateRange, clampDateToDateRange, formatToTimeAndDurationString, sortDateRangeStartAscendingCompareFunction } from '@dereekb/date';
 import { invertDecision, reduceBooleansWithAndFn } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { distinctUntilChanged, switchMap, first, tap, map, shareReplay, combineLatest, withLatestFrom } from 'rxjs';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$1 from '@angular/material/button-toggle';
+import * as i2$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i4$1 from 'angular-calendar';
+import * as i3$1 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule, DateAdapter } from 'angular-calendar';
-import * as i7 from '@ngbracket/ngx-layout/extended';
-import * as i3 from '@angular/material/icon';
+import * as i6 from '@ngbracket/ngx-layout/extended';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@dereekb/dbx-web';
+import * as i4 from '@dereekb/dbx-web';
 import { DbxButtonModule, DbxPopoverInteractionModule } from '@dereekb/dbx-web';
-import * as i6 from '@ngbracket/ngx-layout/flex';
+import * as i5 from '@ngbracket/ngx-layout/flex';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 
@@ -73,96 +73,96 @@ class DbxCalendarStore extends ComponentStore {
             dateTappedTwice: false,
             events: []
         });
-        // MARK: Effects
-        this.tapFirstPage = this.effect((input) => {
-            return input.pipe(switchMap(() => this.minNavigationDate$.pipe(first(), tap((x) => {
-                if (x) {
-                    this.tapDay(x);
-                }
-            }))));
-        });
-        this.tapNext = this.effect((input) => {
-            return input.pipe(switchMap(() => this.visibleDateRange$.pipe(first(), tap(({ end, isMaxDateVisible }) => {
-                if (!isMaxDateVisible) {
-                    this.tapDay(addDays(end, 1));
-                }
-            }))));
-        });
-        this.tapPrevious = this.effect((input) => {
-            return input.pipe(switchMap(() => this.visibleDateRange$.pipe(first(), tap(({ start, isMinDateVisible }) => {
-                if (!isMinDateVisible) {
-                    this.tapDay(addDays(start, -1));
-                }
-            }))));
-        });
-        this.tapLastPage = this.effect((input) => {
-            return input.pipe(switchMap(() => this.maxNavigationDate$.pipe(first(), tap((x) => {
-                if (x) {
-                    this.tapDay(x);
-                }
-            }))));
-        });
-        // MARK: Accessors
-        this.showTodayButton$ = this.state$.pipe(map((x) => x.showTodayButton), distinctUntilChanged(), shareReplay(1));
-        this.date$ = this.state$.pipe(map((x) => x.date));
-        this.dateTappedTwice$ = this.state$.pipe(map((x) => x.dateTappedTwice));
-        this.events$ = this.state$.pipe(map((x) => x.events));
-        // TODO: Filter to be events that will only be displayed based on the current calendar.
-        this.visibleEvents$ = this.state$.pipe(map((x) => x.events), shareReplay(1));
-        this.eventsForDateState$ = this.state$.pipe(distinctUntilDateOrTypeOrEventsChanged, map((state) => ({
-            date: state.date,
-            events: state.events.filter((x) => isSameDay(x.start, state.date) || (x.end && isBefore(x.start, state.date) && isAfter(x.end, state.date))),
-            dateTappedTwice: state.dateTappedTwice
-        })), shareReplay(1));
-        this.eventsForDate$ = this.eventsForDateState$.pipe(map((state) => state.events));
-        this.visibleDateRange$ = this.state$.pipe(
-        // If the date or type changes, check again.
-        distinctUntilChanged((a, b) => a?.date === b?.date && a?.type === b?.type), map(visibleDateRangeForCalendarState), distinctUntilChanged((a, b) => {
-            if (a.type === b.type) {
-                return isSameDay(a.start, b.start);
+    }
+    // MARK: Effects
+    tapFirstPage = this.effect((input) => {
+        return input.pipe(switchMap(() => this.minNavigationDate$.pipe(first(), tap((x) => {
+            if (x) {
+                this.tapDay(x);
             }
-            else {
-                return false; // Type changed, date range changed.
+        }))));
+    });
+    tapNext = this.effect((input) => {
+        return input.pipe(switchMap(() => this.visibleDateRange$.pipe(first(), tap(({ end, isMaxDateVisible }) => {
+            if (!isMaxDateVisible) {
+                this.tapDay(addDays(end, 1));
             }
-        }), shareReplay(1));
-        this.isLookingAtToday$ = this.visibleDateRange$.pipe(map((x) => isDateInDateRange(new Date(), x)), distinctUntilChanged(), shareReplay(1));
-        this.isLookingAtMinimumDate$ = this.visibleDateRange$.pipe(map((x) => x.isMinDateVisible), distinctUntilChanged(), shareReplay(1));
-        this.isLookingAtMaximumDate$ = this.visibleDateRange$.pipe(map((x) => x.isMaxDateVisible), distinctUntilChanged(), shareReplay(1));
-        this.hasMultiplePages$ = combineLatest([this.isLookingAtMinimumDate$, this.isLookingAtMaximumDate$]).pipe(map(invertDecision(reduceBooleansWithAndFn(true))), distinctUntilChanged(), shareReplay(1));
-        this.displayType$ = this.state$.pipe(map((x) => x.type), distinctUntilChanged((a, b) => a === b), shareReplay(1));
-        this.navigationRangeLimit$ = this.state$.pipe(map((x) => x.navigationRangeLimit), distinctUntilChanged(isSameDateRange), shareReplay(1));
-        this.minNavigationDate$ = this.navigationRangeLimit$.pipe(map((x) => x?.start), distinctUntilChanged(isSameDateDay), shareReplay(1));
-        this.maxNavigationDate$ = this.navigationRangeLimit$.pipe(map((x) => x?.end), distinctUntilChanged(isSameDateDay), shareReplay(1));
-        this.isTodayInNavigationRangeLimit$ = this.navigationRangeLimit$.pipe(map((x) => isDateInDateRange(new Date(), x ?? {})), distinctUntilChanged(), shareReplay(1));
-        this.canJumpToToday$ = combineLatest([this.isLookingAtToday$, this.isTodayInNavigationRangeLimit$]).pipe(map(([isLookingAtToday, isTodayInNavigationRangeLimit]) => !isLookingAtToday && isTodayInNavigationRangeLimit), distinctUntilChanged(), shareReplay(1));
-        this.canShowPageButtons$ = this.state$.pipe(map((x) => x.showPageButtons && x.navigationRangeLimit && isFullDateRange(x.navigationRangeLimit)), distinctUntilChanged(), shareReplay(1));
-        this.showPageButtons$ = combineLatest([this.canShowPageButtons$, this.isLookingAtMinimumDate$, this.isLookingAtMaximumDate$]).pipe(map(([canShowPageButtons, isLookingAtMinimumDate, isLookingAtMaximumDate]) => {
-            return canShowPageButtons && !(isLookingAtMinimumDate && isLookingAtMaximumDate);
-        }), distinctUntilChanged(), shareReplay(1));
-        // MARK: State Changes
-        /**
-         * Tap a day.
-         *
-         * - If the same day is presented, dateTappedTwice is flipped.
-         */
-        this.tapDay = this.updater((state, date) => updateCalendarStateWithTappedDate(state, date));
-        /**
-         * Set all events on the calendar.
-         */
-        this.setEvents = this.updater((state, events) => ({ ...state, events }));
-        /**
-         * Set all events on the calendar.
-         */
-        this.setDisplayType = this.updater((state, type) => ({ ...state, type }));
-        /**
-         * Sets the navigation limit.
-         */
-        this.setNavigationRangeLimit = this.updater((state, navigationRangeLimit) => updateCalendarStateWithNavigationRangeLimit(state, navigationRangeLimit));
-        this.setShowTodayButton = this.updater((state, showTodayButton) => ({ ...state, showTodayButton: showTodayButton != null ? showTodayButton : true }));
-        this.setShowPageButtons = this.updater((state, showPageButtons) => ({ ...state, showPageButtons: showPageButtons != null ? showPageButtons : false }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarStore }); }
+        }))));
+    });
+    tapPrevious = this.effect((input) => {
+        return input.pipe(switchMap(() => this.visibleDateRange$.pipe(first(), tap(({ start, isMinDateVisible }) => {
+            if (!isMinDateVisible) {
+                this.tapDay(addDays(start, -1));
+            }
+        }))));
+    });
+    tapLastPage = this.effect((input) => {
+        return input.pipe(switchMap(() => this.maxNavigationDate$.pipe(first(), tap((x) => {
+            if (x) {
+                this.tapDay(x);
+            }
+        }))));
+    });
+    // MARK: Accessors
+    showTodayButton$ = this.state$.pipe(map((x) => x.showTodayButton), distinctUntilChanged(), shareReplay(1));
+    date$ = this.state$.pipe(map((x) => x.date));
+    dateTappedTwice$ = this.state$.pipe(map((x) => x.dateTappedTwice));
+    events$ = this.state$.pipe(map((x) => x.events));
+    // TODO: Filter to be events that will only be displayed based on the current calendar.
+    visibleEvents$ = this.state$.pipe(map((x) => x.events), shareReplay(1));
+    eventsForDateState$ = this.state$.pipe(distinctUntilDateOrTypeOrEventsChanged, map((state) => ({
+        date: state.date,
+        events: state.events.filter((x) => isSameDay(x.start, state.date) || (x.end && isBefore(x.start, state.date) && isAfter(x.end, state.date))),
+        dateTappedTwice: state.dateTappedTwice
+    })), shareReplay(1));
+    eventsForDate$ = this.eventsForDateState$.pipe(map((state) => state.events));
+    visibleDateRange$ = this.state$.pipe(
+    // If the date or type changes, check again.
+    distinctUntilChanged((a, b) => a?.date === b?.date && a?.type === b?.type), map(visibleDateRangeForCalendarState), distinctUntilChanged((a, b) => {
+        if (a.type === b.type) {
+            return isSameDay(a.start, b.start);
+        }
+        else {
+            return false; // Type changed, date range changed.
+        }
+    }), shareReplay(1));
+    isLookingAtToday$ = this.visibleDateRange$.pipe(map((x) => isDateInDateRange(new Date(), x)), distinctUntilChanged(), shareReplay(1));
+    isLookingAtMinimumDate$ = this.visibleDateRange$.pipe(map((x) => x.isMinDateVisible), distinctUntilChanged(), shareReplay(1));
+    isLookingAtMaximumDate$ = this.visibleDateRange$.pipe(map((x) => x.isMaxDateVisible), distinctUntilChanged(), shareReplay(1));
+    hasMultiplePages$ = combineLatest([this.isLookingAtMinimumDate$, this.isLookingAtMaximumDate$]).pipe(map(invertDecision(reduceBooleansWithAndFn(true))), distinctUntilChanged(), shareReplay(1));
+    displayType$ = this.state$.pipe(map((x) => x.type), distinctUntilChanged((a, b) => a === b), shareReplay(1));
+    navigationRangeLimit$ = this.state$.pipe(map((x) => x.navigationRangeLimit), distinctUntilChanged(isSameDateRange), shareReplay(1));
+    minNavigationDate$ = this.navigationRangeLimit$.pipe(map((x) => x?.start), distinctUntilChanged(isSameDateDay), shareReplay(1));
+    maxNavigationDate$ = this.navigationRangeLimit$.pipe(map((x) => x?.end), distinctUntilChanged(isSameDateDay), shareReplay(1));
+    isTodayInNavigationRangeLimit$ = this.navigationRangeLimit$.pipe(map((x) => isDateInDateRange(new Date(), x ?? {})), distinctUntilChanged(), shareReplay(1));
+    canJumpToToday$ = combineLatest([this.isLookingAtToday$, this.isTodayInNavigationRangeLimit$]).pipe(map(([isLookingAtToday, isTodayInNavigationRangeLimit]) => !isLookingAtToday && isTodayInNavigationRangeLimit), distinctUntilChanged(), shareReplay(1));
+    canShowPageButtons$ = this.state$.pipe(map((x) => x.showPageButtons && x.navigationRangeLimit && isFullDateRange(x.navigationRangeLimit)), distinctUntilChanged(), shareReplay(1));
+    showPageButtons$ = combineLatest([this.canShowPageButtons$, this.isLookingAtMinimumDate$, this.isLookingAtMaximumDate$]).pipe(map(([canShowPageButtons, isLookingAtMinimumDate, isLookingAtMaximumDate]) => {
+        return canShowPageButtons && !(isLookingAtMinimumDate && isLookingAtMaximumDate);
+    }), distinctUntilChanged(), shareReplay(1));
+    // MARK: State Changes
+    /**
+     * Tap a day.
+     *
+     * - If the same day is presented, dateTappedTwice is flipped.
+     */
+    tapDay = this.updater((state, date) => updateCalendarStateWithTappedDate(state, date));
+    /**
+     * Set all events on the calendar.
+     */
+    setEvents = this.updater((state, events) => ({ ...state, events }));
+    /**
+     * Set all events on the calendar.
+     */
+    setDisplayType = this.updater((state, type) => ({ ...state, type }));
+    /**
+     * Sets the navigation limit.
+     */
+    setNavigationRangeLimit = this.updater((state, navigationRangeLimit) => updateCalendarStateWithNavigationRangeLimit(state, navigationRangeLimit));
+    setShowTodayButton = this.updater((state, showTodayButton) => ({ ...state, showTodayButton: showTodayButton != null ? showTodayButton : true }));
+    setShowPageButtons = this.updater((state, showPageButtons) => ({ ...state, showPageButtons: showPageButtons != null ? showPageButtons : false }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarStore });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarStore, decorators: [{
             type: Injectable
@@ -219,23 +219,21 @@ function prepareAndSortCalendarEvents(events) {
 }
 
 class DbxCalendarBaseComponent {
-    constructor(calendarStore) {
-        this.calendarStore = calendarStore;
-        this.viewDate$ = this.calendarStore.date$;
-        this.showTodayButton$ = this.calendarStore.showTodayButton$;
-        this.canJumpToToday$ = this.calendarStore.canJumpToToday$;
-        this.isLookingAtMinimumDate$ = this.calendarStore.isLookingAtMinimumDate$;
-        this.isLookingAtMaximumDate$ = this.calendarStore.isLookingAtMaximumDate$;
-        this.hasMultiplePages$ = this.calendarStore.hasMultiplePages$;
-        this.showPageButtons$ = this.calendarStore.showPageButtons$;
-        this.activeDayIsOpen$ = this.calendarStore.eventsForDateState$.pipe(withLatestFrom(this.calendarStore.date$), map(([x, date]) => {
-            if (x.events.length && isSameMonth(x.date, date)) {
-                return !x.dateTappedTwice;
-            }
-            return false;
-        }));
-        this.displayType$ = this.calendarStore.displayType$;
-    }
+    calendarStore = inject((DbxCalendarStore));
+    viewDate$ = this.calendarStore.date$;
+    showTodayButton$ = this.calendarStore.showTodayButton$;
+    canJumpToToday$ = this.calendarStore.canJumpToToday$;
+    isLookingAtMinimumDate$ = this.calendarStore.isLookingAtMinimumDate$;
+    isLookingAtMaximumDate$ = this.calendarStore.isLookingAtMaximumDate$;
+    hasMultiplePages$ = this.calendarStore.hasMultiplePages$;
+    showPageButtons$ = this.calendarStore.showPageButtons$;
+    activeDayIsOpen$ = this.calendarStore.eventsForDateState$.pipe(withLatestFrom(this.calendarStore.date$), map(([x, date]) => {
+        if (x.events.length && isSameMonth(x.date, date)) {
+            return !x.dateTappedTwice;
+        }
+        return false;
+    }));
+    displayType$ = this.calendarStore.displayType$;
     todayClicked() {
         this.calendarStore.tapDay(new Date());
     }
@@ -254,28 +252,26 @@ class DbxCalendarBaseComponent {
     typeToggleChanged(event) {
         this.calendarStore.setDisplayType(event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarBaseComponent, deps: [{ token: DbxCalendarStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxCalendarBaseComponent, selector: "dbx-calendar-base", 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\" fxLayout.xs=\"column\" ngClass.xs=\"dbx-calendar-controls-compact\">\n      <span class=\"dbx-calendar-controls-left dbx-flex-bar\" fxFlex=\"nogrow\">\n        <button *ngIf=\"showTodayButton$ | async\" mat-stroked-button [disabled]=\"!(canJumpToToday$ | async)\" (click)=\"todayClicked()\">Today</button>\n        <dbx-button-spacer></dbx-button-spacer>\n        <div class=\"d-iblock\" *ngIf=\"hasMultiplePages$ | async\">\n          <button *ngIf=\"showPageButtons$ | async\" mat-icon-button [disabled]=\"isLookingAtMinimumDate$ | async\" aria-label=\"first page button\" (click)=\"firstPageButtonClicked()\">\n            <mat-icon>first_page</mat-icon>\n          </button>\n          <button mat-icon-button [disabled]=\"isLookingAtMinimumDate$ | async\" [attr.aria-label]=\"'Previous ' + (displayType$ | async) + ' button'\" (click)=\"previousButtonClicked()\">\n            <mat-icon>navigate_before</mat-icon>\n          </button>\n          <button mat-icon-button [disabled]=\"isLookingAtMaximumDate$ | async\" [attr.aria-label]=\"'Next' + (displayType$ | async)! + ' button'\" (click)=\"nextButtonClicked()\">\n            <mat-icon>navigate_next</mat-icon>\n          </button>\n          <button *ngIf=\"showPageButtons$ | async\" mat-icon-button [disabled]=\"isLookingAtMaximumDate$ | async\" aria-label=\"last page button\" (click)=\"lastPageButtonClicked()\">\n            <mat-icon>last_page</mat-icon>\n          </button>\n        </div>\n      </span>\n      <span class=\"spacer\"></span>\n      <span class=\"dbx-calendar-controls-right\" fxFlex=\"nogrow\">\n        <ng-content select=\"[controls]\"></ng-content>\n      </span>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: i6.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: i6.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: i7.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: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.ɵCalendarDatePipe, name: "calendarDate" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxCalendarBaseComponent, selector: "dbx-calendar-base", 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\" fxLayout.xs=\"column\" ngClass.xs=\"dbx-calendar-controls-compact\">\n      <span class=\"dbx-calendar-controls-left dbx-flex-bar\" fxFlex=\"nogrow\">\n        <button *ngIf=\"showTodayButton$ | async\" mat-stroked-button [disabled]=\"!(canJumpToToday$ | async)\" (click)=\"todayClicked()\">Today</button>\n        <dbx-button-spacer></dbx-button-spacer>\n        <div class=\"d-iblock\" *ngIf=\"hasMultiplePages$ | async\">\n          <button *ngIf=\"showPageButtons$ | async\" mat-icon-button [disabled]=\"isLookingAtMinimumDate$ | async\" aria-label=\"first page button\" (click)=\"firstPageButtonClicked()\">\n            <mat-icon>first_page</mat-icon>\n          </button>\n          <button mat-icon-button [disabled]=\"isLookingAtMinimumDate$ | async\" [attr.aria-label]=\"'Previous ' + (displayType$ | async) + ' button'\" (click)=\"previousButtonClicked()\">\n            <mat-icon>navigate_before</mat-icon>\n          </button>\n          <button mat-icon-button [disabled]=\"isLookingAtMaximumDate$ | async\" [attr.aria-label]=\"'Next' + (displayType$ | async)! + ' button'\" (click)=\"nextButtonClicked()\">\n            <mat-icon>navigate_next</mat-icon>\n          </button>\n          <button *ngIf=\"showPageButtons$ | async\" mat-icon-button [disabled]=\"isLookingAtMaximumDate$ | async\" aria-label=\"last page button\" (click)=\"lastPageButtonClicked()\">\n            <mat-icon>last_page</mat-icon>\n          </button>\n        </div>\n      </span>\n      <span class=\"spacer\"></span>\n      <span class=\"dbx-calendar-controls-right\" fxFlex=\"nogrow\">\n        <ng-content select=\"[controls]\"></ng-content>\n      </span>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: i5.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: i5.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: i6.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.ɵCalendarDatePipe, name: "calendarDate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarBaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-calendar-base', 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\" fxLayout.xs=\"column\" ngClass.xs=\"dbx-calendar-controls-compact\">\n      <span class=\"dbx-calendar-controls-left dbx-flex-bar\" fxFlex=\"nogrow\">\n        <button *ngIf=\"showTodayButton$ | async\" mat-stroked-button [disabled]=\"!(canJumpToToday$ | async)\" (click)=\"todayClicked()\">Today</button>\n        <dbx-button-spacer></dbx-button-spacer>\n        <div class=\"d-iblock\" *ngIf=\"hasMultiplePages$ | async\">\n          <button *ngIf=\"showPageButtons$ | async\" mat-icon-button [disabled]=\"isLookingAtMinimumDate$ | async\" aria-label=\"first page button\" (click)=\"firstPageButtonClicked()\">\n            <mat-icon>first_page</mat-icon>\n          </button>\n          <button mat-icon-button [disabled]=\"isLookingAtMinimumDate$ | async\" [attr.aria-label]=\"'Previous ' + (displayType$ | async) + ' button'\" (click)=\"previousButtonClicked()\">\n            <mat-icon>navigate_before</mat-icon>\n          </button>\n          <button mat-icon-button [disabled]=\"isLookingAtMaximumDate$ | async\" [attr.aria-label]=\"'Next' + (displayType$ | async)! + ' button'\" (click)=\"nextButtonClicked()\">\n            <mat-icon>navigate_next</mat-icon>\n          </button>\n          <button *ngIf=\"showPageButtons$ | async\" mat-icon-button [disabled]=\"isLookingAtMaximumDate$ | async\" aria-label=\"last page button\" (click)=\"lastPageButtonClicked()\">\n            <mat-icon>last_page</mat-icon>\n          </button>\n        </div>\n      </span>\n      <span class=\"spacer\"></span>\n      <span class=\"dbx-calendar-controls-right\" fxFlex=\"nogrow\">\n        <ng-content select=\"[controls]\"></ng-content>\n      </span>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: DbxCalendarStore }]; } });
+        }] });
 
 class DbxCalendarComponent {
-    constructor(calendarStore) {
-        this.calendarStore = calendarStore;
-        this.clickEvent = new EventEmitter();
-        this.viewDate$ = this.calendarStore.date$;
-        this.events$ = this.calendarStore.visibleEvents$.pipe(map(prepareAndSortCalendarEvents), shareReplay(1));
-        this.activeDayIsOpen$ = this.calendarStore.eventsForDateState$.pipe(withLatestFrom(this.calendarStore.date$), map(([x, date]) => {
-            if (x.events.length && isSameMonth(x.date, date)) {
-                return !x.dateTappedTwice;
-            }
-            return false;
-        }), distinctUntilChanged(), shareReplay(1));
-        this.displayType$ = this.calendarStore.displayType$;
-    }
+    calendarStore = inject((DbxCalendarStore));
+    clickEvent = new EventEmitter();
+    viewDate$ = this.calendarStore.date$;
+    events$ = this.calendarStore.visibleEvents$.pipe(map(prepareAndSortCalendarEvents), shareReplay(1));
+    activeDayIsOpen$ = this.calendarStore.eventsForDateState$.pipe(withLatestFrom(this.calendarStore.date$), map(([x, date]) => {
+        if (x.events.length && isSameMonth(x.date, date)) {
+            return !x.dateTappedTwice;
+        }
+        return false;
+    }), distinctUntilChanged(), shareReplay(1));
+    displayType$ = this.calendarStore.displayType$;
     ngOnDestroy() {
         this.clickEvent.complete();
     }
@@ -297,13 +293,13 @@ class DbxCalendarComponent {
     typeToggleChanged(event) {
         this.calendarStore.setDisplayType(event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarComponent, deps: [{ token: DbxCalendarStore }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxCalendarComponent, selector: "dbx-calendar", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<dbx-calendar-base>\n  <ng-container controls>\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  </ng-container>\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</dbx-calendar-base>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.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: i4$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"] }, { kind: "component", type: i4$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", "resizeCursors"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { kind: "component", type: i4$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", "resizeCursors"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }, { kind: "directive", type: i7.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: DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DbxCalendarComponent, selector: "dbx-calendar", outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<dbx-calendar-base>\n  <ng-container controls>\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  </ng-container>\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</dbx-calendar-base>\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: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.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: i3$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"] }, { kind: "component", type: i3$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", "resizeCursors"], outputs: ["dayHeaderClicked", "eventClicked", "eventTimesChanged", "beforeViewRender", "hourSegmentClicked"] }, { kind: "component", type: i3$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", "resizeCursors"], outputs: ["eventClicked", "hourSegmentClicked", "eventTimesChanged", "beforeViewRender"] }, { kind: "directive", type: i6.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: DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-calendar', template: "<dbx-calendar-base>\n  <ng-container controls>\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  </ng-container>\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</dbx-calendar-base>\n" }]
-        }], ctorParameters: function () { return [{ type: DbxCalendarStore }]; }, propDecorators: { clickEvent: [{
+        }], propDecorators: { clickEvent: [{
                 type: Output
             }] } });
 
@@ -313,8 +309,8 @@ const declarations = [
     DbxCalendarComponent
 ];
 class DbxCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarModule, declarations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarModule, declarations: [
             //
             DbxCalendarBaseComponent,
             DbxCalendarComponent], imports: [
@@ -331,8 +327,8 @@ class DbxCalendarModule {
             CalendarWeekModule], exports: [
             //
             DbxCalendarBaseComponent,
-            DbxCalendarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarModule, imports: [
+            DbxCalendarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarModule, imports: [
             //
             CommonModule,
             MatIconModule,
@@ -343,7 +339,7 @@ class DbxCalendarModule {
             CalendarModule,
             CalendarDayModule,
             FlexLayoutModule,
-            CalendarWeekModule] }); }
+            CalendarWeekModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarModule, decorators: [{
             type: NgModule,
@@ -369,9 +365,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Provides default configuration for the DbxCalendarModule
  */
 class DbxCalendarRootModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarRootModule, imports: [i4$1.CalendarModule], exports: [DbxCalendarModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarRootModule, imports: [CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory }), DbxCalendarModule] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarRootModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarRootModule, imports: [i3$1.CalendarModule], exports: [DbxCalendarModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarRootModule, imports: [CalendarModule.forRoot({ provide: DateAdapter, useFactory: adapterFactory }), DbxCalendarModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DbxCalendarRootModule, decorators: [{
             type: NgModule,