@wkly/datetime-picker 17.0.0 → 18.0.0

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.
Files changed (16) hide show
  1. package/config.d.ts +74 -38
  2. package/esm2022/cdk-overlay/public-api.mjs +13 -12
  3. package/esm2022/cdk-overlay/wkly-datetime-picker-cdk-overlay.mjs +1 -1
  4. package/esm2022/config.mjs +118 -79
  5. package/esm2022/field.component.mjs +5 -5
  6. package/esm2022/picker.component.mjs +114 -103
  7. package/esm2022/presentation.mjs +70 -51
  8. package/esm2022/public-api.mjs +5 -5
  9. package/esm2022/wkly-datetime-picker.mjs +1 -1
  10. package/fesm2022/wkly-datetime-picker-cdk-overlay.mjs +12 -11
  11. package/fesm2022/wkly-datetime-picker-cdk-overlay.mjs.map +1 -1
  12. package/fesm2022/wkly-datetime-picker.mjs +304 -236
  13. package/fesm2022/wkly-datetime-picker.mjs.map +1 -1
  14. package/package.json +7 -7
  15. package/picker.component.d.ts +9 -5
  16. package/presentation.d.ts +12 -8
package/fesm2022/wkly-datetime-picker.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
- import { InjectionToken, EventEmitter, Directive, Output, Input, Component, LOCALE_ID, PLATFORM_ID, forwardRef, ViewChild, Inject, Injectable, HostListener, NgModule } from '@angular/core';
2
+ import { InjectionToken, input, booleanAttribute, output, Directive, EventEmitter, Component, Input, Output, signal, effect, untracked, LOCALE_ID, PLATFORM_ID, forwardRef, Inject, ViewChild, createComponent, Injectable, HostListener, NgModule } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { isPlatformBrowser, getLocaleFirstDayOfWeek, DOCUMENT, CommonModule } from '@angular/common';
5
5
  import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
6
6
  import { floorMod, integer, createWeekGenerator, absoluteWeekOf, firstEpochDayOf } from '@wkly/core';
7
- import { normalizeDigits, WklyGregorianCalendarAdapter, resolveWeekOffset, error, validateSelection, decodeIso } from '@wkly/adapters';
8
- import { WklyPickerInputsPropertyKeys, DEFAULT_OVERSCAN_WEEKS, WklyPickerOutputsPropertyKeys, coerceBoolean, resolveWklyTranslation, validateDrafts, draftDayDifference, setDraftDayDifference, calendarMonthBounds, createWeekRows, INPUT_NAMES } from '@wkly/presentation';
7
+ import { DEFAULT_OVERSCAN_WEEKS, WklyPickerInputsPropertyKeys, WklyPickerOutputsPropertyKeys, resolveWklyTranslation, validateDrafts, draftDayDifference, setDraftDayDifference, calendarMonthBounds, createWeekRows } from '@wkly/presentation';
9
8
  export * from '@wkly/presentation';
9
+ import { normalizeDigits, WklyGregorianCalendarAdapter, resolveWeekOffset, error, validateSelection, decodeIso } from '@wkly/adapters';
10
10
 
11
11
  const WKLY_CLOCK = new InjectionToken("WKLY_CLOCK", {
12
12
  providedIn: "root",
@@ -15,91 +15,130 @@ const WKLY_CLOCK = new InjectionToken("WKLY_CLOCK", {
15
15
  const WKLY_CONFIG = new InjectionToken("WKLY_CONFIG", { providedIn: "root", factory: () => ({}) });
16
16
  const WKLY_LOCALIZATION = new InjectionToken("WKLY_LOCALIZATION", { providedIn: "root", factory: () => ({}) });
17
17
  const WKLY_TRANSLATIONS = new InjectionToken("WKLY_TRANSLATIONS", { providedIn: "root", factory: () => ({}) });
18
- /** Shared public inputs/outputs inherited by the picker and both trigger directives. */
19
- // Inherited inputs need literal names in published decorator metadata.
20
18
  class WklyPickerInputs {
21
- [WklyPickerInputsPropertyKeys.Mode] = "datetime";
22
- [WklyPickerInputsPropertyKeys.Value] = null;
23
- [WklyPickerInputsPropertyKeys.CalendarAdapter];
24
- [WklyPickerInputsPropertyKeys.Locale] = "";
25
- [WklyPickerInputsPropertyKeys.WeekOffset] = null;
26
- [WklyPickerInputsPropertyKeys.ViewportPreset] = {
27
- kind: "full-month",
28
- };
29
- [WklyPickerInputsPropertyKeys.HourCycle] = "locale";
30
- [WklyPickerInputsPropertyKeys.ShowSeconds] = false;
31
- [WklyPickerInputsPropertyKeys.MinuteStep] = 1;
32
- [WklyPickerInputsPropertyKeys.SecondStep] = 1;
33
- [WklyPickerInputsPropertyKeys.Min] = null;
34
- [WklyPickerInputsPropertyKeys.Max] = null;
35
- [WklyPickerInputsPropertyKeys.IsDateDisabled] = null;
36
- [WklyPickerInputsPropertyKeys.IsTimeDisabled] = null;
37
- [WklyPickerInputsPropertyKeys.RangeValidator] = null;
38
- [WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled] = false;
39
- [WklyPickerInputsPropertyKeys.Required] = false;
40
- [WklyPickerInputsPropertyKeys.Disabled] = false;
41
- [WklyPickerInputsPropertyKeys.WeekLabelMode] = "locale";
42
- [WklyPickerInputsPropertyKeys.WeekLabelFormatter] = null;
43
- [WklyPickerInputsPropertyKeys.WeekCacheSize] = 256;
44
- [WklyPickerInputsPropertyKeys.OverscanWeeks] = DEFAULT_OVERSCAN_WEEKS;
45
- [WklyPickerInputsPropertyKeys.AriaLabel] = null;
46
- [WklyPickerInputsPropertyKeys.AriaDescribedBy] = null;
47
- [WklyPickerInputsPropertyKeys.InitialEpochDay] = null;
48
- [WklyPickerInputsPropertyKeys.CloseOnBackdrop] = true;
49
- [WklyPickerInputsPropertyKeys.Validators] = [];
50
- [WklyPickerInputsPropertyKeys.Translations] = null;
51
- [WklyPickerOutputsPropertyKeys.ValueChange] = new EventEmitter();
52
- [WklyPickerOutputsPropertyKeys.ValidationChange] = new EventEmitter(true);
53
- [WklyPickerOutputsPropertyKeys.Opened] = new EventEmitter();
54
- [WklyPickerOutputsPropertyKeys.Closed] = new EventEmitter();
55
- [WklyPickerOutputsPropertyKeys.ViewportChange] = new EventEmitter(true);
56
- [WklyPickerOutputsPropertyKeys.ViewModeChange] = new EventEmitter();
57
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyPickerInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
58
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: WklyPickerInputs, inputs: { mode: "mode", value: "value", calendarAdapter: "calendarAdapter", locale: "locale", weekOffset: "weekOffset", viewportPreset: "viewportPreset", hourCycle: "hourCycle", showSeconds: "showSeconds", minuteStep: "minuteStep", secondStep: "secondStep", min: "min", max: "max", isDateDisabled: "isDateDisabled", isTimeDisabled: "isTimeDisabled", rangeValidator: "rangeValidator", allowRangeAcrossDisabled: "allowRangeAcrossDisabled", required: "required", disabled: "disabled", weekLabelMode: "weekLabelMode", weekLabelFormatter: "weekLabelFormatter", weekCacheSize: "weekCacheSize", overscanWeeks: "overscanWeeks", ariaLabel: "ariaLabel", ariaDescribedBy: "ariaDescribedBy", initialEpochDay: "initialEpochDay", closeOnBackdrop: "closeOnBackdrop", validators: "validators", translations: "translations" }, outputs: { valueChange: "valueChange", validationChange: "validationChange", opened: "opened", closed: "closed", viewportChange: "viewportChange", viewModeChange: "viewModeChange" }, ngImport: i0 });
19
+ // Angular discovers signal inputs from identifier property declarations.
20
+ modeInput = input("datetime", {
21
+ alias: "mode",
22
+ });
23
+ valueInput = input(null, {
24
+ alias: "value",
25
+ });
26
+ calendarAdapterInput = input(undefined, { alias: "calendarAdapter" });
27
+ localeInput = input("", { alias: "locale" });
28
+ weekOffsetInput = input(null, {
29
+ alias: "weekOffset",
30
+ });
31
+ viewportPresetInput = input({ kind: "full-month" }, { alias: "viewportPreset" });
32
+ hourCycleInput = input("locale", {
33
+ alias: "hourCycle",
34
+ });
35
+ showSecondsInput = input(false, {
36
+ alias: "showSeconds",
37
+ transform: booleanAttribute,
38
+ });
39
+ minuteStepInput = input(1, { alias: "minuteStep" });
40
+ secondStepInput = input(1, { alias: "secondStep" });
41
+ minInput = input(null, { alias: "min" });
42
+ maxInput = input(null, { alias: "max" });
43
+ isDateDisabledInput = input(null, { alias: "isDateDisabled" });
44
+ isTimeDisabledInput = input(null, { alias: "isTimeDisabled" });
45
+ rangeValidatorInput = input(null, { alias: "rangeValidator" });
46
+ allowRangeAcrossDisabledInput = input(false, {
47
+ alias: "allowRangeAcrossDisabled",
48
+ transform: booleanAttribute,
49
+ });
50
+ requiredInput = input(false, {
51
+ alias: "required",
52
+ transform: booleanAttribute,
53
+ });
54
+ disabledInput = input(false, {
55
+ alias: "disabled",
56
+ transform: booleanAttribute,
57
+ });
58
+ weekLabelModeInput = input("locale", {
59
+ alias: "weekLabelMode",
60
+ });
61
+ weekLabelFormatterInput = input(null, { alias: "weekLabelFormatter" });
62
+ weekCacheSizeInput = input(256, {
63
+ alias: "weekCacheSize",
64
+ });
65
+ overscanWeeksInput = input(DEFAULT_OVERSCAN_WEEKS, {
66
+ alias: "overscanWeeks",
67
+ });
68
+ ariaLabelInput = input(null, {
69
+ alias: "ariaLabel",
70
+ });
71
+ ariaDescribedByInput = input(null, {
72
+ alias: "ariaDescribedBy",
73
+ });
74
+ initialEpochDayInput = input(null, {
75
+ alias: "initialEpochDay",
76
+ });
77
+ closeOnBackdropInput = input(true, {
78
+ alias: "closeOnBackdrop",
79
+ transform: booleanAttribute,
80
+ });
81
+ validatorsInput = input([], { alias: "validators" });
82
+ translationsInput = input(null, {
83
+ alias: "translations",
84
+ });
85
+ // Public members of the shared picker input contract.
86
+ [WklyPickerInputsPropertyKeys.Mode] = this.modeInput;
87
+ [WklyPickerInputsPropertyKeys.Value] = this.valueInput;
88
+ [WklyPickerInputsPropertyKeys.CalendarAdapter] = this.calendarAdapterInput;
89
+ [WklyPickerInputsPropertyKeys.Locale] = this.localeInput;
90
+ [WklyPickerInputsPropertyKeys.WeekOffset] = this.weekOffsetInput;
91
+ [WklyPickerInputsPropertyKeys.ViewportPreset] = this.viewportPresetInput;
92
+ [WklyPickerInputsPropertyKeys.HourCycle] = this.hourCycleInput;
93
+ [WklyPickerInputsPropertyKeys.ShowSeconds] = this.showSecondsInput;
94
+ [WklyPickerInputsPropertyKeys.MinuteStep] = this.minuteStepInput;
95
+ [WklyPickerInputsPropertyKeys.SecondStep] = this.secondStepInput;
96
+ [WklyPickerInputsPropertyKeys.Min] = this.minInput;
97
+ [WklyPickerInputsPropertyKeys.Max] = this.maxInput;
98
+ [WklyPickerInputsPropertyKeys.IsDateDisabled] = this.isDateDisabledInput;
99
+ [WklyPickerInputsPropertyKeys.IsTimeDisabled] = this.isTimeDisabledInput;
100
+ [WklyPickerInputsPropertyKeys.RangeValidator] = this.rangeValidatorInput;
101
+ [WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled] = this.allowRangeAcrossDisabledInput;
102
+ [WklyPickerInputsPropertyKeys.Required] = this.requiredInput;
103
+ [WklyPickerInputsPropertyKeys.Disabled] = this.disabledInput;
104
+ [WklyPickerInputsPropertyKeys.WeekLabelMode] = this.weekLabelModeInput;
105
+ [WklyPickerInputsPropertyKeys.WeekLabelFormatter] = this.weekLabelFormatterInput;
106
+ [WklyPickerInputsPropertyKeys.WeekCacheSize] = this.weekCacheSizeInput;
107
+ [WklyPickerInputsPropertyKeys.OverscanWeeks] = this.overscanWeeksInput;
108
+ [WklyPickerInputsPropertyKeys.AriaLabel] = this.ariaLabelInput;
109
+ [WklyPickerInputsPropertyKeys.AriaDescribedBy] = this.ariaDescribedByInput;
110
+ [WklyPickerInputsPropertyKeys.InitialEpochDay] = this.initialEpochDayInput;
111
+ [WklyPickerInputsPropertyKeys.CloseOnBackdrop] = this.closeOnBackdropInput;
112
+ [WklyPickerInputsPropertyKeys.Validators] = this.validatorsInput;
113
+ [WklyPickerInputsPropertyKeys.Translations] = this.translationsInput;
114
+ [WklyPickerOutputsPropertyKeys.ValueChange] = output();
115
+ [WklyPickerOutputsPropertyKeys.ValidationChange] = output();
116
+ [WklyPickerOutputsPropertyKeys.Opened] = output();
117
+ [WklyPickerOutputsPropertyKeys.Closed] = output();
118
+ [WklyPickerOutputsPropertyKeys.ViewportChange] = output();
119
+ [WklyPickerOutputsPropertyKeys.ViewModeChange] = output();
120
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyPickerInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
121
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: WklyPickerInputs, inputs: { modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, calendarAdapterInput: { classPropertyName: "calendarAdapterInput", publicName: "calendarAdapter", isSignal: true, isRequired: false, transformFunction: null }, localeInput: { classPropertyName: "localeInput", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekOffsetInput: { classPropertyName: "weekOffsetInput", publicName: "weekOffset", isSignal: true, isRequired: false, transformFunction: null }, viewportPresetInput: { classPropertyName: "viewportPresetInput", publicName: "viewportPreset", isSignal: true, isRequired: false, transformFunction: null }, hourCycleInput: { classPropertyName: "hourCycleInput", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, showSecondsInput: { classPropertyName: "showSecondsInput", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStepInput: { classPropertyName: "minuteStepInput", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStepInput: { classPropertyName: "secondStepInput", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, minInput: { classPropertyName: "minInput", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxInput: { classPropertyName: "maxInput", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateDisabledInput: { classPropertyName: "isDateDisabledInput", publicName: "isDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, isTimeDisabledInput: { classPropertyName: "isTimeDisabledInput", publicName: "isTimeDisabled", isSignal: true, isRequired: false, transformFunction: null }, rangeValidatorInput: { classPropertyName: "rangeValidatorInput", publicName: "rangeValidator", isSignal: true, isRequired: false, transformFunction: null }, allowRangeAcrossDisabledInput: { classPropertyName: "allowRangeAcrossDisabledInput", publicName: "allowRangeAcrossDisabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, weekLabelModeInput: { classPropertyName: "weekLabelModeInput", publicName: "weekLabelMode", isSignal: true, isRequired: false, transformFunction: null }, weekLabelFormatterInput: { classPropertyName: "weekLabelFormatterInput", publicName: "weekLabelFormatter", isSignal: true, isRequired: false, transformFunction: null }, weekCacheSizeInput: { classPropertyName: "weekCacheSizeInput", publicName: "weekCacheSize", isSignal: true, isRequired: false, transformFunction: null }, overscanWeeksInput: { classPropertyName: "overscanWeeksInput", publicName: "overscanWeeks", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelInput: { classPropertyName: "ariaLabelInput", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedByInput: { classPropertyName: "ariaDescribedByInput", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, initialEpochDayInput: { classPropertyName: "initialEpochDayInput", publicName: "initialEpochDay", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropInput: { classPropertyName: "closeOnBackdropInput", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, validatorsInput: { classPropertyName: "validatorsInput", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, translationsInput: { classPropertyName: "translationsInput", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", validationChange: "validationChange", opened: "opened", closed: "closed", viewportChange: "viewportChange", viewModeChange: "viewModeChange" }, ngImport: i0 });
59
122
  }
60
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyPickerInputs, decorators: [{
123
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyPickerInputs, decorators: [{
61
124
  type: Directive,
62
125
  args: [{
63
- inputs: [
64
- "mode",
65
- "value",
66
- "calendarAdapter",
67
- "locale",
68
- "weekOffset",
69
- "viewportPreset",
70
- "hourCycle",
71
- "showSeconds",
72
- "minuteStep",
73
- "secondStep",
74
- "min",
75
- "max",
76
- "isDateDisabled",
77
- "isTimeDisabled",
78
- "rangeValidator",
79
- "allowRangeAcrossDisabled",
80
- "required",
81
- "disabled",
82
- "weekLabelMode",
83
- "weekLabelFormatter",
84
- "weekCacheSize",
85
- "overscanWeeks",
86
- "ariaLabel",
87
- "ariaDescribedBy",
88
- "initialEpochDay",
89
- "closeOnBackdrop",
90
- "validators",
91
- "translations",
92
- ],
126
+ // Angular's metadata evaluator requires strings; template expressions
127
+ // preserve the enum as their source.
93
128
  outputs: [
94
- "valueChange",
95
- "validationChange",
96
- "opened",
97
- "closed",
98
- "viewportChange",
99
- "viewModeChange",
129
+ `${WklyPickerOutputsPropertyKeys.ValueChange}`,
130
+ `${WklyPickerOutputsPropertyKeys.ValidationChange}`,
131
+ `${WklyPickerOutputsPropertyKeys.Opened}`,
132
+ `${WklyPickerOutputsPropertyKeys.Closed}`,
133
+ `${WklyPickerOutputsPropertyKeys.ViewportChange}`,
134
+ `${WklyPickerOutputsPropertyKeys.ViewModeChange}`,
100
135
  ],
101
136
  }]
102
137
  }] });
138
+ function unwrapWklyPickerSignalInputs(source) {
139
+ const keys = Object.values(WklyPickerInputsPropertyKeys);
140
+ return Object.fromEntries(keys.map((key) => [key, source[key]()]));
141
+ }
103
142
 
104
143
  class WklyFieldComponent {
105
144
  value = 0;
@@ -311,12 +350,12 @@ class WklyFieldComponent {
311
350
  this.touchSteps = steps;
312
351
  this.touchChanged = true;
313
352
  }
314
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
315
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WklyFieldComponent, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"field\"\n (wheel)=\"wheel($event)\"\n (touchstart)=\"touchStart($event)\"\n (touchmove)=\"touchMove($event)\"\n (touchend)=\"touchEnd($event)\"\n (touchcancel)=\"touchEnd($event)\"\n>\n <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"previousLabel || label + ': previous'\"\n (click)=\"stepBy(-1)\"\n >\n {{ neighbor(-1) }}\n </button>\n <input\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [value]=\"display\"\n [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n autocomplete=\"off\"\n (focus)=\"begin($event)\"\n (input)=\"type($event)\"\n (blur)=\"finish()\"\n (keydown)=\"key($event)\"\n />\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"nextLabel || label + ': next'\"\n (click)=\"stepBy(1)\"\n >\n {{ neighbor(1) }}\n </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
353
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
354
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WklyFieldComponent, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"field\"\n (wheel)=\"wheel($event)\"\n (touchstart)=\"touchStart($event)\"\n (touchmove)=\"touchMove($event)\"\n (touchend)=\"touchEnd($event)\"\n (touchcancel)=\"touchEnd($event)\"\n>\n <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"previousLabel || label + ': previous'\"\n (click)=\"stepBy(-1)\"\n >\n {{ neighbor(-1) }}\n </button>\n <input\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [value]=\"display\"\n [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n autocomplete=\"off\"\n (focus)=\"begin($event)\"\n (input)=\"type($event)\"\n (blur)=\"finish()\"\n (keydown)=\"key($event)\"\n />\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"nextLabel || label + ': next'\"\n (click)=\"stepBy(1)\"\n >\n {{ neighbor(1) }}\n </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
316
355
  }
317
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyFieldComponent, decorators: [{
356
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyFieldComponent, decorators: [{
318
357
  type: Component,
319
- args: [{ selector: "wkly-field", template: "<div\n class=\"field\"\n (wheel)=\"wheel($event)\"\n (touchstart)=\"touchStart($event)\"\n (touchmove)=\"touchMove($event)\"\n (touchend)=\"touchEnd($event)\"\n (touchcancel)=\"touchEnd($event)\"\n>\n <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"previousLabel || label + ': previous'\"\n (click)=\"stepBy(-1)\"\n >\n {{ neighbor(-1) }}\n </button>\n <input\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [value]=\"display\"\n [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n autocomplete=\"off\"\n (focus)=\"begin($event)\"\n (input)=\"type($event)\"\n (blur)=\"finish()\"\n (keydown)=\"key($event)\"\n />\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"nextLabel || label + ': next'\"\n (click)=\"stepBy(1)\"\n >\n {{ neighbor(1) }}\n </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"] }]
358
+ args: [{ standalone: false, selector: "wkly-field", template: "<div\n class=\"field\"\n (wheel)=\"wheel($event)\"\n (touchstart)=\"touchStart($event)\"\n (touchmove)=\"touchMove($event)\"\n (touchend)=\"touchEnd($event)\"\n (touchcancel)=\"touchEnd($event)\"\n>\n <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"previousLabel || label + ': previous'\"\n (click)=\"stepBy(-1)\"\n >\n {{ neighbor(-1) }}\n </button>\n <input\n [attr.aria-label]=\"label\"\n [attr.aria-invalid]=\"invalid\"\n [disabled]=\"disabled\"\n [value]=\"display\"\n [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n autocomplete=\"off\"\n (focus)=\"begin($event)\"\n (input)=\"type($event)\"\n (blur)=\"finish()\"\n (keydown)=\"key($event)\"\n />\n <button\n type=\"button\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"nextLabel || label + ': next'\"\n (click)=\"stepBy(1)\"\n >\n {{ neighbor(1) }}\n </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"] }]
320
359
  }], propDecorators: { value: [{
321
360
  type: Input
322
361
  }], label: [{
@@ -399,6 +438,17 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
399
438
  pendingValue = null;
400
439
  emittedValue = null;
401
440
  manualDateEndpoint = 0;
441
+ formValue = signal(undefined);
442
+ formDisabled = signal(false);
443
+ previousInputs;
444
+ currentValue() {
445
+ return this.formValue() === undefined
446
+ ? this[WklyPickerInputsPropertyKeys.Value]()
447
+ : this.formValue();
448
+ }
449
+ isDisabled() {
450
+ return this[WklyPickerInputsPropertyKeys.Disabled]() || this.formDisabled();
451
+ }
402
452
  constructor(defaultLocale, defaults, clock, strings, defaultTranslations, platform, host, changeDetector) {
403
453
  super();
404
454
  this.defaultLocale = defaultLocale;
@@ -409,41 +459,51 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
409
459
  this.host = host;
410
460
  this.changeDetector = changeDetector;
411
461
  this.browser = isPlatformBrowser(platform);
462
+ effect(() => {
463
+ const inputs = unwrapWklyPickerSignalInputs(this);
464
+ const previous = this.previousInputs;
465
+ this.previousInputs = inputs;
466
+ if (!previous || !this.initialized)
467
+ return;
468
+ const changed = (key) => !Object.is(previous[key], inputs[key]);
469
+ if (!Object.keys(inputs).some((key) => changed(key)))
470
+ return;
471
+ untracked(() => {
472
+ if (changed(WklyPickerInputsPropertyKeys.Value))
473
+ this.formValue.set(undefined);
474
+ if (changed(WklyPickerInputsPropertyKeys.Value) &&
475
+ this.emittedValue === JSON.stringify(this.currentValue()) &&
476
+ Object.keys(inputs).every((key) => key === WklyPickerInputsPropertyKeys.Value ||
477
+ !changed(key))) {
478
+ this.emittedValue = null;
479
+ return;
480
+ }
481
+ const focus = this.focused;
482
+ this.configure();
483
+ if (changed(WklyPickerInputsPropertyKeys.Value) ||
484
+ changed(WklyPickerInputsPropertyKeys.Mode) ||
485
+ changed(WklyPickerInputsPropertyKeys.CalendarAdapter)) {
486
+ this.load(this.currentValue());
487
+ this.position(this.focused, true);
488
+ }
489
+ else {
490
+ this.check();
491
+ if (changed(WklyPickerInputsPropertyKeys.ViewportPreset))
492
+ this.position(focus, true);
493
+ else
494
+ this.scrollToEpochDay(focus);
495
+ }
496
+ });
497
+ });
412
498
  }
413
499
  ngOnInit() {
414
500
  this.initialize();
415
501
  }
416
- ngOnChanges(changes) {
417
- if (this.initialized) {
418
- if (Object.keys(changes).length === 1 &&
419
- changes[WklyPickerInputsPropertyKeys.Value] &&
420
- this.emittedValue ===
421
- JSON.stringify(this[WklyPickerInputsPropertyKeys.Value])) {
422
- this.emittedValue = null;
423
- return;
424
- }
425
- const focus = this.focused;
426
- this.configure();
427
- if (changes[WklyPickerInputsPropertyKeys.Value] ||
428
- changes[WklyPickerInputsPropertyKeys.Mode] ||
429
- changes[WklyPickerInputsPropertyKeys.CalendarAdapter]) {
430
- this.load(this[WklyPickerInputsPropertyKeys.Value]);
431
- this.position(this.focused, true);
432
- }
433
- else {
434
- this.check();
435
- if (changes[WklyPickerInputsPropertyKeys.ViewportPreset])
436
- this.position(focus, true);
437
- else
438
- this.scrollToEpochDay(focus);
439
- }
440
- }
441
- }
442
502
  initialize() {
443
503
  if (this.initialized)
444
504
  return;
445
505
  this.configure();
446
- const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay];
506
+ const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay]();
447
507
  this.today = this.browser
448
508
  ? Math.floor(this.clock.now().getTime() / 86400000)
449
509
  : initialEpochDay === null
@@ -455,28 +515,21 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
455
515
  ? this.today
456
516
  : this.defaults.initialEpochDay
457
517
  : initialEpochDay;
458
- this.load(this[WklyPickerInputsPropertyKeys.Value]);
518
+ this.load(this.currentValue());
459
519
  this.initialized = true;
460
520
  this.position(this.focused, true);
461
521
  }
462
522
  configure() {
463
523
  this.configErrors = [];
464
- [
465
- WklyPickerInputsPropertyKeys.ShowSeconds,
466
- WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled,
467
- WklyPickerInputsPropertyKeys.Required,
468
- WklyPickerInputsPropertyKeys.Disabled,
469
- WklyPickerInputsPropertyKeys.CloseOnBackdrop,
470
- ].forEach((key) => (this[key] = coerceBoolean(this[key])));
471
524
  this.effectiveLocale =
472
- this[WklyPickerInputsPropertyKeys.Locale] ||
525
+ this[WklyPickerInputsPropertyKeys.Locale]() ||
473
526
  this.defaults.locale ||
474
527
  this.defaultLocale;
475
528
  this.direction = /^(ar|he|fa|ur)(-|$)/.test(this.effectiveLocale)
476
529
  ? "rtl"
477
530
  : "ltr";
478
531
  this.adapter =
479
- this[WklyPickerInputsPropertyKeys.CalendarAdapter] ||
532
+ this[WklyPickerInputsPropertyKeys.CalendarAdapter]() ||
480
533
  new WklyGregorianCalendarAdapter(this.effectiveLocale);
481
534
  try {
482
535
  let firstDay;
@@ -484,12 +537,12 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
484
537
  firstDay = getLocaleFirstDayOfWeek(this.effectiveLocale);
485
538
  }
486
539
  catch (_) { }
487
- this.effectiveOffset = resolveWeekOffset(this.effectiveLocale, this[WklyPickerInputsPropertyKeys.WeekOffset], this.defaults.weekOffset, firstDay);
488
- integer(this[WklyPickerInputsPropertyKeys.WeekCacheSize]);
489
- integer(this[WklyPickerInputsPropertyKeys.OverscanWeeks]);
490
- if (this[WklyPickerInputsPropertyKeys.WeekCacheSize] < 0 ||
491
- this[WklyPickerInputsPropertyKeys.OverscanWeeks] < 0 ||
492
- this[WklyPickerInputsPropertyKeys.OverscanWeeks] > 50)
540
+ this.effectiveOffset = resolveWeekOffset(this.effectiveLocale, this[WklyPickerInputsPropertyKeys.WeekOffset](), this.defaults.weekOffset, firstDay);
541
+ integer(this[WklyPickerInputsPropertyKeys.WeekCacheSize]());
542
+ integer(this[WklyPickerInputsPropertyKeys.OverscanWeeks]());
543
+ if (this[WklyPickerInputsPropertyKeys.WeekCacheSize]() < 0 ||
544
+ this[WklyPickerInputsPropertyKeys.OverscanWeeks]() < 0 ||
545
+ this[WklyPickerInputsPropertyKeys.OverscanWeeks]() > 50)
493
546
  throw new RangeError();
494
547
  if (![
495
548
  "datetime",
@@ -498,9 +551,9 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
498
551
  "datetime-range",
499
552
  "date-range",
500
553
  "time-range",
501
- ].includes(this[WklyPickerInputsPropertyKeys.Mode]))
554
+ ].includes(this[WklyPickerInputsPropertyKeys.Mode]()))
502
555
  throw new RangeError();
503
- const preset = this[WklyPickerInputsPropertyKeys.ViewportPreset];
556
+ const preset = this[WklyPickerInputsPropertyKeys.ViewportPreset]();
504
557
  if (preset.kind === "weeks") {
505
558
  integer(preset.visibleWeekCount);
506
559
  if (preset.visibleWeekCount < 1 || preset.visibleWeekCount > 52)
@@ -517,19 +570,19 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
517
570
  }
518
571
  this.generator = createWeekGenerator({
519
572
  weekOffset: this.effectiveOffset,
520
- cacheSize: this[WklyPickerInputsPropertyKeys.WeekCacheSize],
573
+ cacheSize: this[WklyPickerInputsPropertyKeys.WeekCacheSize](),
521
574
  });
522
575
  }
523
576
  catch (_) {
524
- this.configErrors.push(error("configuration-error", this[WklyPickerInputsPropertyKeys.WeekOffset]));
577
+ this.configErrors.push(error("configuration-error", this[WklyPickerInputsPropertyKeys.WeekOffset]()));
525
578
  this.generator = createWeekGenerator();
526
579
  this.effectiveOffset = 0;
527
580
  }
528
581
  this.setSupportedScrollRange();
529
582
  this.effectiveHourCycle =
530
- this[WklyPickerInputsPropertyKeys.HourCycle] === "h12"
583
+ this[WklyPickerInputsPropertyKeys.HourCycle]() === "h12"
531
584
  ? "h12"
532
- : this[WklyPickerInputsPropertyKeys.HourCycle] === "locale"
585
+ : this[WklyPickerInputsPropertyKeys.HourCycle]() === "locale"
533
586
  ? new Intl.DateTimeFormat(this.effectiveLocale, {
534
587
  hour: "numeric",
535
588
  timeZone: "UTC",
@@ -609,22 +662,22 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
609
662
  this.generator.clearCache();
610
663
  }
611
664
  t(key) {
612
- return resolveWklyTranslation(key, this.effectiveLocale, this[WklyPickerInputsPropertyKeys.Translations] ||
665
+ return resolveWklyTranslation(key, this.effectiveLocale, this[WklyPickerInputsPropertyKeys.Translations]() ||
613
666
  this.defaultTranslations, this.strings);
614
667
  }
615
668
  get isRange() {
616
- return this[WklyPickerInputsPropertyKeys.Mode].endsWith("-range");
669
+ return this[WklyPickerInputsPropertyKeys.Mode]().endsWith("-range");
617
670
  }
618
671
  get hasDate() {
619
- return !this[WklyPickerInputsPropertyKeys.Mode].startsWith("time");
672
+ return !this[WklyPickerInputsPropertyKeys.Mode]().startsWith("time");
620
673
  }
621
674
  get hasTime() {
622
- return (this[WklyPickerInputsPropertyKeys.Mode] !== "date" &&
623
- this[WklyPickerInputsPropertyKeys.Mode] !== "date-range");
675
+ return (this[WklyPickerInputsPropertyKeys.Mode]() !== "date" &&
676
+ this[WklyPickerInputsPropertyKeys.Mode]() !== "date-range");
624
677
  }
625
678
  get submitVisible() {
626
679
  return (this.presentation === "transient" &&
627
- (this[WklyPickerInputsPropertyKeys.Mode] !== "date" ||
680
+ (this[WklyPickerInputsPropertyKeys.Mode]() !== "date" ||
628
681
  this.viewMode === "manual"));
629
682
  }
630
683
  get title() {
@@ -637,9 +690,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
637
690
  }
638
691
  }
639
692
  get canSubmit() {
640
- return (!this[WklyPickerInputsPropertyKeys.Disabled] &&
641
- !this.errors.length &&
642
- this.pendingValue !== null);
693
+ return (!this.isDisabled() && !this.errors.length && this.pendingValue !== null);
643
694
  }
644
695
  blank(day) {
645
696
  const safe = Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, day));
@@ -653,7 +704,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
653
704
  }
654
705
  load(value) {
655
706
  this.drafts = [this.blank(this.focused), this.blank(this.focused)];
656
- const validation = validateSelection(value, this, this.adapter);
707
+ const validation = validateSelection(value, unwrapWklyPickerSignalInputs(this), this.adapter);
657
708
  if (value !== null && !validation.length) {
658
709
  const values = typeof value === "string" ? [value] : value;
659
710
  values.forEach((v, i) => {
@@ -679,7 +730,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
679
730
  this.check();
680
731
  }
681
732
  writeValue(value) {
682
- this[WklyPickerInputsPropertyKeys.Value] = value;
733
+ this.formValue.set(value);
683
734
  if (this.initialized) {
684
735
  this.load(value);
685
736
  this.position(this.focused, true);
@@ -692,7 +743,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
692
743
  this.onTouched = fn;
693
744
  }
694
745
  setDisabledState(disabled) {
695
- this[WklyPickerInputsPropertyKeys.Disabled] = disabled;
746
+ this.formDisabled.set(disabled);
696
747
  }
697
748
  validate(_control) {
698
749
  return this.errors.length ? { wkly: this.errors } : null;
@@ -716,13 +767,13 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
716
767
  drafts: this.drafts,
717
768
  configErrors: this.configErrors,
718
769
  adapter: this.adapter,
719
- selection: this,
720
- mode: this[WklyPickerInputsPropertyKeys.Mode],
770
+ selection: unwrapWklyPickerSignalInputs(this),
771
+ mode: this[WklyPickerInputsPropertyKeys.Mode](),
721
772
  isRange: this.isRange,
722
773
  hasDate: this.hasDate,
723
774
  hasTime: this.hasTime,
724
- showSeconds: this[WklyPickerInputsPropertyKeys.ShowSeconds],
725
- required: this[WklyPickerInputsPropertyKeys.Required],
775
+ showSeconds: this[WklyPickerInputsPropertyKeys.ShowSeconds](),
776
+ required: this[WklyPickerInputsPropertyKeys.Required](),
726
777
  });
727
778
  this.pendingValue = result.pendingValue;
728
779
  this.report(result.errors);
@@ -750,7 +801,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
750
801
  }
751
802
  }
752
803
  finish() {
753
- if (this[WklyPickerInputsPropertyKeys.Disabled])
804
+ if (this.isDisabled())
754
805
  return;
755
806
  this.orderDrafts();
756
807
  if (this.viewMode === "manual" && this.hasDate)
@@ -763,9 +814,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
763
814
  if (!this.canSubmit)
764
815
  return;
765
816
  const next = this.pendingValue;
766
- if (JSON.stringify(next) !==
767
- JSON.stringify(this[WklyPickerInputsPropertyKeys.Value])) {
768
- this[WklyPickerInputsPropertyKeys.Value] = next;
817
+ if (JSON.stringify(next) !== JSON.stringify(this.currentValue())) {
818
+ this.formValue.set(next);
769
819
  this.emittedValue = JSON.stringify(next);
770
820
  this.onChange(next);
771
821
  this[WklyPickerOutputsPropertyKeys.ValueChange].emit(next);
@@ -781,14 +831,14 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
781
831
  this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
782
832
  }
783
833
  cancel(reason = "close-button") {
784
- if (this[WklyPickerInputsPropertyKeys.Disabled])
834
+ if (this.isDisabled())
785
835
  return;
786
- this.load(this[WklyPickerInputsPropertyKeys.Value]);
836
+ this.load(this.currentValue());
787
837
  this.onTouched();
788
838
  this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
789
839
  }
790
840
  now() {
791
- if (this[WklyPickerInputsPropertyKeys.Disabled])
841
+ if (this.isDisabled())
792
842
  return;
793
843
  const n = this.clock.now();
794
844
  const day = Math.floor(n.getTime() / 86400000);
@@ -810,9 +860,10 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
810
860
  return {
811
861
  ...this.blank(day),
812
862
  hour: now.getUTCHours(),
813
- minute: Math.floor(now.getUTCMinutes() / this[WklyPickerInputsPropertyKeys.MinuteStep]) * this[WklyPickerInputsPropertyKeys.MinuteStep],
814
- second: this[WklyPickerInputsPropertyKeys.ShowSeconds]
815
- ? Math.floor(now.getUTCSeconds() / this[WklyPickerInputsPropertyKeys.SecondStep]) * this[WklyPickerInputsPropertyKeys.SecondStep]
863
+ minute: Math.floor(now.getUTCMinutes() / this[WklyPickerInputsPropertyKeys.MinuteStep]()) * this[WklyPickerInputsPropertyKeys.MinuteStep](),
864
+ second: this[WklyPickerInputsPropertyKeys.ShowSeconds]()
865
+ ? Math.floor(now.getUTCSeconds() /
866
+ this[WklyPickerInputsPropertyKeys.SecondStep]()) * this[WklyPickerInputsPropertyKeys.SecondStep]()
816
867
  : 0,
817
868
  };
818
869
  }
@@ -823,10 +874,10 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
823
874
  return;
824
875
  let seed = this.drafts.find((draft) => draft.present);
825
876
  if (!seed) {
826
- if (this[WklyPickerInputsPropertyKeys.Value] !== null)
877
+ if (this.currentValue() !== null)
827
878
  return;
828
879
  const now = this.clock.now();
829
- const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay];
880
+ const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay]();
830
881
  const day = initialEpochDay === null
831
882
  ? this.defaults.initialEpochDay === undefined
832
883
  ? Math.floor(now.getTime() / 86400000)
@@ -842,7 +893,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
842
893
  this.changeDetector.markForCheck();
843
894
  }
844
895
  toggleView() {
845
- if (this[WklyPickerInputsPropertyKeys.Disabled] || !this.hasDate)
896
+ if (this.isDisabled() || !this.hasDate)
846
897
  return;
847
898
  this.viewMode = this.viewMode === "calendar" ? "manual" : "calendar";
848
899
  if (this.viewMode === "manual")
@@ -912,19 +963,19 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
912
963
  }
913
964
  }
914
965
  toggleEndView(view) {
915
- if (this[WklyPickerInputsPropertyKeys.Disabled])
966
+ if (this.isDisabled())
916
967
  return;
917
968
  this.endView = view;
918
969
  }
919
970
  days(value) {
920
- if (this[WklyPickerInputsPropertyKeys.Disabled])
971
+ if (this.isDisabled())
921
972
  return;
922
973
  this.manualDateEndpoint = 1;
923
974
  setDraftDayDifference(this.drafts, this.adapter, value);
924
975
  this.check();
925
976
  }
926
977
  field(index, field, value) {
927
- if (this[WklyPickerInputsPropertyKeys.Disabled])
978
+ if (this.isDisabled())
928
979
  return;
929
980
  const draft = this.drafts[index];
930
981
  draft.present = true;
@@ -972,7 +1023,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
972
1023
  : draft.hour;
973
1024
  }
974
1025
  period(index, period) {
975
- if (this[WklyPickerInputsPropertyKeys.Disabled])
1026
+ if (this.isDisabled())
976
1027
  return;
977
1028
  if (period === "24")
978
1029
  this.effectiveHourCycle = "h24";
@@ -1010,10 +1061,10 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1010
1061
  return true;
1011
1062
  try {
1012
1063
  const date = this.adapter.epochDayToDate(day);
1013
- const isDateDisabled = this[WklyPickerInputsPropertyKeys.IsDateDisabled];
1064
+ const isDateDisabled = this[WklyPickerInputsPropertyKeys.IsDateDisabled]();
1014
1065
  if (isDateDisabled &&
1015
1066
  isDateDisabled(day, {
1016
- mode: this[WklyPickerInputsPropertyKeys.Mode],
1067
+ mode: this[WklyPickerInputsPropertyKeys.Mode](),
1017
1068
  endpoint: this.isRange
1018
1069
  ? this.drafts[0]?.present && !this.drafts[1]?.present
1019
1070
  ? "end"
@@ -1022,8 +1073,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1022
1073
  calendarDate: date,
1023
1074
  }))
1024
1075
  return true;
1025
- const min = this[WklyPickerInputsPropertyKeys.Min];
1026
- const max = this[WklyPickerInputsPropertyKeys.Max];
1076
+ const min = this[WklyPickerInputsPropertyKeys.Min](), max = this[WklyPickerInputsPropertyKeys.Max]();
1027
1077
  if (min && day < decodeIso(min).epochDay)
1028
1078
  return true;
1029
1079
  if (max && day > decodeIso(max).epochDay)
@@ -1035,7 +1085,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1035
1085
  }
1036
1086
  }
1037
1087
  select(day) {
1038
- if (this[WklyPickerInputsPropertyKeys.Disabled] || this.dayDisabled(day))
1088
+ if (this.isDisabled() || this.dayDisabled(day))
1039
1089
  return;
1040
1090
  this.focused = day;
1041
1091
  const index = this.isRange && this.drafts[0].present && !this.drafts[1].present ? 1 : 0;
@@ -1048,7 +1098,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1048
1098
  this.renderRows();
1049
1099
  this.finish();
1050
1100
  if (this.presentation === "transient" &&
1051
- this[WklyPickerInputsPropertyKeys.Mode] === "date" &&
1101
+ this[WklyPickerInputsPropertyKeys.Mode]() === "date" &&
1052
1102
  this.viewMode === "calendar")
1053
1103
  this.submit("auto-submit");
1054
1104
  }
@@ -1080,7 +1130,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1080
1130
  position(day, preset = false, options = {}) {
1081
1131
  day = Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, day));
1082
1132
  this.anchorWeek = absoluteWeekOf(day, this.effectiveOffset);
1083
- const viewportPreset = this[WklyPickerInputsPropertyKeys.ViewportPreset];
1133
+ const viewportPreset = this[WklyPickerInputsPropertyKeys.ViewportPreset]();
1084
1134
  this.clipMonth = preset && viewportPreset.kind === "full-month";
1085
1135
  if (preset && viewportPreset.kind !== "weeks") {
1086
1136
  const d = this.adapter.epochDayToDate(day);
@@ -1180,12 +1230,12 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1180
1230
  return this.clampFirstWeek(this.firstWeek + delta) !== this.firstWeek;
1181
1231
  }
1182
1232
  moveWeek(delta) {
1183
- if (!this[WklyPickerInputsPropertyKeys.Disabled])
1233
+ if (!this.isDisabled())
1184
1234
  this.showFirstWeek(this.firstWeek + delta);
1185
1235
  }
1186
1236
  renderRows() {
1187
1237
  // Keep the virtual scroll offset here; row data is shared across Angular versions.
1188
- const overscan = Math.max(0, Math.min(50, this[WklyPickerInputsPropertyKeys.OverscanWeeks] || 0));
1238
+ const overscan = Math.max(0, Math.min(50, this[WklyPickerInputsPropertyKeys.OverscanWeeks]() || 0));
1189
1239
  const start = this.firstWeek - overscan;
1190
1240
  this.paddingTop = (start - this.baseWeek) * this.rowHeight;
1191
1241
  this.rows = createWeekRows({
@@ -1198,8 +1248,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1198
1248
  lastSupportedDay: this.lastSupportedDay,
1199
1249
  clipMonth: this.clipMonth,
1200
1250
  initialMonth: this.initialMonth,
1201
- weekLabelMode: this[WklyPickerInputsPropertyKeys.WeekLabelMode],
1202
- weekLabelFormatter: this[WklyPickerInputsPropertyKeys.WeekLabelFormatter] || null,
1251
+ weekLabelMode: this[WklyPickerInputsPropertyKeys.WeekLabelMode](),
1252
+ weekLabelFormatter: this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]() || null,
1203
1253
  isDayDisabled: (day) => this.dayDisabled(day),
1204
1254
  });
1205
1255
  this[WklyPickerOutputsPropertyKeys.ViewportChange].emit({
@@ -1253,8 +1303,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1253
1303
  (day || fallback)?.focus({ preventScroll: true });
1254
1304
  });
1255
1305
  }
1256
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerComponent, deps: [{ token: LOCALE_ID }, { token: WKLY_CONFIG }, { token: WKLY_CLOCK }, { token: WKLY_LOCALIZATION }, { token: WKLY_TRANSLATIONS }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1257
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WklyDateTimePickerComponent, selector: "wkly-datetime-picker", providers: [
1306
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerComponent, deps: [{ token: LOCALE_ID }, { token: WKLY_CONFIG }, { token: WKLY_CLOCK }, { token: WKLY_LOCALIZATION }, { token: WKLY_TRANSLATIONS }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1307
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WklyDateTimePickerComponent, selector: "wkly-datetime-picker", providers: [
1258
1308
  {
1259
1309
  provide: NG_VALUE_ACCESSOR,
1260
1310
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
@@ -1265,11 +1315,11 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1265
1315
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
1266
1316
  multi: true,
1267
1317
  },
1268
- ], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section\n class=\"wkly\"\n [attr.dir]=\"direction\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Date and time picker'\n \"\n [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]\"\n (focusout)=\"touched()\"\n>\n <header class=\"toolbar\">\n <button\n *ngIf=\"hasDate\"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n (click)=\"toggleView()\"\n >\n {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n </button>\n <span *ngIf=\"hasDate\" class=\"year-control\">{{ title }}</span>\n <span class=\"spacer\"></span\n ><button\n type=\"button\"\n class=\"now\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n (click)=\"now()\"\n >\n {{ t(\"now\") }}\n </button>\n <button\n *ngIf=\"presentation === 'transient'\"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-label]=\"t('close')\"\n (click)=\"cancel()\"\n >\n \u00D7\n </button>\n </header>\n <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n <div\n role=\"grid\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Calendar'\n \"\n [attr.aria-multiselectable]=\"isRange\"\n >\n <div\n role=\"row\"\n class=\"week-head\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] === 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !== 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n role=\"columnheader\"\n aria-label=\"Week\"\n ></span\n ><span *ngFor=\"let day of weekdays\" role=\"columnheader\">{{ day }}</span>\n </div>\n <div\n #scroller\n class=\"week-scroll\"\n [style.height.px]=\"visibleCount * rowHeight\"\n (scroll)=\"scroll($event)\"\n (scrollend)=\"snapWeek()\"\n >\n <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n <div class=\"rows\" [style.top.px]=\"paddingTop\">\n <div\n *ngFor=\"let row of rows; trackBy: trackRow\"\n role=\"row\"\n class=\"week-row\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !==\n 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n role=\"rowheader\"\n class=\"week-number\"\n >{{ row.label }}</span\n >\n <div\n *ngFor=\"\n let cell of row.cells;\n let dayIndex = index;\n trackBy: trackCell\n \"\n role=\"gridcell\"\n [attr.data-weekday-index]=\"dayIndex\"\n [attr.aria-colindex]=\"\n dayIndex +\n (compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n ? 1\n : 2)\n \"\n [attr.aria-selected]=\"selected(cell.epochDay)\"\n [attr.aria-disabled]=\"\n cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n \"\n [class.range]=\"inRange(cell.epochDay)\"\n [class.hidden]=\"cell.hidden\"\n [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n >\n <span [class]=\"'annotation annotation--' + dayIndex\">{{\n cell.annotation\n }}</span>\n <button\n type=\"button\"\n class=\"day\"\n [attr.data-day]=\"cell.epochDay\"\n [attr.aria-label]=\"cell.accessible\"\n [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n [attr.aria-disabled]=\"\n cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n \"\n [attr.tabindex]=\"\n !cell.hidden && cell.epochDay === focused ? 0 : -1\n \"\n [class.selected]=\"selected(cell.epochDay)\"\n [class.today]=\"cell.epochDay === today\"\n (focus)=\"focused = cell.epochDay\"\n (click)=\"select(cell.epochDay)\"\n (keydown)=\"key($event, cell.epochDay)\"\n >\n {{ cell.label }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"week-navigation\">\n <button\n type=\"button\"\n [disabled]=\"\n this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(-1)\n \"\n [attr.aria-label]=\"t('previous')\"\n (click)=\"moveWeek(-1)\"\n >\n \u2191</button\n ><span>{{ title }}</span\n ><button\n type=\"button\"\n [disabled]=\"\n this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(1)\n \"\n [attr.aria-label]=\"t('next')\"\n (click)=\"moveWeek(1)\"\n >\n \u2193\n </button>\n </div>\n </ng-container>\n <ng-container\n *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n >\n <fieldset\n *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n >\n <legend *ngIf=\"isRange\">\n <ng-container\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual';\n else endpointLabel\n \"\n >\n <span class=\"end-view-toggle\">\n <button\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"endView === 'date'\"\n (click)=\"toggleEndView('date')\"\n >\n {{ t(\"end\") }}\n </button>\n <button\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"endView === 'days'\"\n (click)=\"toggleEndView('days')\"\n >\n {{ inDaysLabel }}\n </button>\n </span>\n </ng-container>\n <ng-template #endpointLabel>{{\n t(i === 0 ? \"start\" : \"end\")\n }}</ng-template>\n </legend>\n <div\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n \"\n class=\"date-fields in-days-fields\"\n >\n <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n resultingEndDate\n }}</span>\n <wkly-field\n [label]=\"t('days')\"\n [hideLabel]=\"true\"\n [previousLabel]=\"t('daysPrevious')\"\n [nextLabel]=\"t('daysNext')\"\n [locale]=\"effectiveLocale\"\n [value]=\"inDays\"\n [min]=\"-9999\"\n [max]=\"9999\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"days($event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"\n hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n \"\n class=\"date-fields\"\n >\n <wkly-field\n [label]=\"t('day')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.day\"\n [min]=\"1\"\n [max]=\"31\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'day', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('month')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.month\"\n [min]=\"1\"\n [max]=\"monthCount(draft)\"\n [labels]=\"months(draft)\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'month', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('year')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.year\"\n [min]=\"adapter.supportedYearRange[0]\"\n [max]=\"adapter.supportedYearRange[1]\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'year', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"hasTime\"\n class=\"time-fields\"\n [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n >\n <wkly-field\n [label]=\"t('hour')\"\n [locale]=\"effectiveLocale\"\n [value]=\"displayHour(draft)\"\n [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'hour', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('minute')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.minute\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.MinuteStep] > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.MinuteStep] === 0\n ? this[WklyPickerInputsPropertyKeys.MinuteStep]\n : 1\n \"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'minute', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n [label]=\"t('second')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.second\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.SecondStep] > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.SecondStep] === 0\n ? this[WklyPickerInputsPropertyKeys.SecondStep]\n : 1\n \"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'second', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <div class=\"period\">\n <button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n \"\n (click)=\"period(i, 'am')\"\n >\n {{ t(\"am\") }}</button\n ><button\n type=\"button\"\n [disabled]=\"\n this[WklyPickerInputsPropertyKeys.Disabled] ||\n this[WklyPickerInputsPropertyKeys.HourCycle] !== 'switchable'\n \"\n [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n (click)=\"period(i, '24')\"\n >\n 24</button\n ><button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n \"\n (click)=\"period(i, 'pm')\"\n >\n {{ t(\"pm\") }}\n </button>\n </div>\n </div>\n </fieldset>\n </ng-container>\n <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n </div>\n <footer *ngIf=\"submitVisible\">\n <button\n type=\"button\"\n class=\"confirm\"\n [disabled]=\"!canSubmit\"\n (click)=\"submit()\"\n >\n {{ t(\"confirm\") }}\n </button>\n </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WklyFieldComponent, selector: "wkly-field", inputs: ["value", "label", "hideLabel", "previousLabel", "nextLabel", "min", "max", "step", "locale", "disabled", "invalid", "labels"], outputs: ["valueChange", "complete"] }] });
1318
+ ], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section\n class=\"wkly\"\n [attr.dir]=\"direction\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Date and time picker'\n \"\n [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]()\"\n (focusout)=\"touched()\"\n>\n <header class=\"toolbar\">\n @if (hasDate) {\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n (click)=\"toggleView()\"\n >\n {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n </button>\n }\n @if (hasDate) {\n <span class=\"year-control\">{{ title }}</span>\n }\n <span class=\"spacer\"></span\n ><button\n type=\"button\"\n class=\"now\"\n [disabled]=\"isDisabled()\"\n (click)=\"now()\"\n >\n {{ t(\"now\") }}\n </button>\n @if (presentation === \"transient\") {\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"t('close')\"\n (click)=\"cancel()\"\n >\n \u00D7\n </button>\n }\n </header>\n <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n <div\n role=\"grid\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Calendar'\n \"\n [attr.aria-multiselectable]=\"isRange\"\n >\n <div\n role=\"row\"\n class=\"week-head\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() === 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !== 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n role=\"columnheader\"\n aria-label=\"Week\"\n ></span>\n @for (day of weekdays; track $index) {\n <span role=\"columnheader\">{{ day }}</span>\n }\n </div>\n <div\n #scroller\n class=\"week-scroll\"\n [style.height.px]=\"visibleCount * rowHeight\"\n (scroll)=\"scroll($event)\"\n (scrollend)=\"snapWeek()\"\n >\n <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n <div class=\"rows\" [style.top.px]=\"paddingTop\">\n <div\n *ngFor=\"let row of rows; trackBy: trackRow\"\n role=\"row\"\n class=\"week-row\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !==\n 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n role=\"rowheader\"\n class=\"week-number\"\n >{{ row.label }}</span\n >\n <div\n *ngFor=\"\n let cell of row.cells;\n let dayIndex = index;\n trackBy: trackCell\n \"\n role=\"gridcell\"\n [attr.data-weekday-index]=\"dayIndex\"\n [attr.aria-colindex]=\"\n dayIndex +\n (compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n ? 1\n : 2)\n \"\n [attr.aria-selected]=\"selected(cell.epochDay)\"\n [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n [class.range]=\"inRange(cell.epochDay)\"\n [class.hidden]=\"cell.hidden\"\n [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n >\n <span [class]=\"'annotation annotation--' + dayIndex\">{{\n cell.annotation\n }}</span>\n <button\n type=\"button\"\n class=\"day\"\n [attr.data-day]=\"cell.epochDay\"\n [attr.aria-label]=\"cell.accessible\"\n [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n [attr.tabindex]=\"\n !cell.hidden && cell.epochDay === focused ? 0 : -1\n \"\n [class.selected]=\"selected(cell.epochDay)\"\n [class.today]=\"cell.epochDay === today\"\n (focus)=\"focused = cell.epochDay\"\n (click)=\"select(cell.epochDay)\"\n (keydown)=\"key($event, cell.epochDay)\"\n >\n {{ cell.label }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"week-navigation\">\n <button\n type=\"button\"\n [disabled]=\"isDisabled() || !canMoveWeek(-1)\"\n [attr.aria-label]=\"t('previous')\"\n (click)=\"moveWeek(-1)\"\n >\n \u2191</button\n ><span>{{ title }}</span\n ><button\n type=\"button\"\n [disabled]=\"isDisabled() || !canMoveWeek(1)\"\n [attr.aria-label]=\"t('next')\"\n (click)=\"moveWeek(1)\"\n >\n \u2193\n </button>\n </div>\n </ng-container>\n <ng-container\n *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n >\n <fieldset\n *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n >\n <legend *ngIf=\"isRange\">\n <ng-container\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual';\n else endpointLabel\n \"\n >\n <span class=\"end-view-toggle\">\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"endView === 'date'\"\n (click)=\"toggleEndView('date')\"\n >\n {{ t(\"end\") }}\n </button>\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"endView === 'days'\"\n (click)=\"toggleEndView('days')\"\n >\n {{ inDaysLabel }}\n </button>\n </span>\n </ng-container>\n <ng-template #endpointLabel>{{\n t(i === 0 ? \"start\" : \"end\")\n }}</ng-template>\n </legend>\n <div\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n \"\n class=\"date-fields in-days-fields\"\n >\n <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n resultingEndDate\n }}</span>\n <wkly-field\n [label]=\"t('days')\"\n [hideLabel]=\"true\"\n [previousLabel]=\"t('daysPrevious')\"\n [nextLabel]=\"t('daysNext')\"\n [locale]=\"effectiveLocale\"\n [value]=\"inDays\"\n [min]=\"-9999\"\n [max]=\"9999\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"days($event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"\n hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n \"\n class=\"date-fields\"\n >\n <wkly-field\n [label]=\"t('day')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.day\"\n [min]=\"1\"\n [max]=\"31\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'day', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('month')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.month\"\n [min]=\"1\"\n [max]=\"monthCount(draft)\"\n [labels]=\"months(draft)\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'month', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('year')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.year\"\n [min]=\"adapter.supportedYearRange[0]\"\n [max]=\"adapter.supportedYearRange[1]\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'year', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"hasTime\"\n class=\"time-fields\"\n [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n >\n <wkly-field\n [label]=\"t('hour')\"\n [locale]=\"effectiveLocale\"\n [value]=\"displayHour(draft)\"\n [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'hour', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('minute')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.minute\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.MinuteStep]() > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.MinuteStep]() === 0\n ? this[WklyPickerInputsPropertyKeys.MinuteStep]()\n : 1\n \"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'minute', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n [label]=\"t('second')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.second\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.SecondStep]() > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.SecondStep]() === 0\n ? this[WklyPickerInputsPropertyKeys.SecondStep]()\n : 1\n \"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'second', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <div class=\"period\">\n <button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n \"\n (click)=\"period(i, 'am')\"\n >\n {{ t(\"am\") }}</button\n ><button\n type=\"button\"\n [disabled]=\"\n isDisabled() ||\n this[WklyPickerInputsPropertyKeys.HourCycle]() !== 'switchable'\n \"\n [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n (click)=\"period(i, '24')\"\n >\n 24</button\n ><button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n \"\n (click)=\"period(i, 'pm')\"\n >\n {{ t(\"pm\") }}\n </button>\n </div>\n </div>\n </fieldset>\n </ng-container>\n <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n </div>\n <footer *ngIf=\"submitVisible\">\n <button\n type=\"button\"\n class=\"confirm\"\n [disabled]=\"!canSubmit\"\n (click)=\"submit()\"\n >\n {{ t(\"confirm\") }}\n </button>\n </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WklyFieldComponent, selector: "wkly-field", inputs: ["value", "label", "hideLabel", "previousLabel", "nextLabel", "min", "max", "step", "locale", "disabled", "invalid", "labels"], outputs: ["valueChange", "complete"] }] });
1269
1319
  }
1270
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
1320
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
1271
1321
  type: Component,
1272
- args: [{ selector: "wkly-datetime-picker", providers: [
1322
+ args: [{ selector: "wkly-datetime-picker", standalone: false, providers: [
1273
1323
  {
1274
1324
  provide: NG_VALUE_ACCESSOR,
1275
1325
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
@@ -1280,7 +1330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1280
1330
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
1281
1331
  multi: true,
1282
1332
  },
1283
- ], template: "<section\n class=\"wkly\"\n [attr.dir]=\"direction\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Date and time picker'\n \"\n [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]\"\n (focusout)=\"touched()\"\n>\n <header class=\"toolbar\">\n <button\n *ngIf=\"hasDate\"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n (click)=\"toggleView()\"\n >\n {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n </button>\n <span *ngIf=\"hasDate\" class=\"year-control\">{{ title }}</span>\n <span class=\"spacer\"></span\n ><button\n type=\"button\"\n class=\"now\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n (click)=\"now()\"\n >\n {{ t(\"now\") }}\n </button>\n <button\n *ngIf=\"presentation === 'transient'\"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-label]=\"t('close')\"\n (click)=\"cancel()\"\n >\n \u00D7\n </button>\n </header>\n <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n <div\n role=\"grid\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Calendar'\n \"\n [attr.aria-multiselectable]=\"isRange\"\n >\n <div\n role=\"row\"\n class=\"week-head\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] === 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !== 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n role=\"columnheader\"\n aria-label=\"Week\"\n ></span\n ><span *ngFor=\"let day of weekdays\" role=\"columnheader\">{{ day }}</span>\n </div>\n <div\n #scroller\n class=\"week-scroll\"\n [style.height.px]=\"visibleCount * rowHeight\"\n (scroll)=\"scroll($event)\"\n (scrollend)=\"snapWeek()\"\n >\n <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n <div class=\"rows\" [style.top.px]=\"paddingTop\">\n <div\n *ngFor=\"let row of rows; trackBy: trackRow\"\n role=\"row\"\n class=\"week-row\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !==\n 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n \"\n role=\"rowheader\"\n class=\"week-number\"\n >{{ row.label }}</span\n >\n <div\n *ngFor=\"\n let cell of row.cells;\n let dayIndex = index;\n trackBy: trackCell\n \"\n role=\"gridcell\"\n [attr.data-weekday-index]=\"dayIndex\"\n [attr.aria-colindex]=\"\n dayIndex +\n (compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n ? 1\n : 2)\n \"\n [attr.aria-selected]=\"selected(cell.epochDay)\"\n [attr.aria-disabled]=\"\n cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n \"\n [class.range]=\"inRange(cell.epochDay)\"\n [class.hidden]=\"cell.hidden\"\n [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n >\n <span [class]=\"'annotation annotation--' + dayIndex\">{{\n cell.annotation\n }}</span>\n <button\n type=\"button\"\n class=\"day\"\n [attr.data-day]=\"cell.epochDay\"\n [attr.aria-label]=\"cell.accessible\"\n [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n [attr.aria-disabled]=\"\n cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n \"\n [attr.tabindex]=\"\n !cell.hidden && cell.epochDay === focused ? 0 : -1\n \"\n [class.selected]=\"selected(cell.epochDay)\"\n [class.today]=\"cell.epochDay === today\"\n (focus)=\"focused = cell.epochDay\"\n (click)=\"select(cell.epochDay)\"\n (keydown)=\"key($event, cell.epochDay)\"\n >\n {{ cell.label }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"week-navigation\">\n <button\n type=\"button\"\n [disabled]=\"\n this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(-1)\n \"\n [attr.aria-label]=\"t('previous')\"\n (click)=\"moveWeek(-1)\"\n >\n \u2191</button\n ><span>{{ title }}</span\n ><button\n type=\"button\"\n [disabled]=\"\n this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(1)\n \"\n [attr.aria-label]=\"t('next')\"\n (click)=\"moveWeek(1)\"\n >\n \u2193\n </button>\n </div>\n </ng-container>\n <ng-container\n *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n >\n <fieldset\n *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n >\n <legend *ngIf=\"isRange\">\n <ng-container\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual';\n else endpointLabel\n \"\n >\n <span class=\"end-view-toggle\">\n <button\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"endView === 'date'\"\n (click)=\"toggleEndView('date')\"\n >\n {{ t(\"end\") }}\n </button>\n <button\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"endView === 'days'\"\n (click)=\"toggleEndView('days')\"\n >\n {{ inDaysLabel }}\n </button>\n </span>\n </ng-container>\n <ng-template #endpointLabel>{{\n t(i === 0 ? \"start\" : \"end\")\n }}</ng-template>\n </legend>\n <div\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n \"\n class=\"date-fields in-days-fields\"\n >\n <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n resultingEndDate\n }}</span>\n <wkly-field\n [label]=\"t('days')\"\n [hideLabel]=\"true\"\n [previousLabel]=\"t('daysPrevious')\"\n [nextLabel]=\"t('daysNext')\"\n [locale]=\"effectiveLocale\"\n [value]=\"inDays\"\n [min]=\"-9999\"\n [max]=\"9999\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"days($event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"\n hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n \"\n class=\"date-fields\"\n >\n <wkly-field\n [label]=\"t('day')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.day\"\n [min]=\"1\"\n [max]=\"31\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'day', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('month')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.month\"\n [min]=\"1\"\n [max]=\"monthCount(draft)\"\n [labels]=\"months(draft)\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'month', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('year')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.year\"\n [min]=\"adapter.supportedYearRange[0]\"\n [max]=\"adapter.supportedYearRange[1]\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'year', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"hasTime\"\n class=\"time-fields\"\n [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n >\n <wkly-field\n [label]=\"t('hour')\"\n [locale]=\"effectiveLocale\"\n [value]=\"displayHour(draft)\"\n [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'hour', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('minute')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.minute\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.MinuteStep] > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.MinuteStep] === 0\n ? this[WklyPickerInputsPropertyKeys.MinuteStep]\n : 1\n \"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'minute', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n [label]=\"t('second')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.second\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.SecondStep] > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.SecondStep] === 0\n ? this[WklyPickerInputsPropertyKeys.SecondStep]\n : 1\n \"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'second', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <div class=\"period\">\n <button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n \"\n (click)=\"period(i, 'am')\"\n >\n {{ t(\"am\") }}</button\n ><button\n type=\"button\"\n [disabled]=\"\n this[WklyPickerInputsPropertyKeys.Disabled] ||\n this[WklyPickerInputsPropertyKeys.HourCycle] !== 'switchable'\n \"\n [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n (click)=\"period(i, '24')\"\n >\n 24</button\n ><button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n \"\n (click)=\"period(i, 'pm')\"\n >\n {{ t(\"pm\") }}\n </button>\n </div>\n </div>\n </fieldset>\n </ng-container>\n <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n </div>\n <footer *ngIf=\"submitVisible\">\n <button\n type=\"button\"\n class=\"confirm\"\n [disabled]=\"!canSubmit\"\n (click)=\"submit()\"\n >\n {{ t(\"confirm\") }}\n </button>\n </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"] }]
1333
+ ], template: "<section\n class=\"wkly\"\n [attr.dir]=\"direction\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Date and time picker'\n \"\n [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]()\"\n (focusout)=\"touched()\"\n>\n <header class=\"toolbar\">\n @if (hasDate) {\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n (click)=\"toggleView()\"\n >\n {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n </button>\n }\n @if (hasDate) {\n <span class=\"year-control\">{{ title }}</span>\n }\n <span class=\"spacer\"></span\n ><button\n type=\"button\"\n class=\"now\"\n [disabled]=\"isDisabled()\"\n (click)=\"now()\"\n >\n {{ t(\"now\") }}\n </button>\n @if (presentation === \"transient\") {\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"t('close')\"\n (click)=\"cancel()\"\n >\n \u00D7\n </button>\n }\n </header>\n <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n <div\n role=\"grid\"\n [attr.aria-label]=\"\n this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Calendar'\n \"\n [attr.aria-multiselectable]=\"isRange\"\n >\n <div\n role=\"row\"\n class=\"week-head\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() === 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !== 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n role=\"columnheader\"\n aria-label=\"Week\"\n ></span>\n @for (day of weekdays; track $index) {\n <span role=\"columnheader\">{{ day }}</span>\n }\n </div>\n <div\n #scroller\n class=\"week-scroll\"\n [style.height.px]=\"visibleCount * rowHeight\"\n (scroll)=\"scroll($event)\"\n (scrollend)=\"snapWeek()\"\n >\n <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n <div class=\"rows\" [style.top.px]=\"paddingTop\">\n <div\n *ngFor=\"let row of rows; trackBy: trackRow\"\n role=\"row\"\n class=\"week-row\"\n [class.no-label]=\"\n compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n >\n <span\n *ngIf=\"\n !compact &&\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !==\n 'hidden' ||\n this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n \"\n role=\"rowheader\"\n class=\"week-number\"\n >{{ row.label }}</span\n >\n <div\n *ngFor=\"\n let cell of row.cells;\n let dayIndex = index;\n trackBy: trackCell\n \"\n role=\"gridcell\"\n [attr.data-weekday-index]=\"dayIndex\"\n [attr.aria-colindex]=\"\n dayIndex +\n (compact ||\n (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n 'hidden' &&\n !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n ? 1\n : 2)\n \"\n [attr.aria-selected]=\"selected(cell.epochDay)\"\n [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n [class.range]=\"inRange(cell.epochDay)\"\n [class.hidden]=\"cell.hidden\"\n [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n >\n <span [class]=\"'annotation annotation--' + dayIndex\">{{\n cell.annotation\n }}</span>\n <button\n type=\"button\"\n class=\"day\"\n [attr.data-day]=\"cell.epochDay\"\n [attr.aria-label]=\"cell.accessible\"\n [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n [attr.tabindex]=\"\n !cell.hidden && cell.epochDay === focused ? 0 : -1\n \"\n [class.selected]=\"selected(cell.epochDay)\"\n [class.today]=\"cell.epochDay === today\"\n (focus)=\"focused = cell.epochDay\"\n (click)=\"select(cell.epochDay)\"\n (keydown)=\"key($event, cell.epochDay)\"\n >\n {{ cell.label }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"week-navigation\">\n <button\n type=\"button\"\n [disabled]=\"isDisabled() || !canMoveWeek(-1)\"\n [attr.aria-label]=\"t('previous')\"\n (click)=\"moveWeek(-1)\"\n >\n \u2191</button\n ><span>{{ title }}</span\n ><button\n type=\"button\"\n [disabled]=\"isDisabled() || !canMoveWeek(1)\"\n [attr.aria-label]=\"t('next')\"\n (click)=\"moveWeek(1)\"\n >\n \u2193\n </button>\n </div>\n </ng-container>\n <ng-container\n *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n >\n <fieldset\n *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n >\n <legend *ngIf=\"isRange\">\n <ng-container\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual';\n else endpointLabel\n \"\n >\n <span class=\"end-view-toggle\">\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"endView === 'date'\"\n (click)=\"toggleEndView('date')\"\n >\n {{ t(\"end\") }}\n </button>\n <button\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"endView === 'days'\"\n (click)=\"toggleEndView('days')\"\n >\n {{ inDaysLabel }}\n </button>\n </span>\n </ng-container>\n <ng-template #endpointLabel>{{\n t(i === 0 ? \"start\" : \"end\")\n }}</ng-template>\n </legend>\n <div\n *ngIf=\"\n i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n \"\n class=\"date-fields in-days-fields\"\n >\n <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n resultingEndDate\n }}</span>\n <wkly-field\n [label]=\"t('days')\"\n [hideLabel]=\"true\"\n [previousLabel]=\"t('daysPrevious')\"\n [nextLabel]=\"t('daysNext')\"\n [locale]=\"effectiveLocale\"\n [value]=\"inDays\"\n [min]=\"-9999\"\n [max]=\"9999\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"days($event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"\n hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n \"\n class=\"date-fields\"\n >\n <wkly-field\n [label]=\"t('day')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.day\"\n [min]=\"1\"\n [max]=\"31\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'day', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('month')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.month\"\n [min]=\"1\"\n [max]=\"monthCount(draft)\"\n [labels]=\"months(draft)\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'month', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('year')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.date.year\"\n [min]=\"adapter.supportedYearRange[0]\"\n [max]=\"adapter.supportedYearRange[1]\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'year', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n </div>\n <div\n *ngIf=\"hasTime\"\n class=\"time-fields\"\n [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n >\n <wkly-field\n [label]=\"t('hour')\"\n [locale]=\"effectiveLocale\"\n [value]=\"displayHour(draft)\"\n [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'hour', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n [label]=\"t('minute')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.minute\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.MinuteStep]() > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.MinuteStep]() === 0\n ? this[WklyPickerInputsPropertyKeys.MinuteStep]()\n : 1\n \"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'minute', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <wkly-field\n *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n [label]=\"t('second')\"\n [locale]=\"effectiveLocale\"\n [value]=\"draft.second\"\n [max]=\"59\"\n [step]=\"\n this[WklyPickerInputsPropertyKeys.SecondStep]() > 0 &&\n 60 % this[WklyPickerInputsPropertyKeys.SecondStep]() === 0\n ? this[WklyPickerInputsPropertyKeys.SecondStep]()\n : 1\n \"\n [disabled]=\"isDisabled()\"\n [invalid]=\"!!errors.length\"\n (valueChange)=\"field(i, 'second', $event)\"\n (complete)=\"finish()\"\n ></wkly-field>\n <div class=\"period\">\n <button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n \"\n (click)=\"period(i, 'am')\"\n >\n {{ t(\"am\") }}</button\n ><button\n type=\"button\"\n [disabled]=\"\n isDisabled() ||\n this[WklyPickerInputsPropertyKeys.HourCycle]() !== 'switchable'\n \"\n [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n (click)=\"period(i, '24')\"\n >\n 24</button\n ><button\n *ngIf=\"\n effectiveHourCycle === 'h12' ||\n this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n \"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.aria-pressed]=\"\n effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n \"\n (click)=\"period(i, 'pm')\"\n >\n {{ t(\"pm\") }}\n </button>\n </div>\n </div>\n </fieldset>\n </ng-container>\n <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n </div>\n <footer *ngIf=\"submitVisible\">\n <button\n type=\"button\"\n class=\"confirm\"\n [disabled]=\"!canSubmit\"\n (click)=\"submit()\"\n >\n {{ t(\"confirm\") }}\n </button>\n </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"] }]
1284
1334
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1285
1335
  type: Inject,
1286
1336
  args: [LOCALE_ID]
@@ -1306,14 +1356,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1306
1356
 
1307
1357
  /** Native-dialog factory. Browser resources are allocated only by open(). */
1308
1358
  class WklyDateTimePickerDialogService {
1309
- resolver;
1310
- injector;
1359
+ environmentInjector;
1311
1360
  app;
1312
1361
  document;
1313
1362
  platform;
1314
- constructor(resolver, injector, app, document, platform) {
1315
- this.resolver = resolver;
1316
- this.injector = injector;
1363
+ constructor(environmentInjector, app, document, platform) {
1364
+ this.environmentInjector = environmentInjector;
1317
1365
  this.app = app;
1318
1366
  this.document = document;
1319
1367
  this.platform = platform;
@@ -1332,9 +1380,10 @@ class WklyDateTimePickerDialogService {
1332
1380
  maxHeight: "94vh",
1333
1381
  background: "transparent",
1334
1382
  });
1335
- const component = this.resolver
1336
- .resolveComponentFactory(WklyDateTimePickerComponent)
1337
- .create(injector || this.injector);
1383
+ const component = createComponent(WklyDateTimePickerComponent, {
1384
+ environmentInjector: this.environmentInjector,
1385
+ elementInjector: injector,
1386
+ });
1338
1387
  component.instance.presentation = "transient";
1339
1388
  dialog.appendChild(component.location.nativeElement);
1340
1389
  this.document.body.appendChild(dialog);
@@ -1386,13 +1435,13 @@ class WklyDateTimePickerDialogService {
1386
1435
  },
1387
1436
  };
1388
1437
  }
1389
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
1390
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
1438
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
1439
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
1391
1440
  }
1392
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
1441
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
1393
1442
  type: Injectable,
1394
1443
  args: [{ providedIn: "root" }]
1395
- }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
1444
+ }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
1396
1445
  type: Inject,
1397
1446
  args: [DOCUMENT]
1398
1447
  }] }, { type: Object, decorators: [{
@@ -1408,19 +1457,49 @@ class WklyTriggerBase extends WklyPickerInputs {
1408
1457
  change = () => { };
1409
1458
  touched = () => { };
1410
1459
  validation = () => { };
1460
+ formValue = signal(undefined);
1461
+ formDisabled = signal(false);
1462
+ previousInputs;
1463
+ currentValue() {
1464
+ return this.formValue() === undefined
1465
+ ? this[WklyPickerInputsPropertyKeys.Value]()
1466
+ : this.formValue();
1467
+ }
1468
+ isDisabled() {
1469
+ return this[WklyPickerInputsPropertyKeys.Disabled]() || this.formDisabled();
1470
+ }
1411
1471
  constructor(element) {
1412
1472
  super();
1413
1473
  this.element = element;
1474
+ effect(() => {
1475
+ const inputs = unwrapWklyPickerSignalInputs(this);
1476
+ const previous = this.previousInputs;
1477
+ this.previousInputs = inputs;
1478
+ untracked(() => {
1479
+ if (previous &&
1480
+ !Object.is(previous[WklyPickerInputsPropertyKeys.Value], inputs[WklyPickerInputsPropertyKeys.Value]))
1481
+ this.formValue.set(undefined);
1482
+ if (!previous ||
1483
+ Object.keys(inputs).some((key) => !Object.is(previous[key], inputs[key]))) {
1484
+ this.checkValue();
1485
+ this.display();
1486
+ if (this.ref) {
1487
+ this.copy();
1488
+ this.ref.component.changeDetectorRef.detectChanges();
1489
+ }
1490
+ }
1491
+ });
1492
+ });
1414
1493
  }
1415
1494
  open() {
1416
- if (this[WklyPickerInputsPropertyKeys.Disabled] || this.ref)
1495
+ if (this.isDisabled() || this.ref)
1417
1496
  return;
1418
1497
  this.ref = this.create();
1419
1498
  const picker = this.ref.component.instance;
1420
1499
  this.copy();
1421
1500
  this.subscriptions = [
1422
1501
  picker[WklyPickerOutputsPropertyKeys.ValueChange].subscribe((value) => {
1423
- this[WklyPickerInputsPropertyKeys.Value] = value;
1502
+ this.formValue.set(value);
1424
1503
  this.change(value);
1425
1504
  this[WklyPickerOutputsPropertyKeys.ValueChange].emit(value);
1426
1505
  this.display();
@@ -1460,55 +1539,43 @@ class WklyTriggerBase extends WklyPickerInputs {
1460
1539
  this.touched();
1461
1540
  this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
1462
1541
  }
1463
- ngOnChanges() {
1464
- [
1465
- WklyPickerInputsPropertyKeys.ShowSeconds,
1466
- WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled,
1467
- WklyPickerInputsPropertyKeys.Required,
1468
- WklyPickerInputsPropertyKeys.Disabled,
1469
- WklyPickerInputsPropertyKeys.CloseOnBackdrop,
1470
- ].forEach((key) => (this[key] = coerceBoolean(this[key])));
1471
- this.checkValue();
1472
- this.display();
1473
- if (this.ref) {
1474
- this.copy();
1475
- this.ref.component.instance.ngOnChanges({
1476
- [WklyPickerInputsPropertyKeys.Value]: true,
1477
- });
1478
- this.ref.component.changeDetectorRef.detectChanges();
1479
- }
1480
- }
1481
1542
  ngOnDestroy() {
1482
1543
  this.close();
1483
1544
  }
1484
1545
  copy() {
1485
- if (this.ref)
1486
- for (const name of INPUT_NAMES)
1487
- this.ref.component.instance[name] = this[name];
1546
+ if (!this.ref)
1547
+ return;
1548
+ const inputs = unwrapWklyPickerSignalInputs(this);
1549
+ for (const name of Object.values(WklyPickerInputsPropertyKeys))
1550
+ this.ref.component.setInput(name, name === WklyPickerInputsPropertyKeys.Value
1551
+ ? this.currentValue()
1552
+ : name === WklyPickerInputsPropertyKeys.Disabled
1553
+ ? this.isDisabled()
1554
+ : inputs[name]);
1488
1555
  }
1489
1556
  display() {
1490
1557
  const host = this.element.nativeElement;
1491
1558
  if (host.tagName === "INPUT") {
1492
1559
  host.readOnly = true;
1493
- const value = this[WklyPickerInputsPropertyKeys.Value];
1560
+ const value = this.currentValue();
1494
1561
  host.value =
1495
1562
  value === null
1496
1563
  ? ""
1497
1564
  : typeof value === "string"
1498
1565
  ? value
1499
1566
  : value.join(" — ");
1500
- host.disabled = this[WklyPickerInputsPropertyKeys.Disabled];
1567
+ host.disabled = this.isDisabled();
1501
1568
  host.setAttribute("aria-haspopup", "dialog");
1502
1569
  }
1503
1570
  }
1504
1571
  checkValue() {
1505
- this.errors = validateSelection(this[WklyPickerInputsPropertyKeys.Value], this, this[WklyPickerInputsPropertyKeys.CalendarAdapter] ||
1506
- new WklyGregorianCalendarAdapter(this[WklyPickerInputsPropertyKeys.Locale] || "en-US"));
1572
+ this.errors = validateSelection(this.currentValue(), unwrapWklyPickerSignalInputs(this), this[WklyPickerInputsPropertyKeys.CalendarAdapter]() ||
1573
+ new WklyGregorianCalendarAdapter(this[WklyPickerInputsPropertyKeys.Locale]() || "en-US"));
1507
1574
  this[WklyPickerOutputsPropertyKeys.ValidationChange].emit(this.errors);
1508
1575
  this.validation();
1509
1576
  }
1510
1577
  writeValue(value) {
1511
- this[WklyPickerInputsPropertyKeys.Value] = value;
1578
+ this.formValue.set(value);
1512
1579
  this.checkValue();
1513
1580
  this.display();
1514
1581
  if (this.ref)
@@ -1521,7 +1588,7 @@ class WklyTriggerBase extends WklyPickerInputs {
1521
1588
  this.touched = fn;
1522
1589
  }
1523
1590
  setDisabledState(value) {
1524
- this[WklyPickerInputsPropertyKeys.Disabled] = value;
1591
+ this.formDisabled.set(value);
1525
1592
  this.display();
1526
1593
  if (this.ref)
1527
1594
  this.ref.component.instance.setDisabledState(value);
@@ -1548,10 +1615,10 @@ class WklyTriggerBase extends WklyPickerInputs {
1548
1615
  this.open();
1549
1616
  this.ref?.component.instance.scrollToValue(value, options);
1550
1617
  }
1551
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1552
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: WklyTriggerBase, host: { listeners: { "click": "open()", "keydown": "key($event)", "blur": "blur()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
1618
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1619
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: WklyTriggerBase, host: { listeners: { "click": "open()", "keydown": "key($event)", "blur": "blur()" } }, usesInheritance: true, ngImport: i0 });
1553
1620
  }
1554
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyTriggerBase, decorators: [{
1621
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyTriggerBase, decorators: [{
1555
1622
  type: Directive
1556
1623
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { open: [{
1557
1624
  type: HostListener,
@@ -1572,10 +1639,10 @@ class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
1572
1639
  this.triggerInjector = triggerInjector;
1573
1640
  }
1574
1641
  create() {
1575
- return this.service.open(this.element.nativeElement, (reason) => this.close(reason), this[WklyPickerInputsPropertyKeys.CloseOnBackdrop], this.triggerInjector);
1642
+ return this.service.open(this.element.nativeElement, (reason) => this.close(reason), this[WklyPickerInputsPropertyKeys.CloseOnBackdrop](), this.triggerInjector);
1576
1643
  }
1577
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogDirective, deps: [{ token: i0.ElementRef }, { token: WklyDateTimePickerDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
1578
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: WklyDateTimePickerDialogDirective, selector: "[wklyDateTimePickerDialog]", providers: [
1644
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogDirective, deps: [{ token: i0.ElementRef }, { token: WklyDateTimePickerDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
1645
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: WklyDateTimePickerDialogDirective, selector: "[wklyDateTimePickerDialog]", providers: [
1579
1646
  {
1580
1647
  provide: NG_VALUE_ACCESSOR,
1581
1648
  useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
@@ -1588,10 +1655,11 @@ class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
1588
1655
  },
1589
1656
  ], exportAs: ["wklyDialog"], usesInheritance: true, ngImport: i0 });
1590
1657
  }
1591
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
1658
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
1592
1659
  type: Directive,
1593
1660
  args: [{
1594
1661
  selector: "[wklyDateTimePickerDialog]",
1662
+ standalone: false,
1595
1663
  exportAs: "wklyDialog",
1596
1664
  providers: [
1597
1665
  {
@@ -1609,13 +1677,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1609
1677
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WklyDateTimePickerDialogService }, { type: i0.Injector }] });
1610
1678
 
1611
1679
  class WklyDateTimePickerModule {
1612
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1613
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
1680
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1681
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
1614
1682
  WklyDateTimePickerDialogDirective,
1615
1683
  WklyFieldComponent], imports: [CommonModule], exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective] });
1616
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
1684
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
1617
1685
  }
1618
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
1686
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
1619
1687
  type: NgModule,
1620
1688
  args: [{
1621
1689
  imports: [CommonModule],
@@ -1632,5 +1700,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1632
1700
  * Generated bundle index. Do not edit.
1633
1701
  */
1634
1702
 
1635
- export { WKLY_CLOCK, WKLY_CONFIG, WKLY_LOCALIZATION, WKLY_TRANSLATIONS, WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective, WklyDateTimePickerDialogService, WklyDateTimePickerModule, WklyFieldComponent, WklyPickerInputs, WklyTriggerBase };
1703
+ export { WKLY_CLOCK, WKLY_CONFIG, WKLY_LOCALIZATION, WKLY_TRANSLATIONS, WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective, WklyDateTimePickerDialogService, WklyDateTimePickerModule, WklyFieldComponent, WklyPickerInputs, WklyTriggerBase, unwrapWklyPickerSignalInputs };
1636
1704
  //# sourceMappingURL=wkly-datetime-picker.mjs.map