@dereekb/dbx-form 9.23.11 → 9.23.12

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

@@ -3,10 +3,10 @@ import { formlyField, propsAndConfigForFieldConfig, flexLayoutWrapper, toggleFie
 import * as i0 from '@angular/core';
 import { Injectable, SkipSelf, Directive, Injector, Optional, Component, Inject, Input, ElementRef, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
-import { map, distinctUntilChanged, shareReplay, BehaviorSubject, switchMap, of, startWith, filter, throttleTime, first } from 'rxjs';
+import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, BehaviorSubject, of, startWith, filter, throttleTime } from 'rxjs';
 import { filterMaybe, SubscriptionObject, asObservable } from '@dereekb/rxjs';
 import { DateScheduleDayCode, expandDateScheduleDayCodesToDayOfWeekSet, dateTimingRelativeIndexFactory, dateBlockDayOfWeekFactory, findMaxDate, findMinDate, isSameDate, isSameDateRange, isSameDateScheduleRange, isSameDateDay, dateTimingRelativeIndexArrayFactory, copyDateScheduleDateFilterConfig, dateScheduleDateFilter, expandDateScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateBlockRangeFunction, dateScheduleEncodedWeek, dateBlockTimingDateFactory, enabledDaysFromDateScheduleDayCodes, dateScheduleDayCodesFromEnabledDays, formatToMonthDayString } from '@dereekb/date';
-import { setsAreEquivalent, unique, mergeArrays, range, iterableToArray, toggleInSet, addToSet, isIndexNumberInIndexRangeFunction, minAndMaxNumber, randomNumberFactory, getDaysOfWeekNames } from '@dereekb/util';
+import { setsAreEquivalent, unique, mergeArrays, iterableToArray, toggleInSet, addToSet, isIndexNumberInIndexRangeFunction, range, minAndMaxNumber, randomNumberFactory, getDaysOfWeekNames } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { startOfDay } from 'date-fns';
 import * as i1$1 from '@dereekb/dbx-web';
@@ -21,7 +21,7 @@ import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i7 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4$1 from 'angular-calendar';
+import * as i5$1 from 'angular-calendar';
 import { CalendarModule, CalendarDayModule, CalendarWeekModule } from 'angular-calendar';
 import * as i3$2 from '@dereekb/dbx-core';
 import * as i3$3 from '@angular/material/icon';
@@ -80,9 +80,9 @@ const defaultCalendarScheduleSelectionCellContentFactory = (day) => {
 };
 
 function initialCalendarScheduleSelectionState() {
-    const start = startOfDay(new Date());
     const scheduleDays = new Set([DateScheduleDayCode.WEEKDAY, DateScheduleDayCode.WEEKEND]);
     const allowedDaysOfWeek = expandDateScheduleDayCodesToDayOfWeekSet(Array.from(scheduleDays));
+    const start = startOfDay(new Date());
     const indexFactory = dateTimingRelativeIndexFactory({ start });
     const indexDayOfWeek = dateBlockDayOfWeekFactory(start);
     return {
@@ -117,8 +117,15 @@ function calendarScheduleMinAndMaxDate(x) {
 class DbxCalendarScheduleSelectionStore extends ComponentStore {
     constructor() {
         super(initialCalendarScheduleSelectionState());
+        // MARK:
+        this.toggleSelection = this.effect((input) => {
+            return input.pipe(switchMap(() => this.nextToggleSelection$.pipe(first(), filterMaybe(), tap((x) => {
+                this.selectAllDates(x);
+            }))));
+        });
         // MARK: Accessors
         this.filter$ = this.state$.pipe(map((x) => x.filter), distinctUntilChanged(), shareReplay(1));
+        this.hasConfiguredMinMaxRange$ = this.state$.pipe(map((x) => Boolean(x.minDate && x.maxDate) || Boolean(x.filter && x.filter.start && x.filter.end)), distinctUntilChanged(), shareReplay(1));
         this.inputStart$ = this.state$.pipe(map((x) => x.inputStart), distinctUntilChanged(isSameDate), shareReplay(1));
         this.inputEnd$ = this.state$.pipe(map((x) => x.inputEnd), distinctUntilChanged(isSameDate), shareReplay(1));
         this.currentInputRange$ = this.state$.pipe(map(({ inputStart, inputEnd }) => ({ inputStart, inputEnd })), distinctUntilChanged((a, b) => isSameDate(a.inputStart, b.inputStart) && isSameDate(a.inputEnd, b.inputEnd)), map((x) => {
@@ -139,6 +146,16 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.dateRange$ = this.currentDateRange$.pipe(filterMaybe(), shareReplay(1));
         this.scheduleDays$ = this.state$.pipe(map((x) => x.scheduleDays), distinctUntilChanged(setsAreEquivalent), shareReplay(1));
         this.currentSelectionValue$ = this.state$.pipe(map((x) => x.currentSelectionValue), shareReplay(1));
+        this.nextToggleSelection$ = this.hasConfiguredMinMaxRange$.pipe(switchMap((hasConfiguredMinMaxRange) => {
+            let obs;
+            if (hasConfiguredMinMaxRange) {
+                obs = this.currentSelectionValue$.pipe(map((x) => (Boolean(x) ? 'none' : 'all')));
+            }
+            else {
+                obs = this.currentSelectionValue$.pipe(map((x) => (Boolean(x) ? 'none' : undefined)));
+            }
+            return obs;
+        }), shareReplay(1));
         this.selectionValue$ = this.currentSelectionValue$.pipe(filterMaybe(), shareReplay(1));
         this.currentDateScheduleRangeValue$ = this.currentSelectionValue$.pipe(map((x) => x === null || x === void 0 ? void 0 : x.dateScheduleRange), distinctUntilChanged(isSameDateScheduleRange), shareReplay(1));
         this.dateScheduleRangeValue$ = this.currentDateScheduleRangeValue$.pipe(filterMaybe(), shareReplay(1));
@@ -218,6 +235,13 @@ function updateStateWithFilter(state, inputFilter) {
         isEnabledFilterDay = dateScheduleDateFilter(enabledFilter);
     }
     state = Object.assign(Object.assign({}, state), { filter, isEnabledFilterDay });
+    // If the input filter has a start date, use that as the relative start to ensure indexes are compared the same.
+    if (filter && filter.start) {
+        const start = filter.start;
+        state.start = start;
+        state.indexFactory = dateTimingRelativeIndexFactory({ start });
+        state.indexDayOfWeek = dateBlockDayOfWeekFactory(start);
+    }
     // attempt to re-apply the initial selection state once filter is applied
     if (state.initialSelectionState) {
         state = updateStateWithInitialSelectionState(state, state.initialSelectionState);
@@ -259,8 +283,10 @@ function updateStateWithChangedScheduleDays(state, change) {
 }
 function updateStateWithChangedDates(state, change) {
     var _a;
-    const { indexFactory, allowedDaysOfWeek, indexDayOfWeek } = state;
+    const { indexFactory, allowedDaysOfWeek, indexDayOfWeek, inputStart: currentInputStart, inputEnd: currentInputEnd } = state;
     const { minDate, maxDate } = calendarScheduleMinAndMaxDate(state);
+    let inputStart = currentInputStart;
+    let inputEnd = currentInputEnd;
     let selectedIndexes;
     if (change.reset || change.selectAll != null || change.set) {
         let set = (_a = change.set) !== null && _a !== void 0 ? _a : [];
@@ -268,12 +294,14 @@ function updateStateWithChangedDates(state, change) {
         switch (selectAll) {
             case 'all':
                 if (minDate != null && maxDate != null) {
-                    const minIndex = indexFactory(minDate);
-                    const maxIndex = indexFactory(maxDate);
-                    set = range(minIndex, maxIndex);
+                    inputStart = minDate;
+                    inputEnd = maxDate;
+                    set = [];
                 }
                 break;
             case 'none':
+                inputStart = null;
+                inputEnd = null;
                 set = [];
                 break;
         }
@@ -294,7 +322,7 @@ function updateStateWithChangedDates(state, change) {
             addToSet(selectedIndexes, iterableToArray(change.remove).map(indexFactory));
         }
     }
-    const nextState = Object.assign(Object.assign({}, state), { selectedIndexes });
+    const nextState = Object.assign(Object.assign({}, state), { inputStart, inputEnd, selectedIndexes });
     nextState.isEnabledDay = isEnabledDayInCalendarScheduleSelectionState(nextState);
     // Recalculate the range and simplified to exclusions
     const rangeAndExclusion = computeScheduleSelectionRangeAndExclusion(nextState);
@@ -310,7 +338,7 @@ function noSelectionCalendarScheduleSelectionState(state) {
     return finalizeNewCalendarScheduleSelectionState(Object.assign(Object.assign({}, state), { selectedIndexes: new Set(), inputStart: null, inputEnd: null }));
 }
 function updateStateWithChangedRange(state, change) {
-    const { inputStart: currentInputStart, inputEnd: currentInputEnd, indexFactory, minDate, maxDate, filter, computeSelectionResultRelativeToFilter } = state;
+    const { inputStart: currentInputStart, inputEnd: currentInputEnd, indexFactory, minDate, maxDate } = state;
     let inputStart = startOfDay(change.inputStart);
     let inputEnd = startOfDay(change.inputEnd);
     const isValidRange = minDate != null || maxDate != null ? isDateInDateRangeFunction({ start: minDate !== null && minDate !== void 0 ? minDate : undefined, end: maxDate !== null && maxDate !== void 0 ? maxDate : undefined }) : () => true;
@@ -318,12 +346,13 @@ function updateStateWithChangedRange(state, change) {
         return state; // if no change, return the current state.
     }
     // retain all indexes that are within the new range
-    const minIndex = computeSelectionResultRelativeToFilter && (filter === null || filter === void 0 ? void 0 : filter.start) ? indexFactory(filter === null || filter === void 0 ? void 0 : filter.start) : indexFactory(inputStart);
+    const minIndex = indexFactory(inputStart);
     const maxIndex = indexFactory(inputEnd) + 1;
     const currentIndexes = Array.from(state.selectedIndexes);
     const isInCurrentRange = isIndexNumberInIndexRangeFunction({ minIndex, maxIndex });
     const excludedIndexesInNewRange = currentIndexes.filter(isInCurrentRange);
-    const nextState = Object.assign(Object.assign({}, state), { excludedIndexesInNewRange, inputStart, inputEnd });
+    const selectedIndexes = new Set(excludedIndexesInNewRange);
+    const nextState = Object.assign(Object.assign({}, state), { selectedIndexes, inputStart, inputEnd });
     return finalizeNewCalendarScheduleSelectionState(nextState);
 }
 function finalizeNewCalendarScheduleSelectionState(nextState) {
@@ -577,10 +606,10 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
     }
 }
 DbxScheduleSelectionCalendarDateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, deps: [{ token: i1.DbxCalendarStore }, { token: DbxCalendarScheduleSelectionStore }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: "required", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize" }, ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n    <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n  </div>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\n  <div *ngIf=\"showCustomize\">\n    <dbx-button-spacer></dbx-button-spacer>\n    <ng-content select=\"[customizeButton]\"></ng-content>\n  </div>\n  <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</mat-error>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
+DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { required: "required", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize" }, ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n    <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n  </div>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\n  <div *ngIf=\"showCustomize\">\n    <dbx-button-spacer></dbx-button-spacer>\n    <ng-content select=\"[customizeButton]\"></ng-content>\n  </div>\n  <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i7.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i7.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-schedule-selection-calendar-date-range', template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n    <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n  </div>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\n  <div *ngIf=\"showCustomize\">\n    <dbx-button-spacer></dbx-button-spacer>\n    <ng-content select=\"[customizeButton]\"></ng-content>\n  </div>\n  <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</mat-error>\n</mat-form-field>\n" }]
+            args: [{ selector: 'dbx-schedule-selection-calendar-date-range', template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <div *ngIf=\"showCustomize && (isCustomized$ | async)\" class=\"date-range-field-customized\">\n    <span class=\"dbx-accent-bg date-range-field-customized-text\">Custom</span>\n  </div>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <dbx-button-spacer></dbx-button-spacer>\n  <mat-date-range-input [required]=\"required\" [min]=\"minDate$ | async\" [max]=\"maxDate$ | async\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n    <input matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n    <input matEndDate formControlName=\"end\" placeholder=\"End date\" />\n  </mat-date-range-input>\n  <div *ngIf=\"showCustomize\">\n    <dbx-button-spacer></dbx-button-spacer>\n    <ng-content select=\"[customizeButton]\"></ng-content>\n  </div>\n  <mat-date-range-picker #picker (opened)=\"pickerOpened()\" (closed)=\"pickerClosed()\"></mat-date-range-picker>\n  <mat-error *ngIf=\"range.controls.start.hasError('matStartDateInvalid')\">Invalid start date</mat-error>\n  <mat-error *ngIf=\"range.controls.end.hasError('matEndDateInvalid')\">Invalid end date</mat-error>\n  <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n" }]
         }], ctorParameters: function () {
         return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }, { type: undefined, decorators: [{
                         type: Inject,
@@ -794,6 +823,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Toggle button for selecting and clearing the current selection.
+ */
+class DbxScheduleSelectionCalendarSelectionToggleButtonComponent {
+    constructor(popoverService, dbxCalendarScheduleSelectionStore, injector) {
+        this.popoverService = popoverService;
+        this.dbxCalendarScheduleSelectionStore = dbxCalendarScheduleSelectionStore;
+        this.injector = injector;
+        this.disableButton$ = this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => !x));
+        this.buttonDisplay$ = this.dbxCalendarScheduleSelectionStore.nextToggleSelection$.pipe(map((x) => {
+            let buttonDisplay;
+            switch (x) {
+                case 'all':
+                    buttonDisplay = {
+                        icon: 'select_all',
+                        text: 'Select All'
+                    };
+                    break;
+                default:
+                case 'none':
+                    buttonDisplay = {
+                        icon: 'clear',
+                        text: 'Clear Selection'
+                    };
+                    break;
+            }
+            return buttonDisplay;
+        }), shareReplay(1));
+    }
+    toggleSelection() {
+        this.dbxCalendarScheduleSelectionStore.toggleSelection();
+    }
+}
+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: `
+    <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: i3$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarSelectionToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dbx-schedule-selection-calendar-selection-toggle-button',
+                    template: `
+    <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 }]; } });
+
 class DbxScheduleSelectionCalendarComponent {
     constructor(calendarStore, dbxCalendarScheduleSelectionStore) {
         this.calendarStore = calendarStore;
@@ -847,10 +923,10 @@ 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", outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\">\n  <ng-container controls>\n    <dbx-schedule-selection-calendar-date-popover-button></dbx-schedule-selection-calendar-date-popover-button>\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: i1.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: DbxScheduleSelectionCalendarDatePopoverButtonComponent, selector: "dbx-schedule-selection-calendar-date-popover-button" }, { kind: "component", type: DbxScheduleSelectionCalendarCellComponent, selector: "dbx-schedule-selection-calendar-cell", inputs: ["day"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.ɵCalendarDatePipe, name: "calendarDate" }] });
+DbxScheduleSelectionCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarComponent, selector: "dbx-schedule-selection-calendar", outputs: { clickEvent: "clickEvent" }, providers: [DbxCalendarStore], ngImport: i0, template: "<dbx-calendar-base class=\"dbx-schedule-selection-calendar\">\n  <ng-container controls>\n    <dbx-schedule-selection-calendar-selection-toggle-button></dbx-schedule-selection-calendar-selection-toggle-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-schedule-selection-calendar-date-popover-button></dbx-schedule-selection-calendar-date-popover-button>\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: i1.DbxCalendarBaseComponent, selector: "dbx-calendar-base" }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i5$1.CalendarMonthViewComponent, selector: "mwl-calendar-month-view", inputs: ["viewDate", "events", "excludeDays", "activeDayIsOpen", "activeDay", "refresh", "locale", "tooltipPlacement", "tooltipTemplate", "tooltipAppendToBody", "tooltipDelay", "weekStartsOn", "headerTemplate", "cellTemplate", "openDayEventsTemplate", "eventTitleTemplate", "eventActionsTemplate", "weekendDays"], outputs: ["beforeViewRender", "dayClicked", "eventClicked", "columnHeaderClicked", "eventTimesChanged"] }, { kind: "component", type: DbxScheduleSelectionCalendarDatePopoverButtonComponent, selector: "dbx-schedule-selection-calendar-date-popover-button" }, { 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: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.ɵ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    <dbx-schedule-selection-calendar-date-popover-button></dbx-schedule-selection-calendar-date-popover-button>\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\">\n  <ng-container controls>\n    <dbx-schedule-selection-calendar-selection-toggle-button></dbx-schedule-selection-calendar-selection-toggle-button>\n    <dbx-button-spacer></dbx-button-spacer>\n    <dbx-schedule-selection-calendar-date-popover-button></dbx-schedule-selection-calendar-date-popover-button>\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
             }] } });
@@ -1028,7 +1104,8 @@ const declarations = [
     DbxScheduleSelectionCalendarDatePopoverContentComponent,
     DbxCalendarScheduleSelectionStoreInjectionBlockDirective,
     DbxScheduleSelectionCalendarDateDialogComponent,
-    DbxScheduleSelectionCalendarDateDialogButtonComponent
+    DbxScheduleSelectionCalendarDateDialogButtonComponent,
+    DbxScheduleSelectionCalendarSelectionToggleButtonComponent
 ];
 class DbxFormCalendarModule {
 }
@@ -1045,7 +1122,8 @@ DbxFormCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         DbxScheduleSelectionCalendarDatePopoverContentComponent,
         DbxCalendarScheduleSelectionStoreInjectionBlockDirective,
         DbxScheduleSelectionCalendarDateDialogComponent,
-        DbxScheduleSelectionCalendarDateDialogButtonComponent
+        DbxScheduleSelectionCalendarDateDialogButtonComponent,
+        DbxScheduleSelectionCalendarSelectionToggleButtonComponent
     ], imports: [
         //
         DbxActionModule,
@@ -1079,7 +1157,8 @@ DbxFormCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         DbxScheduleSelectionCalendarDatePopoverContentComponent,
         DbxCalendarScheduleSelectionStoreInjectionBlockDirective,
         DbxScheduleSelectionCalendarDateDialogComponent,
-        DbxScheduleSelectionCalendarDateDialogButtonComponent
+        DbxScheduleSelectionCalendarDateDialogButtonComponent,
+        DbxScheduleSelectionCalendarSelectionToggleButtonComponent
     ] });
 DbxFormCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxFormCalendarModule, imports: [
         //
@@ -1181,5 +1260,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarScheduleSelectionDayState, DEFAULT_SCHEDULE_SELECTION_CALENDAR_DATE_POPOVER_KEY, DbxCalendarScheduleSelectionStore, DbxCalendarScheduleSelectionStoreInjectionBlockDirective, DbxCalendarScheduleSelectionStoreProviderBlock, DbxFormCalendarDateScheduleRangeFieldComponent, DbxFormCalendarModule, DbxFormDateScheduleRangeFieldModule, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarComponent, DbxScheduleSelectionCalendarDateDaysComponent, DbxScheduleSelectionCalendarDateDaysFormComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent, DbxScheduleSelectionCalendarDateDialogComponent, DbxScheduleSelectionCalendarDatePopoverButtonComponent, DbxScheduleSelectionCalendarDatePopoverComponent, DbxScheduleSelectionCalendarDatePopoverContentComponent, DbxScheduleSelectionCalendarDateRangeComponent, calendarScheduleMaxDate, calendarScheduleMinAndMaxDate, calendarScheduleMinDate, computeCalendarScheduleSelectionDateBlockRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState };
+export { CalendarScheduleSelectionDayState, DEFAULT_SCHEDULE_SELECTION_CALENDAR_DATE_POPOVER_KEY, DbxCalendarScheduleSelectionStore, DbxCalendarScheduleSelectionStoreInjectionBlockDirective, DbxCalendarScheduleSelectionStoreProviderBlock, DbxFormCalendarDateScheduleRangeFieldComponent, DbxFormCalendarModule, DbxFormDateScheduleRangeFieldModule, DbxScheduleSelectionCalendarCellComponent, DbxScheduleSelectionCalendarComponent, DbxScheduleSelectionCalendarDateDaysComponent, DbxScheduleSelectionCalendarDateDaysFormComponent, DbxScheduleSelectionCalendarDateDialogButtonComponent, DbxScheduleSelectionCalendarDateDialogComponent, DbxScheduleSelectionCalendarDatePopoverButtonComponent, DbxScheduleSelectionCalendarDatePopoverComponent, DbxScheduleSelectionCalendarDatePopoverContentComponent, DbxScheduleSelectionCalendarDateRangeComponent, DbxScheduleSelectionCalendarSelectionToggleButtonComponent, calendarScheduleMaxDate, calendarScheduleMinAndMaxDate, calendarScheduleMinDate, computeCalendarScheduleSelectionDateBlockRange, computeCalendarScheduleSelectionRange, computeScheduleSelectionRangeAndExclusion, computeScheduleSelectionValue, dateScheduleRangeField, dbxScheduleSelectionCalendarDateDaysFormDayFields, dbxScheduleSelectionCalendarDateDaysFormFields, defaultCalendarScheduleSelectionCellContentFactory, finalizeNewCalendarScheduleSelectionState, initialCalendarScheduleSelectionState, isEnabledDayInCalendarScheduleSelectionState, noSelectionCalendarScheduleSelectionState, provideCalendarScheduleSelectionStoreIfParentIsUnavailable, updateStateWithChangedDates, updateStateWithChangedRange, updateStateWithChangedScheduleDays, updateStateWithComputeSelectionResultRelativeToFilter, updateStateWithDateScheduleRangeValue, updateStateWithExclusions, updateStateWithFilter, updateStateWithInitialSelectionState };
 //# sourceMappingURL=dereekb-dbx-form-calendar.mjs.map