@dereekb/dbx-form 13.10.5 → 13.10.7

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

@@ -6,13 +6,13 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, Directive, Optional, SkipSelf, Injector, ChangeDetectionStrategy, Component, viewChild, input, effect, computed, ElementRef, output, InjectionToken, NgModule } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, of, combineLatestWith, BehaviorSubject, filter, combineLatest, EMPTY, startWith, throttleTime, skip } from 'rxjs';
-import { filterMaybe, distinctUntilHasDifferentValues, SubscriptionObject, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
+import { filterMaybe, distinctUntilHasDifferentValues, asObservableFromGetter, asObservable } from '@dereekb/rxjs';
 import { DateCellScheduleDayCode, expandDateCellScheduleDayCodesToDayOfWeekSet, dateCellTimingStartsAtForStartOfDay, dateCellTimingRelativeIndexFactory, dateCellDayOfWeekFactory, dateTimezoneUtcNormal, findMaxDate, findMinDate, isSameDateRange, isSameDateDay, isSameDate, dateCellTimingDateFactory, expandDateCellScheduleRange, formatToISO8601DayStringForSystem, changeDateCellScheduleDateRangeToTimezone, isSameDateCellScheduleDateRange, dateCellTimingRelativeIndexArrayFactory, isInfiniteDateRange, copyDateCellScheduleDateFilterConfig, SYSTEM_DATE_TIMEZONE_UTC_NORMAL_INSTANCE, dateCellScheduleDateFilter, fullDateCellScheduleRange, dateCellTimingTimezoneNormalInstance, expandDateCellScheduleDayCodes, fullWeekDateCellScheduleDayCodes, dateCellScheduleDayCodesAreSetsEquivalent, simplifyDateCellScheduleDayCodes, dateCellTimingStartDateFactory, isDateInDateRangeFunction, isDateWithinDateCellRangeFunction, dateCellScheduleEncodedWeek, enabledDaysFromDateCellScheduleDayCodes, dateCellScheduleDayCodesFromEnabledDays, formatToMonthDayString, dateRange, DateRangeType } from '@dereekb/date';
 import { isInAllowedDaysOfWeekSet, mapValuesToSet, unique, mergeArrays, iterableToArray, isIterable, firstValueFromIterable, minAndMaxNumber, range, toggleInSet, removeFromSet, addToSet, isIndexNumberInIndexRangeFunction, getDaysOfWeekNames, reduceBooleansWithAnd, mergeObjects, KeyValueTypleValueFilter, filterFromPOJO } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { endOfDay, startOfDay, isBefore, endOfWeek } from 'date-fns';
 import * as i1$1 from '@dereekb/dbx-core';
-import { TimezoneAbbreviationPipe, switchMapDbxInjectionComponentConfig, DbxInjectionComponent } from '@dereekb/dbx-core';
+import { completeOnDestroy, cleanSubscription, TimezoneAbbreviationPipe, switchMapDbxInjectionComponentConfig, DbxInjectionComponent } from '@dereekb/dbx-core';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
 import { CalendarMonthViewComponent, CalendarDatePipe } from 'angular-calendar';
@@ -241,6 +241,18 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
     currentSelectionValueStart$ = this.currentSelectionValue$.pipe(map((x) => x?.dateScheduleRange.start), distinctUntilChanged(isSameDate), shareReplay(1));
     currentSelectionValueDateCellTimingDateFactory$ = this.currentSelectionValue$.pipe(map((x) => (x ? dateCellTimingDateFactory({ startsAt: x.dateScheduleRange.start, timezone: x.dateScheduleRange.timezone }) : undefined)), shareReplay(1));
     currentSelectionValueDateCellDurationSpanExpansion$ = this.currentSelectionValue$.pipe(map((x) => (x ? expandDateCellScheduleRange({ dateCellScheduleRange: x.dateScheduleRange }) : [])), shareReplay(1));
+    /**
+     * State-anchored coordinate contract: the emitted indexes are anchored at
+     * `state.start` (== `filter.start` when a filter is set, otherwise `today` from
+     * `initialCalendarScheduleSelectionState()`). Consumers can use them directly
+     * with `state.indexFactory(date)`.
+     *
+     * This holds because `currentSelectionValue.dateScheduleRange.start` always
+     * equals `state.start` for filter-relative outputs, so the expansion's `i`
+     * values share the same anchor. If a future change re-introduces a non-
+     * `state.start` output anchor, translate output indexes back via
+     * `state.indexFactory(dateScheduleRange.start)` here.
+     */
     selectionValueSelectedIndexes$ = this.currentSelectionValueDateCellDurationSpanExpansion$.pipe(map((x) => new Set(x.map((y) => y.i))), distinctUntilHasDifferentValues(), shareReplay(1));
     selectionValueSelectedDates$ = this.currentSelectionValueDateCellTimingDateFactory$.pipe(switchMap((dateFactory) => {
         return dateFactory ? this.selectionValueSelectedIndexes$.pipe(map((x) => mapValuesToSet(x, (y) => formatToISO8601DayStringForSystem(dateFactory(y))))) : of(new Set());
@@ -577,11 +589,14 @@ function updateStateWithDateCellScheduleRangeValue(state, inputChange) {
         return state;
     }
     if (change != null) {
-        // The incoming ex indexes are relative to change.start, but toggledIndexes must be
-        // relative to state.start. Adjust by the offset between them.
-        const inputStartIndex = state.indexFactory(change.start);
-        const adjustedEx = inputStartIndex !== 0 && change.ex ? change.ex.map((i) => i + inputStartIndex) : (change.ex ?? []);
-        const nextState = { ...state, inputStart: change.start, inputEnd: change.end, toggledIndexes: new Set(adjustedEx) };
+        // After the legacy-restored output anchor, change.ex is already state-anchored
+        // (change.start equals state.start for filter-relative outputs), so no offset
+        // is applied. inputStart is clamped to state.minMaxDateRange.start when set so
+        // the round-trip preserves the clamp and pre-clamp days don't re-render via the
+        // "toggled outside range" branch.
+        const minMaxStart = state.minMaxDateRange?.start;
+        const clampedInputStart = minMaxStart && minMaxStart.getTime() > change.start.getTime() ? minMaxStart : change.start;
+        const nextState = { ...state, inputStart: clampedInputStart, inputEnd: change.end, toggledIndexes: new Set(change.ex ?? []) };
         return updateStateWithChangedScheduleDays(finalizeNewCalendarScheduleSelectionState(nextState), expandDateCellScheduleDayCodes(change.w || '89'));
     }
     return noSelectionCalendarScheduleSelectionState(state); // clear selection, retain disabled days
@@ -923,26 +938,8 @@ function computeScheduleSelectionValue(state) {
         const rangeStartIndex = systemIndexFactory(rangeStart);
         const startIndex = systemIndexFactory(startInSystemTimezone);
         const filterStartIndexOffset = rangeStartIndex - startIndex;
-        // When minMaxDateRange constrains the start to after filter.start,
-        // use rangeStart as the output start instead of filter.start.
-        // This prevents outputting a start date that violates the minMaxDateRange
-        // and avoids the round-trip corruption when the value is synced back to the store.
-        if (filterStartIndexOffset > 0 && state.minMaxDateRange?.start) {
-            // rangeStart already respects minMaxDateRange. Convert it to the filter's timezone for the output.
-            if (filter.timezone) {
-                const filterNormal = dateTimezoneUtcNormal(filter.timezone);
-                start = filterNormal.startOfDayInTargetTimezone(rangeStart);
-            }
-            else {
-                start = rangeStart;
-            }
-            // No filter offset exclusions needed since start is at the selection start.
-            // indexOffset stays as dateCellRange.i (relative to state.start → rangeStart).
-        }
-        else {
-            filterOffsetExcludedRange = range(0, filterStartIndexOffset);
-            indexOffset = indexOffset - filterStartIndexOffset;
-        }
+        filterOffsetExcludedRange = range(0, filterStartIndexOffset);
+        indexOffset = indexOffset - filterStartIndexOffset;
     }
     const excluded = computeSelectionResultRelativeToFilter
         ? allExcluded.filter((x) => {
@@ -1205,9 +1202,9 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
             this.range.enable();
         }
     }, ...(ngDevMode ? [{ debugName: "_disabledEffect" }] : /* istanbul ignore next */ []));
-    _pickerOpened = new BehaviorSubject(false);
-    _syncSub = new SubscriptionObject();
-    _valueSub = new SubscriptionObject();
+    _pickerOpened = completeOnDestroy(new BehaviorSubject(false));
+    _syncSub = cleanSubscription();
+    _valueSub = cleanSubscription();
     range = new FormGroup({
         start: new FormControl(null),
         end: new FormControl(null)
@@ -1301,10 +1298,6 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this._syncSub.destroy();
-        this._valueSub.destroy();
-    }
     clickedDateRangeInput() {
         if (this.openPickerOnTextClick()) {
             const picker = this.picker();
@@ -1583,7 +1576,7 @@ class DbxScheduleSelectionCalendarComponent {
     clickEvent = output();
     config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    _centerRangeSub = new SubscriptionObject();
+    _centerRangeSub = cleanSubscription();
     config$ = toObservable(this.config).pipe(distinctUntilChanged(), shareReplay(1));
     readonly$ = this.config$.pipe(switchMap((x) => (x?.readonly != null ? asObservableFromGetter(x.readonly) : of(undefined))), combineLatestWith(toObservable(this.readonly)), map(([configReadonly, inputReadonly]) => {
         return configReadonly || inputReadonly || false;
@@ -1650,9 +1643,6 @@ class DbxScheduleSelectionCalendarComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this._centerRangeSub.destroy();
-    }
     dayClicked({ date }) {
         if (!this.readonlySignal()) {
             this.dbxCalendarScheduleSelectionStore.toggleSelectedDates(date);
@@ -1758,14 +1748,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     compact = inject(CompactContextStore, { optional: true });
     dbxCalendarScheduleSelectionStore = inject(DbxCalendarScheduleSelectionStore);
-    _syncSub = new SubscriptionObject();
-    _valueSub = new SubscriptionObject();
-    _timezoneSub = new SubscriptionObject();
-    _minMaxDateRangeSub = new SubscriptionObject();
-    _defaultWeekSub = new SubscriptionObject();
-    _filterSub = new SubscriptionObject();
-    _exclusionsSub = new SubscriptionObject();
-    _formControlObs = new BehaviorSubject(undefined);
+    _syncSub = cleanSubscription();
+    _valueSub = cleanSubscription();
+    _timezoneSub = cleanSubscription();
+    _minMaxDateRangeSub = cleanSubscription();
+    _defaultWeekSub = cleanSubscription();
+    _filterSub = cleanSubscription();
+    _exclusionsSub = cleanSubscription();
+    _formControlObs = completeOnDestroy(new BehaviorSubject(undefined));
     formControl$ = this._formControlObs.pipe(filterMaybe());
     value$ = this.formControl$.pipe(switchMap((control) => control.valueChanges.pipe(startWith(control.value))), shareReplay(1));
     disableCustomize$ = this.value$.pipe(map((x) => (this.allowCustomizeWithoutDateRange ? false : !x)), distinctUntilChanged(), shareReplay(1));
@@ -1860,13 +1850,6 @@ class DbxFormCalendarDateScheduleRangeFieldComponent extends FieldType {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this._syncSub.destroy();
-        this._valueSub.destroy();
-        this._filterSub.destroy();
-        this._timezoneSub.destroy();
-        this._minMaxDateRangeSub.destroy();
-        this._exclusionsSub.destroy();
-        this._formControlObs.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormCalendarDateScheduleRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormCalendarDateScheduleRangeFieldComponent, isStandalone: true, selector: "ng-component", providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], usesInheritance: true, ngImport: i0, template: `
@@ -1987,13 +1970,13 @@ class DbxForgeCalendarDateScheduleRangeFieldComponent {
     validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : /* istanbul ignore next */ []));
     defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : /* istanbul ignore next */ []));
     // Subscription management
-    _syncSub = new SubscriptionObject();
-    _valueSub = new SubscriptionObject();
-    _timezoneSub = new SubscriptionObject();
-    _minMaxDateRangeSub = new SubscriptionObject();
-    _defaultWeekSub = new SubscriptionObject();
-    _filterSub = new SubscriptionObject();
-    _exclusionsSub = new SubscriptionObject();
+    _syncSub = cleanSubscription();
+    _valueSub = cleanSubscription();
+    _timezoneSub = cleanSubscription();
+    _minMaxDateRangeSub = cleanSubscription();
+    _defaultWeekSub = cleanSubscription();
+    _filterSub = cleanSubscription();
+    _exclusionsSub = cleanSubscription();
     // Field value signal (double-call pattern: field()() to get FieldState)
     fieldValue = computed(() => {
         const state = this.field()?.();
@@ -2080,15 +2063,6 @@ class DbxForgeCalendarDateScheduleRangeFieldComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this._syncSub.destroy();
-        this._valueSub.destroy();
-        this._filterSub.destroy();
-        this._timezoneSub.destroy();
-        this._minMaxDateRangeSub.destroy();
-        this._defaultWeekSub.destroy();
-        this._exclusionsSub.destroy();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeCalendarDateScheduleRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DbxForgeCalendarDateScheduleRangeFieldComponent, isStandalone: true, selector: "dbx-forge-calendar-date-schedule-range-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideCalendarScheduleSelectionStoreIfParentIsUnavailable()], ngImport: i0, template: `
     <div class="dbx-schedule-selection-field">