@dereekb/dbx-form 9.25.1 → 9.25.3

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

@@ -5,9 +5,9 @@ import { AbstractPopoverDirective, AbstractDialogDirective, sanitizeDbxDialogCon
 import * as i0 from '@angular/core';
 import { Injectable, SkipSelf, Directive, Injector, Optional, Component, Inject, Input, ViewChild, ElementRef, ChangeDetectionStrategy, EventEmitter, Output, InjectionToken, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
-import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, combineLatest, startWith, throttleTime } from 'rxjs';
+import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, combineLatest, EMPTY, startWith, throttleTime } from 'rxjs';
 import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
-import { DateCellScheduleDayCode, expandDateCellScheduleDayCodesToDayOfWeekSet, dateCellTimingStartsAtForStartOfDay, dateCellTimingRelativeIndexFactory, dateCellDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, dateCellTimingDateFactory, expandDateCellScheduleRange, formatToISO8601DayString, isSameDateCellScheduleDateRange, dateCellTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateCellScheduleDateFilterConfig, dateCellScheduleDateFilter, dateTimezoneUtcNormal, fullDateCellScheduleRange, expandDateCellScheduleDayCodes, fullWeekDateCellScheduleDayCodes, dateCellScheduleDayCodesAreSetsEquivalent, simplifyDateCellScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateCellRangeFunction, copyHoursAndMinutesFromDate, dateCellScheduleEncodedWeek, dateCellTimingStartDateFactory, enabledDaysFromDateCellScheduleDayCodes, dateCellScheduleDayCodesFromEnabledDays, formatToMonthDayString, dateRange, DateRangeType } from '@dereekb/date';
+import { DateCellScheduleDayCode, expandDateCellScheduleDayCodesToDayOfWeekSet, dateCellTimingStartsAtForStartOfDay, dateCellTimingRelativeIndexFactory, dateCellDayOfWeekFactory, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, dateCellTimingDateFactory, expandDateCellScheduleRange, formatToISO8601DayString, changeDateCellScheduleDateRangeToTimezone, isSameDateCellScheduleDateRange, dateCellTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateCellScheduleDateFilterConfig, dateTimezoneUtcNormal, dateCellScheduleDateFilter, fullDateCellScheduleRange, dateCellTimingTimezoneNormalInstance, expandDateCellScheduleDayCodes, fullWeekDateCellScheduleDayCodes, dateCellScheduleDayCodesAreSetsEquivalent, simplifyDateCellScheduleDayCodes, isDateInDateRangeFunction, isDateWithinDateCellRangeFunction, dateCellScheduleEncodedWeek, dateCellTimingStartDateFactory, enabledDaysFromDateCellScheduleDayCodes, dateCellScheduleDayCodesFromEnabledDays, formatToMonthDayString, dateRange, DateRangeType } from '@dereekb/date';
 import { isInAllowedDaysOfWeekSet, mapValuesToSet, 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';
@@ -37,7 +37,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 function dateScheduleRangeField(config = {}) {
-    const { key = 'schedule', appearance, hideCustomize, allowTextInput, filter, timezone, initialSelectionState, computeSelectionResultRelativeToFilter, exclusions, defaultScheduleDays, minMaxDateRange, cellContentFactory, dialogContentConfig, customDetailsConfig } = config;
+    const { key = 'schedule', appearance, hideCustomize, allowTextInput, filter, outputTimezone, timezone, initialSelectionState, computeSelectionResultRelativeToFilter, exclusions, defaultScheduleDays, minMaxDateRange, cellContentFactory, dialogContentConfig, customDetailsConfig } = config;
     const fieldConfig = {
         ...formlyField({
             key,
@@ -47,6 +47,7 @@ function dateScheduleRangeField(config = {}) {
                 allowTextInput,
                 appearance,
                 hideCustomize,
+                outputTimezone,
                 timezone,
                 defaultScheduleDays,
                 minMaxDateRange,
@@ -128,7 +129,7 @@ function calendarScheduleMinAndMaxDateRange(x) {
     };
 }
 function calendarScheduleStartBeingUsedFromFilter(x) {
-    return x.computeSelectionResultRelativeToFilter && x.filter?.start != null;
+    return x.computeSelectionResultRelativeToFilter && x.filter?.start != null; // may be using either
 }
 class DbxCalendarScheduleSelectionStore extends ComponentStore {
     constructor() {
@@ -147,7 +148,7 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.hasConfiguredMinMaxRange$ = this.minMaxDateRange$.pipe(map((x) => x != null && x.start != null && x.end != null), 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) => {
+        this.currentInputRange$ = this.state$.pipe(map(({ inputStart, inputEnd }) => ({ start: inputStart, end: inputEnd })), distinctUntilChanged((a, b) => isSameDateRange(a, b)), map((x) => ({ inputStart: x.start, inputEnd: x.end })), map((x) => {
             if (x.inputStart && x.inputEnd) {
                 return x;
             }
@@ -172,9 +173,19 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.isInAllowedDaysOfWeekFunction$ = this.allowedDaysOfWeek$.pipe(map((x) => isInAllowedDaysOfWeekSet(x)), shareReplay(1));
         this.scheduleDays$ = this.state$.pipe(map((x) => x.effectiveScheduleDays), distinctUntilHasDifferentValues(), shareReplay(1));
         this.outputTimezone$ = this.state$.pipe(map((x) => x.outputTimezone), distinctUntilChanged(), shareReplay(1));
-        this.effectiveOutputTimezone$ = this.state$.pipe(map((x) => (!calendarScheduleStartBeingUsedFromFilter(x) && x.outputTimezone ? x.outputTimezone : undefined)), distinctUntilChanged(), shareReplay(1));
-        this.effectiveOutputTimezoneNormal$ = this.state$.pipe(map((x) => (!calendarScheduleStartBeingUsedFromFilter(x) && x.outputTimezoneNormal ? x.outputTimezoneNormal : undefined)), distinctUntilChanged(), shareReplay(1));
-        this.currentSelectionValue$ = this.state$.pipe(map((x) => x.currentSelectionValue), shareReplay(1));
+        /**
+         * The timezone of the output values.
+         *
+         * If an outputTimezone is not specified, this defaults to the system timezone.
+         */
+        this.effectiveOutputTimezone$ = this.state$.pipe(map((x) => x.outputTimezone || x.systemTimezone), distinctUntilChanged(), shareReplay(1));
+        /**
+         * An outputTimezoneNormal to use.
+         *
+         * If an outputTimezone is not specified, this is undefined.
+         */
+        this.effectiveOutputTimezoneNormal$ = this.state$.pipe(map((x) => (x.outputTimezoneNormal ? x.outputTimezoneNormal : undefined)), distinctUntilChanged(), shareReplay(1));
+        this.currentSelectionValue$ = this.state$.pipe(map((x) => x.currentSelectionValue), distinctUntilChanged(), shareReplay(1));
         this.currentSelectionValueStart$ = this.currentSelectionValue$.pipe(map((x) => x?.dateScheduleRange.start), distinctUntilChanged(isSameDate), shareReplay(1));
         this.currentSelectionValueDateCellTimingDateFactory$ = this.currentSelectionValue$.pipe(map((x) => (x ? dateCellTimingDateFactory({ startsAt: x.dateScheduleRange.start, timezone: x.dateScheduleRange.timezone }) : undefined)), shareReplay(1));
         this.currentSelectionValueDateCellDurationSpanExpansion$ = this.currentSelectionValue$.pipe(map((x) => (x ? expandDateCellScheduleRange({ dateCellScheduleRange: x.dateScheduleRange }) : [])), shareReplay(1));
@@ -184,16 +195,14 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         }), shareReplay(1));
         this.selectionValue$ = this.currentSelectionValue$.pipe(filterMaybe(), shareReplay(1));
         this.currentSelectionValueWithTimezone$ = this.currentSelectionValue$.pipe(combineLatestWith(this.effectiveOutputTimezoneNormal$), map(([x, timezoneNormal]) => {
+            let currentValueWithTimezone = x;
             if (x && timezoneNormal) {
-                x = {
-                    dateScheduleRange: {
-                        ...x.dateScheduleRange,
-                        start: timezoneNormal.targetDateToSystemDate(x.dateScheduleRange.start),
-                        end: timezoneNormal.targetDateToSystemDate(x.dateScheduleRange.end)
-                    }
+                currentValueWithTimezone = {
+                    dateScheduleRange: changeDateCellScheduleDateRangeToTimezone(x.dateScheduleRange, timezoneNormal),
+                    minMaxRange: x.minMaxRange
                 };
             }
-            return x;
+            return currentValueWithTimezone;
         }), distinctUntilChanged(), shareReplay(1));
         this.selectionValueWithTimezone$ = this.currentSelectionValueWithTimezone$.pipe(filterMaybe(), shareReplay(1));
         this.selectionValueWithTimezoneDateCellDurationSpanExpansion$ = this.selectionValueWithTimezone$.pipe(map((x) => expandDateCellScheduleRange({ dateCellScheduleRange: x.dateScheduleRange })), shareReplay(1));
@@ -220,6 +229,9 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
         this.setComputeSelectionResultRelativeToFilter = this.updater(updateStateWithComputeSelectionResultRelativeToFilter);
         this.clearFilter = this.updater((state) => updateStateWithFilter(state, undefined));
         this.setOutputTimezone = this.updater(updateStateWithTimezoneValue);
+        /**
+         * Sets the "input" date range. This is the range that gets displayed on the date range picker.
+         */
         this.setInputRange = this.updater(updateStateWithChangedRange);
         // NOTE: Selected dates are NOT selected indexes. They are the internal selected dates that are excluded from the selection.
         this.toggleSelectedDates = this.updater((state, toggle) => updateStateWithChangedDates(state, { toggle }));
@@ -317,8 +329,25 @@ function updateStateWithFilter(state, inputFilter) {
     // create the filter using inputFilter, exclusions, and minMaxDateRange
     if (inputFilter || exclusions?.length || minMaxDateRange) {
         let enabledFilter;
+        let filterStart = null; // the start date that will be used/set on the filter.
         if (inputFilter) {
             filter = copyDateCellScheduleDateFilterConfig(inputFilter); // copy filter
+            // configure filter start
+            if (inputFilter.start) {
+                filterStart = inputFilter.start;
+            }
+            else if (inputFilter.startsAt) {
+                if (inputFilter.timezone) {
+                    const timezoneNormal = dateTimezoneUtcNormal(inputFilter.timezone);
+                    filterStart = timezoneNormal.startOfDayInTargetTimezone(inputFilter.startsAt);
+                }
+                else {
+                    filterStart = inputFilter.startsAt;
+                    filter.timezone = systemTimezone;
+                }
+            }
+            filter.start = filterStart ?? undefined;
+            // configure exclusions
             if (exclusions?.length) {
                 enabledFilter = {
                     ...filter,
@@ -337,13 +366,13 @@ function updateStateWithFilter(state, inputFilter) {
         }
         if (minMaxDateRange) {
             enabledFilter.minMaxDateRange = minMaxDateRange;
-            enabledFilter.setStartAsMinDate = filter?.start ? true : false; // If a start date is set, then it becomes the floor.
+            enabledFilter.setStartAsMinDate = filterStart ? true : false; // If a start date is set, then it becomes the floor.
         }
         /**
          * If the input filter has a start date, use that as the relative start to ensure indexes are compared the same,
          * otherwise use the state's start. This is important for the index calculations.
          */
-        enabledFilter.start = inputFilter?.start ?? state.start;
+        enabledFilter.start = filter?.start ?? state.start;
         // create the filter
         isEnabledFilterDay = dateCellScheduleDateFilter(enabledFilter);
     }
@@ -386,24 +415,30 @@ function updateStateWithTimezoneValue(state, timezone) {
     }
 }
 function updateStateWithDateCellScheduleRangeValue(state, inputChange) {
-    const { outputTimezoneNormal: timezoneNormal, currentSelectionValue } = state;
+    const { currentSelectionValue, systemTimezone } = state;
     const currentDateCellScheduleRange = currentSelectionValue?.dateScheduleRange; // current range is always in system time
     let change;
-    if (!calendarScheduleStartBeingUsedFromFilter(state) && timezoneNormal) {
-        // When using timezones, always return from the start of the day. Inputs are converted to the system time and used as the start of the day.
-        // Outputs remain accurate.
-        if (inputChange) {
-            // calculate the schedule range
-            const fullChange = fullDateCellScheduleRange({ dateCellScheduleRange: inputChange });
-            // convert the start/end to system time
-            change = {
-                start: startOfDay(timezoneNormal.systemDateToTargetDate(fullChange.start)),
-                end: startOfDay(timezoneNormal.systemDateToTargetDate(fullChange.end)),
-                w: fullChange.w,
-                ex: fullChange.ex,
-                timezone: fullChange.timezone
-            };
-        }
+    // When using timezones, always return from the start of the day. Inputs are converted to the system time and used as the start of the day.
+    // Outputs remain accurate.
+    if (inputChange) {
+        // make sure a timezone is set. Input may not have a timezone attached. Default to system time.
+        const inputChangeWithTimezoneSet = {
+            ...inputChange,
+            timezone: inputChange.timezone ?? systemTimezone
+        };
+        // calculate the schedule range
+        const fullChange = fullDateCellScheduleRange({ dateCellScheduleRange: inputChangeWithTimezoneSet });
+        const inputNormal = dateCellTimingTimezoneNormalInstance(fullChange);
+        const startInSystemTz = inputNormal.systemDateToTargetDate(fullChange.start);
+        const endInSystemTz = startOfDay(inputNormal.systemDateToTargetDate(fullChange.end));
+        // convert the start/end to system time
+        change = {
+            start: startInSystemTz,
+            end: endInSystemTz,
+            w: fullChange.w,
+            ex: fullChange.ex,
+            timezone: fullChange.timezone
+        };
     }
     const isSameValue = isSameDateCellScheduleDateRange(currentDateCellScheduleRange, change);
     if (isSameValue) {
@@ -558,7 +593,7 @@ function updateStateWithChangedRange(state, change) {
     const { inputStart: currentInputStart, inputEnd: currentInputEnd, indexFactory, minMaxDateRange } = state;
     const { start: minDate, end: maxDate } = minMaxDateRange ?? {};
     const inputStart = startOfDay(change.inputStart);
-    const inputEnd = endOfDay(change.inputEnd);
+    const inputEnd = startOfDay(change.inputEnd); // midnight of the last day
     const isValidRange = minDate != null || maxDate != null ? isDateInDateRangeFunction({ start: minDate ?? undefined, end: maxDate ?? undefined }) : () => true;
     if (!isValidRange(inputStart) || !isValidRange(inputEnd) || (isSameDateDay(inputStart, currentInputStart) && isSameDateDay(inputEnd, currentInputEnd))) {
         return state; // if no change, return the current state.
@@ -599,6 +634,7 @@ function isEnabledDayInCalendarScheduleSelectionState(state) {
 }
 function computeScheduleSelectionValue(state) {
     const { indexFactory, allowedDaysOfWeek, effectiveScheduleDays, indexDayOfWeek, computeSelectionResultRelativeToFilter, filter, systemTimezone } = state;
+    let timezone = systemTimezone;
     const rangeAndExclusion = computeScheduleSelectionRangeAndExclusion(state);
     if (rangeAndExclusion == null) {
         return null;
@@ -610,9 +646,11 @@ function computeScheduleSelectionValue(state) {
     let end = rangeEnd;
     // If computeSelectionResultRelativeToFilter is true, then we need to offset the values to be relative to that start.
     if (computeSelectionResultRelativeToFilter && filter?.start) {
-        start = filter.start;
-        if (filter?.end) {
-            end = copyHoursAndMinutesFromDate(end, filter.end);
+        start = filter.start; // always start at the filter's start date
+        if (filter.timezone) {
+            timezone = filter.timezone;
+            const filterNormal = dateTimezoneUtcNormal(timezone);
+            end = filterNormal.startOfDayInTargetTimezone(end);
         }
         const filterStartIndexOffset = indexFactory(rangeStart) - indexFactory(start);
         filterOffsetExcludedRange = range(0, filterStartIndexOffset);
@@ -633,7 +671,7 @@ function computeScheduleSelectionValue(state) {
         end = start; // end is start
     }
     const dateScheduleRange = {
-        timezone: systemTimezone,
+        timezone,
         start,
         end,
         w,
@@ -772,7 +810,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
         this.matFormFieldDefaultOptions = matFormFieldDefaultOptions;
         this._required = new BehaviorSubject(false);
         this.required$ = this._required.asObservable();
-        this.timezone$ = this.dbxCalendarScheduleSelectionStore.currentTimezone$;
+        this.timezone$ = this.dbxCalendarScheduleSelectionStore.effectiveOutputTimezone$;
         this.openPickerOnTextClick = true;
         this.label = 'Enter a date range';
         this.showCustomize = false;
@@ -857,7 +895,7 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
             .pipe(distinctUntilChanged(), switchMap((opened) => {
             let obs;
             if (opened) {
-                obs = of({});
+                obs = EMPTY;
             }
             else {
                 obs = this.range.valueChanges.pipe(startWith(this.range.value));
@@ -1248,10 +1286,11 @@ class DbxScheduleSelectionCalendarComponent {
         this._inputReadonly = new BehaviorSubject(undefined);
         this._config = new BehaviorSubject({});
         this._centerRangeSub = new SubscriptionObject();
-        this.readonly$ = this._config.pipe(switchMap((x) => (x.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(this._inputReadonly), map(([configReadonly, inputReadonly]) => {
+        this.config$ = this._config.pipe(distinctUntilChanged(), 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.showButtonsOnReadonly$ = this.config$.pipe(map((x) => x.showButtonsOnReadonly ?? false), distinctUntilChanged(), shareReplay(1));
         this.showButtons$ = this.showButtonsOnReadonly$.pipe(switchMap((x) => {
             if (x) {
                 return of(true);
@@ -1260,12 +1299,12 @@ class DbxScheduleSelectionCalendarComponent {
                 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.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$;
-        this.beforeMonthViewRender$ = this._config.pipe(switchMap((x) => {
+        this.beforeMonthViewRender$ = this.config$.pipe(switchMap((x) => {
             let factory;
             if (x.beforeMonthViewRenderFunctionFactory) {
                 factory = asObservable(x.beforeMonthViewRenderFunctionFactory);
@@ -1500,8 +1539,8 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     get exclusions() {
         return this.props.exclusions;
     }
-    get timezone() {
-        return this.props.timezone;
+    get outputTimezone() {
+        return this.props.outputTimezone || this.props.timezone;
     }
     get initialSelectionState() {
         return this.props.initialSelectionState;
@@ -1526,7 +1565,7 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         this._valueSub.subscription = this.dbxCalendarScheduleSelectionStore.currentDateCellScheduleRangeValue$.subscribe((x) => {
             this.formControl.setValue(x);
         });
-        const { timezone, minMaxDateRange, filter, exclusions, defaultScheduleDays } = this;
+        const { outputTimezone, minMaxDateRange, filter, exclusions, defaultScheduleDays } = this;
         if (filter != null) {
             this._filterSub.subscription = this.dbxCalendarScheduleSelectionStore.setFilter(asObservable(filter));
         }
@@ -1539,8 +1578,8 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
         if (exclusions != null) {
             this._exclusionsSub.subscription = this.dbxCalendarScheduleSelectionStore.setExclusions(asObservable(exclusions));
         }
-        if (timezone != null) {
-            this.dbxCalendarScheduleSelectionStore.setTimezone(asObservable(this.timezone));
+        if (outputTimezone != null) {
+            this.dbxCalendarScheduleSelectionStore.setOutputTimezone(asObservable(this.outputTimezone));
         }
         if (this.initialSelectionState !== undefined) {
             this.dbxCalendarScheduleSelectionStore.setInitialSelectionState(this.initialSelectionState);