@dereekb/dbx-form 9.24.35 → 9.24.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar/lib/calendar.schedule.selection.range.component.d.ts +3 -1
- package/calendar/lib/calendar.schedule.selection.store.d.ts +2 -2
- package/esm2020/calendar/lib/calendar.schedule.selection.range.component.mjs +11 -3
- package/esm2020/calendar/lib/calendar.schedule.selection.store.mjs +6 -5
- package/fesm2015/dereekb-dbx-form-calendar.mjs +15 -6
- package/fesm2015/dereekb-dbx-form-calendar.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-form-calendar.mjs +15 -6
- package/fesm2020/dereekb-dbx-form-calendar.mjs.map +1 -1
- package/mapbox/package.json +4 -4
- package/package.json +4 -4
|
@@ -159,8 +159,8 @@ class DbxCalendarScheduleSelectionStore extends ComponentStore {
|
|
|
159
159
|
* @deprecated This is not the same as the current selection value. This is the set of manually togged off dates. It will be removed in a future update.
|
|
160
160
|
*/
|
|
161
161
|
this.selectedDates$ = this.state$.pipe(map((x) => x.toggledIndexes), distinctUntilChanged(), shareReplay(1));
|
|
162
|
-
this.isEnabledFilterDayFunction$ = this.state$.pipe(map((x) => x.isEnabledFilterDay), shareReplay(1));
|
|
163
|
-
this.isEnabledDayFunction$ = this.state$.pipe(map((x) => x.isEnabledDay), shareReplay(1));
|
|
162
|
+
this.isEnabledFilterDayFunction$ = this.state$.pipe(map((x) => x.isEnabledFilterDay), distinctUntilChanged(), shareReplay(1));
|
|
163
|
+
this.isEnabledDayFunction$ = this.state$.pipe(map((x) => x.isEnabledDay), distinctUntilChanged(), shareReplay(1));
|
|
164
164
|
this.currentDateRange$ = this.state$.pipe(map(computeCalendarScheduleSelectionRange), distinctUntilChanged((a, b) => isSameDateRange(a, b)), shareReplay(1));
|
|
165
165
|
this.computeSelectionResultRelativeToFilter$ = this.state$.pipe(map((x) => x.computeSelectionResultRelativeToFilter), shareReplay(1));
|
|
166
166
|
this.startBeingUsedFromFilter$ = this.state$.pipe(
|
|
@@ -612,8 +612,9 @@ function computeScheduleSelectionValue(state) {
|
|
|
612
612
|
};
|
|
613
613
|
}
|
|
614
614
|
function computeScheduleSelectionRangeAndExclusion(state) {
|
|
615
|
-
const { isEnabledDay, isEnabledFilterDay } = state;
|
|
616
|
-
const dateFactory = dateBlockTimingStartDateFactory(
|
|
615
|
+
const { start: currentStart, isEnabledDay, isEnabledFilterDay } = state;
|
|
616
|
+
const dateFactory = dateBlockTimingStartDateFactory({ start: currentStart }, { assertTimingMatchesTimezone: false, useSystemTimezone: true });
|
|
617
|
+
// const dateFactory = dateBlockTimingStartDateFactory(changeTimingToSystemTimezone({ start: currentStart }), { useSystemTimezone: true });
|
|
617
618
|
const dateBlockRange = computeCalendarScheduleSelectionDateBlockRange(state);
|
|
618
619
|
if (dateBlockRange == null) {
|
|
619
620
|
return null; // returns null if no items are selected.
|
|
@@ -795,6 +796,14 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
|
|
|
795
796
|
return currentErrorMessage;
|
|
796
797
|
}), shareReplay(1));
|
|
797
798
|
this.pickerOpened$ = this._pickerOpened.asObservable();
|
|
799
|
+
this.defaultDatePickerFilter = () => true;
|
|
800
|
+
this.datePickerFilter$ = this.dbxCalendarScheduleSelectionStore.isEnabledFilterDayFunction$.pipe(map((isEnabled) => {
|
|
801
|
+
const fn = (date) => {
|
|
802
|
+
const result = date ? isEnabled(date) : true;
|
|
803
|
+
return result;
|
|
804
|
+
};
|
|
805
|
+
return fn;
|
|
806
|
+
}), shareReplay(1));
|
|
798
807
|
}
|
|
799
808
|
set disabled(disabled) {
|
|
800
809
|
if (disabled) {
|
|
@@ -869,10 +878,10 @@ class DbxScheduleSelectionCalendarDateRangeComponent {
|
|
|
869
878
|
}
|
|
870
879
|
}
|
|
871
880
|
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 });
|
|
872
|
-
DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { openPickerOnTextClick: "openPickerOnTextClick", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize", required: "required" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n <!-- Primary Content -->\n <div class=\"dbx-flex\">\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 class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <dbx-button-spacer></dbx-button-spacer>\n <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [
|
|
881
|
+
DbxScheduleSelectionCalendarDateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxScheduleSelectionCalendarDateRangeComponent, selector: "dbx-schedule-selection-calendar-date-range", inputs: { openPickerOnTextClick: "openPickerOnTextClick", label: "label", hint: "hint", disabled: "disabled", showCustomize: "showCustomize", required: "required" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<mat-form-field class=\"dbx-schedule-selection-calendar-date-range-field\">\n <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n <div class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n <!-- Primary Content -->\n <div class=\"dbx-flex\">\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 class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <dbx-button-spacer></dbx-button-spacer>\n <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [dateFilter]=\"(datePickerFilter$ | async) ?? defaultDatePickerFilter\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n </mat-date-range-input>\n <span *ngIf=\"timezone$ | async\" class=\"dbx-flex-bar dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezone$ | async | timezoneAbbreviation: (timezoneReleventDate$ | async) }}</span>\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 </div>\n <!-- Custom Content -->\n <div>\n <ng-content></ng-content>\n </div>\n </div>\n <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</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: i4.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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TimezoneAbbreviationPipe, name: "timezoneAbbreviation" }] });
|
|
873
882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxScheduleSelectionCalendarDateRangeComponent, decorators: [{
|
|
874
883
|
type: Component,
|
|
875
|
-
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 class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n <!-- Primary Content -->\n <div class=\"dbx-flex\">\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 class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <dbx-button-spacer></dbx-button-spacer>\n <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [
|
|
884
|
+
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 class=\"dbx-schedule-selection-calendar-date-range-field-content\">\n <!-- Primary Content -->\n <div class=\"dbx-flex\">\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 class=\"mat-datepicker-button-highlight\" matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <dbx-button-spacer></dbx-button-spacer>\n <mat-date-range-input (click)=\"clickedDateRangeInput()\" [required]=\"required$ | async\" [dateFilter]=\"(datePickerFilter$ | async) ?? defaultDatePickerFilter\" [formGroup]=\"range\" [rangePicker]=\"picker\">\n <input [errorStateMatcher]=\"errorStateMatcher\" matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n <input [errorStateMatcher]=\"errorStateMatcher\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n </mat-date-range-input>\n <span *ngIf=\"timezone$ | async\" class=\"dbx-flex-bar dbx-faint dbx-nowrap dbx-icon-spacer\">{{ timezone$ | async | timezoneAbbreviation: (timezoneReleventDate$ | async) }}</span>\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 </div>\n <!-- Custom Content -->\n <div>\n <ng-content></ng-content>\n </div>\n </div>\n <mat-error *ngIf=\"currentErrorMessage$ | async\">{{ currentErrorMessage$ | async }}</mat-error>\n <mat-hint>{{ hint }}</mat-hint>\n</mat-form-field>\n" }]
|
|
876
885
|
}], ctorParameters: function () { return [{ type: i1.DbxCalendarStore }, { type: DbxCalendarScheduleSelectionStore }, { type: undefined, decorators: [{
|
|
877
886
|
type: Inject,
|
|
878
887
|
args: [MAT_FORM_FIELD_DEFAULT_OPTIONS]
|