@dereekb/dbx-form 9.24.11 → 9.24.13

package/fesm2020/dereekb-dbx-form-calendar.mjs

@@ -6,9 +6,9 @@ import * as i0 from '@angular/core';
 import { Injectable, SkipSelf, Directive, Injector, Optional, Component, Inject, Input, ElementRef, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, InjectionToken, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, combineLatestWith, BehaviorSubject, of, startWith, filter, throttleTime, combineLatest } from 'rxjs';
-import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservable } from '@dereekb/rxjs';
+import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
 import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, expandDateScheduleRange, isSameDateScheduleRange, dateTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, dateTimezoneUtcNormal, expandDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, copyHoursAndMinutesFromDate, dateScheduleEncodedWeek, dateBlockTimingDateFactory, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString, dateRange, DateRangeType } from '@dereekb/date';
-import { setsAreEquivalent, unique, mergeArrays, iterableToArray, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, minAndMaxNumber, getDaysOfWeekNames, mergeObjects, KeyValueTypleValueFilter } from '@dereekb/util';
+import { setsAreEquivalent, unique, mergeArrays, iterableToArray, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, minAndMaxNumber, getDaysOfWeekNames, reduceBooleansWithAnd, mergeObjects, KeyValueTypleValueFilter } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { startOfDay, endOfDay, isBefore, endOfWeek } from 'date-fns';
 import * as i1 from '@dereekb/dbx-web/calendar';
@@ -26,6 +26,7 @@ import { switchMapDbxInjectionComponentConfig, DbxInjectionComponentModule, DbxD
 import * as i1$2 from '@angular/material/dialog';
 import * as i6 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule } from 'angular-calendar';
+import * as i7$1 from '@angular/flex-layout/extended';
 import * as i3$2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/button';
@@ -199,6 +200,7 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.dateScheduleRangeValue$ = this.currentDateScheduleRangeValue$.pipe(filterMaybe(), shareReplay(1));
         this.cellContentFactory$ = this.state$.pipe(map((x) => x.cellContentFactory), distinctUntilChanged(), shareReplay(1));
         this.isCustomized$ = this.state$.pipe(map((x) => x.toggledIndexes.size > 0), distinctUntilChanged(), shareReplay(1));
+        this.isViewReadonly$ = this.state$.pipe(map((x) => x.isViewReadonly), distinctUntilChanged(), shareReplay(1));
         // MARK: State Changes
         this.setMinMaxDateRange = this.updater(updateStateWithMinMaxDateRange);
         this.setFilter = this.updater(updateStateWithFilter);
@@ -220,6 +222,12 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.setAllowAllScheduleDays = this.updater((state) => updateStateWithChangedScheduleDays(state, null));
         this.setDateScheduleRangeValue = this.updater((state, value) => updateStateWithDateScheduleRangeValue(state, value));
         this.setCellContentFactory = this.updater((state, cellContentFactory) => ({ ...state, cellContentFactory }));
+        /**
+         * Used by the parent view to propogate a readonly state.
+         *
+         * Should typically not be used by the user directly with the intention of the parent synchronizing to this state.
+         */
+        this.setViewReadonlyState = this.updater((state, isViewReadonly) => ({ ...state, isViewReadonly }));
     }
 }
 DbxCalendarScheduleSelectionStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxCalendarScheduleSelectionStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -924,6 +932,7 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
         this.popoverService = popoverService;
         this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
         this.injector = injector;
+        this.disabled$ = this.dbxCalendarScheduleSelectionStore.isViewReadonly$;
         this.buttonText$ = this.dbxCalendarScheduleSelectionStore.currentDateRange$.pipe(map((x) => {
             if (x?.start && x.end) {
                 return `${formatToMonthDayString(x.start)} - ${formatToMonthDayString(x.end)}`;
@@ -939,14 +948,14 @@ class DbxScheduleSelectionCalendarDatePopoverButtonComponent {
 }
 DbxScheduleSelectionCalendarDatePopoverButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, deps: [{ token: i1$1.DbxPopoverService }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 DbxScheduleSelectionCalendarDatePopoverButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, selector: "dbx-schedule-selection-calendar-date-popover-button", viewQueries: [{ propertyName: "buttonPopoverOrigin", first: true, predicate: ["buttonPopoverOrigin"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-    <dbx-button #buttonPopoverOrigin icon="date_range" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
+    <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabled$ | async" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
   `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-schedule-selection-calendar-date-popover-button',
                     template: `
-    <dbx-button #buttonPopoverOrigin icon="date_range" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
+    <dbx-button #buttonPopoverOrigin icon="date_range" [disabled]="disabled$ | async" [raised]="true" color="accent" [text]="buttonText$ | async" (buttonClick)="openPopover()"></dbx-button>
   `
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DbxPopoverService }, { type: DbxCalendarScheduleSelectionStore }, { type: i0.Injector }]; }, propDecorators: { buttonPopoverOrigin: [{
@@ -1001,7 +1010,15 @@ class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
         this.popoverService = popoverService;
         this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
         this.injector = injector;
-        this.disableButton$ = this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => !x));
+        this._disabled = new BehaviorSubject(false);
+        this.disableButton$ = this._disabled.pipe(switchMap((disabled) => {
+            if (disabled) {
+                return of(true);
+            }
+            else {
+                return this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => !x));
+            }
+        }), distinctUntilChanged(), shareReplay(1));
         this.buttonDisplay$ = this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => {
             let buttonDisplay;
             switch (x) {
@@ -1022,12 +1039,18 @@ class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
             return buttonDisplay;
         }), shareReplay(1));
     }
+    ngOnDestroy() {
+        this._disabled.complete();
+    }
     toggleSelection() {
         this.dbxCalendarScheduleSelectionStore.toggleSelection();
     }
+    set disabled(disabled) {
+        this._disabled.next(disabled);
+    }
 }
 DbxScheduleSelectionCalendarSelectionToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, deps: [{ token: i1$1.DbxPopoverService }, { token: DbxCalendarScheduleSelectionStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DbxScheduleSelectionCalendarSelectionToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", ngImport: i0, template: `
+DbxScheduleSelectionCalendarSelectionToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: { disabled: "disabled" }, ngImport: i0, template: `
     <dbx-button [disabled]="disableButton$ | async" [buttonDisplay]="buttonDisplay$ | async" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
   `, isInline: true, dependencies: [{ kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "iconOnly", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
@@ -1038,7 +1061,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
     <dbx-button [disabled]="disableButton$ | async" [buttonDisplay]="buttonDisplay$ | async" [raised]="true" (buttonClick)="toggleSelection()"></dbx-button>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DbxPopoverService }, { type: DbxCalendarScheduleSelectionStore }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DbxPopoverService }, { type: DbxCalendarScheduleSelectionStore }, { type: i0.Injector }]; }, propDecorators: { disabled: [{
+                type: Input
+            }] } });
 
 function dbxScheduleSelectionCalendarBeforeMonthViewRenderFactory(inputModifyFn) {
     const modifyFn = inputModifyFn || (() => { });
@@ -1084,10 +1109,23 @@ class DbxScheduleSelectionCalendarComponent {
     constructor(calendarStore, dbxCalendarScheduleSelectionStore) {
         this.calendarStore = calendarStore;
         this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
+        this._inputReadonly = new BehaviorSubject(undefined);
         this._config = new BehaviorSubject({});
         this._centerRangeSub = new SubscriptionObject();
-        this.showClearSelectionButton$ = this._config.pipe(map((config) => config.showClearSelectionButton ?? true), distinctUntilChanged());
-        this.datePopoverButtonInjectionConfig$ = this._config.pipe(map((x) => x.buttonInjectionConfig), switchMapDbxInjectionComponentConfig(DbxScheduleSelectionCalendarDatePopoverButtonComponent), shareReplay(1));
+        this.readonly$ = this._config.pipe(switchMap((x) => (x.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(this._inputReadonly), map(([configReadonly, inputReadonly]) => {
+            return (configReadonly ?? false) || (inputReadonly ?? false);
+        }), shareReplay(1));
+        this.showButtonsOnReadonly$ = this._config.pipe(map((x) => x.showButtonsOnReadonly ?? false), distinctUntilChanged(), shareReplay(1));
+        this.showButtons$ = this.showButtonsOnReadonly$.pipe(switchMap((x) => {
+            if (x) {
+                return of(true);
+            }
+            else {
+                return this.readonly$.pipe(map((x) => !x));
+            }
+        }), distinctUntilChanged(), shareReplay(1));
+        this.showClearSelectionButton$ = this._config.pipe(map((config) => config.showClearSelectionButton ?? true), combineLatestWith(this.showButtons$), map((x) => reduceBooleansWithAnd(x)), distinctUntilChanged(), shareReplay(1));
+        this.datePopoverButtonInjectionConfig$ = this._config.pipe(map((x) => x.buttonInjectionConfig), switchMapDbxInjectionComponentConfig(DbxScheduleSelectionCalendarDatePopoverButtonComponent), combineLatestWith(this.showButtons$), map(([config, showButton]) => (showButton ? config : undefined)), shareReplay(1));
         this.clickEvent = new EventEmitter();
         // refresh any time the selected day function updates
         this.state$ = this.dbxCalendarScheduleSelectionStore.state$;
@@ -1101,11 +1139,12 @@ class DbxScheduleSelectionCalendarComponent {
             }
             return factory.pipe(map((x) => x(this.state$)));
         }), shareReplay(1));
-        this.refresh$ = combineLatest([this.state$, this.beforeMonthViewRender$]).pipe(throttleTime(100), map(() => undefined));
+        this.refresh$ = combineLatest([this.state$, this.beforeMonthViewRender$]).pipe(throttleTime(20, undefined, { leading: true, trailing: true }), map(() => undefined));
         this.events$ = this.calendarStore.visibleEvents$.pipe(map(prepareAndSortCalendarEvents), shareReplay(1));
         this.viewDate$ = this.calendarStore.date$;
     }
     ngOnInit() {
+        this.dbxCalendarScheduleSelectionStore.setViewReadonlyState(this.readonly$); // sync the readonly state
         this.calendarStore.setNavigationRangeLimit(this.dbxCalendarScheduleSelectionStore.minMaxDateRange$); // set navigation limit to the min/max allowed dates.
         this.calendarStore.setShowPageButtons(true);
         // when a new filter is set, if the first two pages of selectable indexes fit within the calendar month, focus on that calendar month.
@@ -1121,6 +1160,7 @@ class DbxScheduleSelectionCalendarComponent {
         });
     }
     ngOnDestroy() {
+        this._inputReadonly.complete();
         this.clickEvent.complete();
         this._config.complete();
         this._centerRangeSub.destroy();
@@ -1131,8 +1171,15 @@ class DbxScheduleSelectionCalendarComponent {
     set config(config) {
         this._config.next(config ?? {});
     }
+    set readonly(readonly) {
+        this._inputReadonly.next(readonly);
+    }
     dayClicked({ date }) {
-        this.dbxCalendarScheduleSelectionStore.toggleSelectedDates(date);
+        this.readonly$.pipe(first()).subscribe((readonly) => {
+            if (!readonly) {
+                this.dbxCalendarScheduleSelectionStore.toggleSelectedDates(date);
+            }
+        });
     }
     eventClicked(action, event) {
         this.clickEvent.emit({ action, event });
@@ -1144,14 +1191,16 @@ class DbxScheduleSelectionCalendarComponent {
     }
 }
 DbxScheduleSelectionCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }], target: i0.ɵɵFactoryTarget.Component });
-DbxScheduleSelectionCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber':locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i1.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { 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: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ɵCalendarDatePipe, name: "calendarDate" }] });
+DbxScheduleSelectionCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: { config: "config", readonly: "readonly" }, outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"(readonly$ | async) ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonly$ | async\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber':locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n", dependencies: [{ kind: "component", type: i3$1.DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: i1.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { 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: "directive", type: i7$1.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: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "component", type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, selector: "dbx-schedule-selection-calendar-selection-toggle-button", inputs: ["disabled"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.ɵCalendarDatePipe, name: "calendarDate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-schedule-selection-calendar', providers: [DbxCalendarStore], template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber':locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n" }]
+            args: [{ selector: 'dbx-schedule-selection-calendar', providers: [DbxCalendarStore], template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\" [ngClass]=\"(readonly$ | async) ? 'dbx-schedule-selection-calendar-readonly' : ''\">\n  <ng-container controls>\n    <ng-container *ngIf=\"showClearSelectionButton$ | async\">\n      <dbx-schedule-selection-calendar-selection-toggle-button [disabled]=\"readonly$ | async\"></dbx-schedule-selection-calendar-selection-toggle-button>\n      <dbx-button-spacer></dbx-button-spacer>\n    </ng-container>\n    <dbx-injection [config]=\"datePopoverButtonInjectionConfig$ | async\"></dbx-injection>\n  </ng-container>\n  <div class=\"dbx-calendar-content dbx-calendar-content-month\">\n    <mwl-calendar-month-view [refresh]=\"refresh$\" [viewDate]=\"(viewDate$ | async)!\" [events]=\"(events$ | async)!\" (dayClicked)=\"dayClicked($event.day)\" (eventClicked)=\"eventClicked('Clicked', $event.event)\" (beforeViewRender)=\"beforeMonthViewRender($event)\" [cellTemplate]=\"monthDayCellTemplate\"></mwl-calendar-month-view>\n  </div>\n</dbx-calendar-base>\n\n<!-- Cell -->\n<ng-template #monthDayCellTemplate let-day=\"day\" let-locale=\"locale\">\n  <div class=\"cal-cell-top\">\n    <span class=\"cal-day-badge\" *ngIf=\"day.badgeTotal > 0\">{{ day.badgeTotal }}</span>\n    <span class=\"cal-day-number\">{{ day.date | calendarDate: 'monthViewDayNumber':locale }}</span>\n  </div>\n  <dbx-schedule-selection-calendar-cell [day]=\"day\"></dbx-schedule-selection-calendar-cell>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }]; }, propDecorators: { clickEvent: [{
                 type: Output
             }], config: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }] } });
 
 /**
@@ -1199,7 +1248,7 @@ DbxScheduleSelectionCalendarDateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponen
       <dbx-schedule-selection-calendar></dbx-schedule-selection-calendar>
       <dbx-dialog-content-footer [config]="closeConfig" (close)="close()"></dbx-dialog-content-footer>
     </dbx-dialog-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent].dbx-dialog-content", inputs: ["width"] }, { kind: "component", type: i1$1.DbxDialogContentFooterComponent, selector: "dbx-dialog-content-footer", inputs: ["closeText", "buttonColor", "config"], outputs: ["close"] }, { kind: "component", type: i1$1.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: ["config"], outputs: ["clickEvent"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent].dbx-dialog-content", inputs: ["width"] }, { kind: "component", type: i1$1.DbxDialogContentFooterComponent, selector: "dbx-dialog-content-footer", inputs: ["closeText", "buttonColor", "config"], outputs: ["close"] }, { kind: "component", type: i1$1.DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", outputs: ["close"] }, { kind: "component", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", inputs: ["config", "readonly"], outputs: ["clickEvent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateDialogComponent, decorators: [{
             type: Component,
             args: [{