@wkly/datetime-picker 17.1.0 → 18.1.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 +113 -102
  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 +303 -235
  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}@media (hover: hover) and (pointer: fine){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}@media (hover: hover) and (pointer: fine){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}@media (hover: hover) and (pointer: fine){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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}}\n"] }]
320
359
  }], propDecorators: { value: [{
321
360
  type: Input
322
361
  }], label: [{
@@ -400,6 +439,17 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
400
439
  pendingValue = null;
401
440
  emittedValue = null;
402
441
  manualDateEndpoint = 0;
442
+ formValue = signal(undefined);
443
+ formDisabled = signal(false);
444
+ previousInputs;
445
+ currentValue() {
446
+ return this.formValue() === undefined
447
+ ? this[WklyPickerInputsPropertyKeys.Value]()
448
+ : this.formValue();
449
+ }
450
+ isDisabled() {
451
+ return this[WklyPickerInputsPropertyKeys.Disabled]() || this.formDisabled();
452
+ }
403
453
  constructor(defaultLocale, defaults, clock, strings, defaultTranslations, platform, host, changeDetector) {
404
454
  super();
405
455
  this.defaultLocale = defaultLocale;
@@ -410,41 +460,51 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
410
460
  this.host = host;
411
461
  this.changeDetector = changeDetector;
412
462
  this.browser = isPlatformBrowser(platform);
463
+ effect(() => {
464
+ const inputs = unwrapWklyPickerSignalInputs(this);
465
+ const previous = this.previousInputs;
466
+ this.previousInputs = inputs;
467
+ if (!previous || !this.initialized)
468
+ return;
469
+ const changed = (key) => !Object.is(previous[key], inputs[key]);
470
+ if (!Object.keys(inputs).some((key) => changed(key)))
471
+ return;
472
+ untracked(() => {
473
+ if (changed(WklyPickerInputsPropertyKeys.Value))
474
+ this.formValue.set(undefined);
475
+ if (changed(WklyPickerInputsPropertyKeys.Value) &&
476
+ this.emittedValue === JSON.stringify(this.currentValue()) &&
477
+ Object.keys(inputs).every((key) => key === WklyPickerInputsPropertyKeys.Value ||
478
+ !changed(key))) {
479
+ this.emittedValue = null;
480
+ return;
481
+ }
482
+ const focus = this.focused;
483
+ this.configure();
484
+ if (changed(WklyPickerInputsPropertyKeys.Value) ||
485
+ changed(WklyPickerInputsPropertyKeys.Mode) ||
486
+ changed(WklyPickerInputsPropertyKeys.CalendarAdapter)) {
487
+ this.load(this.currentValue());
488
+ this.position(this.focused, true);
489
+ }
490
+ else {
491
+ this.check();
492
+ if (changed(WklyPickerInputsPropertyKeys.ViewportPreset))
493
+ this.position(focus, true);
494
+ else
495
+ this.scrollToEpochDay(focus);
496
+ }
497
+ });
498
+ });
413
499
  }
414
500
  ngOnInit() {
415
501
  this.initialize();
416
502
  }
417
- ngOnChanges(changes) {
418
- if (this.initialized) {
419
- if (Object.keys(changes).length === 1 &&
420
- changes[WklyPickerInputsPropertyKeys.Value] &&
421
- this.emittedValue ===
422
- JSON.stringify(this[WklyPickerInputsPropertyKeys.Value])) {
423
- this.emittedValue = null;
424
- return;
425
- }
426
- const focus = this.focused;
427
- this.configure();
428
- if (changes[WklyPickerInputsPropertyKeys.Value] ||
429
- changes[WklyPickerInputsPropertyKeys.Mode] ||
430
- changes[WklyPickerInputsPropertyKeys.CalendarAdapter]) {
431
- this.load(this[WklyPickerInputsPropertyKeys.Value]);
432
- this.position(this.focused, true);
433
- }
434
- else {
435
- this.check();
436
- if (changes[WklyPickerInputsPropertyKeys.ViewportPreset])
437
- this.position(focus, true);
438
- else
439
- this.scrollToEpochDay(focus);
440
- }
441
- }
442
- }
443
503
  initialize() {
444
504
  if (this.initialized)
445
505
  return;
446
506
  this.configure();
447
- const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay];
507
+ const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay]();
448
508
  this.today = this.browser
449
509
  ? Math.floor(this.clock.now().getTime() / 86400000)
450
510
  : initialEpochDay === null
@@ -456,28 +516,21 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
456
516
  ? this.today
457
517
  : this.defaults.initialEpochDay
458
518
  : initialEpochDay;
459
- this.load(this[WklyPickerInputsPropertyKeys.Value]);
519
+ this.load(this.currentValue());
460
520
  this.initialized = true;
461
521
  this.position(this.focused, true);
462
522
  }
463
523
  configure() {
464
524
  this.configErrors = [];
465
- [
466
- WklyPickerInputsPropertyKeys.ShowSeconds,
467
- WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled,
468
- WklyPickerInputsPropertyKeys.Required,
469
- WklyPickerInputsPropertyKeys.Disabled,
470
- WklyPickerInputsPropertyKeys.CloseOnBackdrop,
471
- ].forEach((key) => (this[key] = coerceBoolean(this[key])));
472
525
  this.effectiveLocale =
473
- this[WklyPickerInputsPropertyKeys.Locale] ||
526
+ this[WklyPickerInputsPropertyKeys.Locale]() ||
474
527
  this.defaults.locale ||
475
528
  this.defaultLocale;
476
529
  this.direction = /^(ar|he|fa|ur)(-|$)/.test(this.effectiveLocale)
477
530
  ? "rtl"
478
531
  : "ltr";
479
532
  this.adapter =
480
- this[WklyPickerInputsPropertyKeys.CalendarAdapter] ||
533
+ this[WklyPickerInputsPropertyKeys.CalendarAdapter]() ||
481
534
  new WklyGregorianCalendarAdapter(this.effectiveLocale);
482
535
  try {
483
536
  let firstDay;
@@ -485,12 +538,12 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
485
538
  firstDay = getLocaleFirstDayOfWeek(this.effectiveLocale);
486
539
  }
487
540
  catch (_) { }
488
- this.effectiveOffset = resolveWeekOffset(this.effectiveLocale, this[WklyPickerInputsPropertyKeys.WeekOffset], this.defaults.weekOffset, firstDay);
489
- integer(this[WklyPickerInputsPropertyKeys.WeekCacheSize]);
490
- integer(this[WklyPickerInputsPropertyKeys.OverscanWeeks]);
491
- if (this[WklyPickerInputsPropertyKeys.WeekCacheSize] < 0 ||
492
- this[WklyPickerInputsPropertyKeys.OverscanWeeks] < 0 ||
493
- this[WklyPickerInputsPropertyKeys.OverscanWeeks] > 50)
541
+ this.effectiveOffset = resolveWeekOffset(this.effectiveLocale, this[WklyPickerInputsPropertyKeys.WeekOffset](), this.defaults.weekOffset, firstDay);
542
+ integer(this[WklyPickerInputsPropertyKeys.WeekCacheSize]());
543
+ integer(this[WklyPickerInputsPropertyKeys.OverscanWeeks]());
544
+ if (this[WklyPickerInputsPropertyKeys.WeekCacheSize]() < 0 ||
545
+ this[WklyPickerInputsPropertyKeys.OverscanWeeks]() < 0 ||
546
+ this[WklyPickerInputsPropertyKeys.OverscanWeeks]() > 50)
494
547
  throw new RangeError();
495
548
  if (![
496
549
  "datetime",
@@ -499,9 +552,9 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
499
552
  "datetime-range",
500
553
  "date-range",
501
554
  "time-range",
502
- ].includes(this[WklyPickerInputsPropertyKeys.Mode]))
555
+ ].includes(this[WklyPickerInputsPropertyKeys.Mode]()))
503
556
  throw new RangeError();
504
- const preset = this[WklyPickerInputsPropertyKeys.ViewportPreset];
557
+ const preset = this[WklyPickerInputsPropertyKeys.ViewportPreset]();
505
558
  if (preset.kind === "weeks") {
506
559
  integer(preset.visibleWeekCount);
507
560
  if (preset.visibleWeekCount < 1 || preset.visibleWeekCount > 52)
@@ -518,16 +571,16 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
518
571
  }
519
572
  this.generator = createWeekGenerator({
520
573
  weekOffset: this.effectiveOffset,
521
- cacheSize: this[WklyPickerInputsPropertyKeys.WeekCacheSize],
574
+ cacheSize: this[WklyPickerInputsPropertyKeys.WeekCacheSize](),
522
575
  });
523
576
  }
524
577
  catch (_) {
525
- this.configErrors.push(error("configuration-error", this[WklyPickerInputsPropertyKeys.WeekOffset]));
578
+ this.configErrors.push(error("configuration-error", this[WklyPickerInputsPropertyKeys.WeekOffset]()));
526
579
  this.generator = createWeekGenerator();
527
580
  this.effectiveOffset = 0;
528
581
  }
529
582
  this.setSupportedScrollRange();
530
- const hourCycle = this[WklyPickerInputsPropertyKeys.HourCycle];
583
+ const hourCycle = this[WklyPickerInputsPropertyKeys.HourCycle]();
531
584
  // Host value/configuration feedback must retain the user's switchable format.
532
585
  if (hourCycle !== "switchable" || this.configuredHourCycle !== hourCycle) {
533
586
  this.effectiveHourCycle =
@@ -615,22 +668,22 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
615
668
  this.generator.clearCache();
616
669
  }
617
670
  t(key) {
618
- return resolveWklyTranslation(key, this.effectiveLocale, this[WklyPickerInputsPropertyKeys.Translations] ||
671
+ return resolveWklyTranslation(key, this.effectiveLocale, this[WklyPickerInputsPropertyKeys.Translations]() ||
619
672
  this.defaultTranslations, this.strings);
620
673
  }
621
674
  get isRange() {
622
- return this[WklyPickerInputsPropertyKeys.Mode].endsWith("-range");
675
+ return this[WklyPickerInputsPropertyKeys.Mode]().endsWith("-range");
623
676
  }
624
677
  get hasDate() {
625
- return !this[WklyPickerInputsPropertyKeys.Mode].startsWith("time");
678
+ return !this[WklyPickerInputsPropertyKeys.Mode]().startsWith("time");
626
679
  }
627
680
  get hasTime() {
628
- return (this[WklyPickerInputsPropertyKeys.Mode] !== "date" &&
629
- this[WklyPickerInputsPropertyKeys.Mode] !== "date-range");
681
+ return (this[WklyPickerInputsPropertyKeys.Mode]() !== "date" &&
682
+ this[WklyPickerInputsPropertyKeys.Mode]() !== "date-range");
630
683
  }
631
684
  get submitVisible() {
632
685
  return (this.presentation === "transient" &&
633
- (this[WklyPickerInputsPropertyKeys.Mode] !== "date" ||
686
+ (this[WklyPickerInputsPropertyKeys.Mode]() !== "date" ||
634
687
  this.viewMode === "manual"));
635
688
  }
636
689
  get title() {
@@ -643,9 +696,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
643
696
  }
644
697
  }
645
698
  get canSubmit() {
646
- return (!this[WklyPickerInputsPropertyKeys.Disabled] &&
647
- !this.errors.length &&
648
- this.pendingValue !== null);
699
+ return (!this.isDisabled() && !this.errors.length && this.pendingValue !== null);
649
700
  }
650
701
  blank(day) {
651
702
  const safe = Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, day));
@@ -659,7 +710,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
659
710
  }
660
711
  load(value) {
661
712
  this.drafts = [this.blank(this.focused), this.blank(this.focused)];
662
- const validation = validateSelection(value, this, this.adapter);
713
+ const validation = validateSelection(value, unwrapWklyPickerSignalInputs(this), this.adapter);
663
714
  if (value !== null && !validation.length) {
664
715
  const values = typeof value === "string" ? [value] : value;
665
716
  values.forEach((v, i) => {
@@ -685,7 +736,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
685
736
  this.check();
686
737
  }
687
738
  writeValue(value) {
688
- this[WklyPickerInputsPropertyKeys.Value] = value;
739
+ this.formValue.set(value);
689
740
  if (this.initialized) {
690
741
  this.load(value);
691
742
  this.position(this.focused, true);
@@ -698,7 +749,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
698
749
  this.onTouched = fn;
699
750
  }
700
751
  setDisabledState(disabled) {
701
- this[WklyPickerInputsPropertyKeys.Disabled] = disabled;
752
+ this.formDisabled.set(disabled);
702
753
  }
703
754
  validate(_control) {
704
755
  return this.errors.length ? { wkly: this.errors } : null;
@@ -722,13 +773,13 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
722
773
  drafts: this.drafts,
723
774
  configErrors: this.configErrors,
724
775
  adapter: this.adapter,
725
- selection: this,
726
- mode: this[WklyPickerInputsPropertyKeys.Mode],
776
+ selection: unwrapWklyPickerSignalInputs(this),
777
+ mode: this[WklyPickerInputsPropertyKeys.Mode](),
727
778
  isRange: this.isRange,
728
779
  hasDate: this.hasDate,
729
780
  hasTime: this.hasTime,
730
- showSeconds: this[WklyPickerInputsPropertyKeys.ShowSeconds],
731
- required: this[WklyPickerInputsPropertyKeys.Required],
781
+ showSeconds: this[WklyPickerInputsPropertyKeys.ShowSeconds](),
782
+ required: this[WklyPickerInputsPropertyKeys.Required](),
732
783
  });
733
784
  this.pendingValue = result.pendingValue;
734
785
  this.report(result.errors);
@@ -756,7 +807,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
756
807
  }
757
808
  }
758
809
  finish() {
759
- if (this[WklyPickerInputsPropertyKeys.Disabled])
810
+ if (this.isDisabled())
760
811
  return;
761
812
  this.orderDrafts();
762
813
  if (this.viewMode === "manual" && this.hasDate)
@@ -769,9 +820,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
769
820
  if (!this.canSubmit)
770
821
  return;
771
822
  const next = this.pendingValue;
772
- if (JSON.stringify(next) !==
773
- JSON.stringify(this[WklyPickerInputsPropertyKeys.Value])) {
774
- this[WklyPickerInputsPropertyKeys.Value] = next;
823
+ if (JSON.stringify(next) !== JSON.stringify(this.currentValue())) {
824
+ this.formValue.set(next);
775
825
  this.emittedValue = JSON.stringify(next);
776
826
  this.onChange(next);
777
827
  this[WklyPickerOutputsPropertyKeys.ValueChange].emit(next);
@@ -787,14 +837,14 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
787
837
  this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
788
838
  }
789
839
  cancel(reason = "close-button") {
790
- if (this[WklyPickerInputsPropertyKeys.Disabled])
840
+ if (this.isDisabled())
791
841
  return;
792
- this.load(this[WklyPickerInputsPropertyKeys.Value]);
842
+ this.load(this.currentValue());
793
843
  this.onTouched();
794
844
  this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
795
845
  }
796
846
  now() {
797
- if (this[WklyPickerInputsPropertyKeys.Disabled])
847
+ if (this.isDisabled())
798
848
  return;
799
849
  const n = this.clock.now();
800
850
  const day = Math.floor(n.getTime() / 86400000);
@@ -816,9 +866,10 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
816
866
  return {
817
867
  ...this.blank(day),
818
868
  hour: now.getUTCHours(),
819
- minute: Math.floor(now.getUTCMinutes() / this[WklyPickerInputsPropertyKeys.MinuteStep]) * this[WklyPickerInputsPropertyKeys.MinuteStep],
820
- second: this[WklyPickerInputsPropertyKeys.ShowSeconds]
821
- ? Math.floor(now.getUTCSeconds() / this[WklyPickerInputsPropertyKeys.SecondStep]) * this[WklyPickerInputsPropertyKeys.SecondStep]
869
+ minute: Math.floor(now.getUTCMinutes() / this[WklyPickerInputsPropertyKeys.MinuteStep]()) * this[WklyPickerInputsPropertyKeys.MinuteStep](),
870
+ second: this[WklyPickerInputsPropertyKeys.ShowSeconds]()
871
+ ? Math.floor(now.getUTCSeconds() /
872
+ this[WklyPickerInputsPropertyKeys.SecondStep]()) * this[WklyPickerInputsPropertyKeys.SecondStep]()
822
873
  : 0,
823
874
  };
824
875
  }
@@ -829,10 +880,10 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
829
880
  return;
830
881
  let seed = this.drafts.find((draft) => draft.present);
831
882
  if (!seed) {
832
- if (this[WklyPickerInputsPropertyKeys.Value] !== null)
883
+ if (this.currentValue() !== null)
833
884
  return;
834
885
  const now = this.clock.now();
835
- const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay];
886
+ const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay]();
836
887
  const day = initialEpochDay === null
837
888
  ? this.defaults.initialEpochDay === undefined
838
889
  ? Math.floor(now.getTime() / 86400000)
@@ -848,7 +899,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
848
899
  this.changeDetector.markForCheck();
849
900
  }
850
901
  toggleView() {
851
- if (this[WklyPickerInputsPropertyKeys.Disabled] || !this.hasDate)
902
+ if (this.isDisabled() || !this.hasDate)
852
903
  return;
853
904
  this.viewMode = this.viewMode === "calendar" ? "manual" : "calendar";
854
905
  if (this.viewMode === "manual")
@@ -918,19 +969,19 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
918
969
  }
919
970
  }
920
971
  toggleEndView(view) {
921
- if (this[WklyPickerInputsPropertyKeys.Disabled])
972
+ if (this.isDisabled())
922
973
  return;
923
974
  this.endView = view;
924
975
  }
925
976
  days(value) {
926
- if (this[WklyPickerInputsPropertyKeys.Disabled])
977
+ if (this.isDisabled())
927
978
  return;
928
979
  this.manualDateEndpoint = 1;
929
980
  setDraftDayDifference(this.drafts, this.adapter, value);
930
981
  this.check();
931
982
  }
932
983
  field(index, field, value) {
933
- if (this[WklyPickerInputsPropertyKeys.Disabled])
984
+ if (this.isDisabled())
934
985
  return;
935
986
  const draft = this.drafts[index];
936
987
  draft.present = true;
@@ -978,7 +1029,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
978
1029
  : draft.hour;
979
1030
  }
980
1031
  period(index, period) {
981
- if (this[WklyPickerInputsPropertyKeys.Disabled])
1032
+ if (this.isDisabled())
982
1033
  return;
983
1034
  if (period === "24")
984
1035
  this.effectiveHourCycle = "h24";
@@ -1016,10 +1067,10 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1016
1067
  return true;
1017
1068
  try {
1018
1069
  const date = this.adapter.epochDayToDate(day);
1019
- const isDateDisabled = this[WklyPickerInputsPropertyKeys.IsDateDisabled];
1070
+ const isDateDisabled = this[WklyPickerInputsPropertyKeys.IsDateDisabled]();
1020
1071
  if (isDateDisabled &&
1021
1072
  isDateDisabled(day, {
1022
- mode: this[WklyPickerInputsPropertyKeys.Mode],
1073
+ mode: this[WklyPickerInputsPropertyKeys.Mode](),
1023
1074
  endpoint: this.isRange
1024
1075
  ? this.drafts[0]?.present && !this.drafts[1]?.present
1025
1076
  ? "end"
@@ -1028,8 +1079,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1028
1079
  calendarDate: date,
1029
1080
  }))
1030
1081
  return true;
1031
- const min = this[WklyPickerInputsPropertyKeys.Min];
1032
- const max = this[WklyPickerInputsPropertyKeys.Max];
1082
+ const min = this[WklyPickerInputsPropertyKeys.Min](), max = this[WklyPickerInputsPropertyKeys.Max]();
1033
1083
  if (min && day < decodeIso(min).epochDay)
1034
1084
  return true;
1035
1085
  if (max && day > decodeIso(max).epochDay)
@@ -1041,7 +1091,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1041
1091
  }
1042
1092
  }
1043
1093
  select(day) {
1044
- if (this[WklyPickerInputsPropertyKeys.Disabled] || this.dayDisabled(day))
1094
+ if (this.isDisabled() || this.dayDisabled(day))
1045
1095
  return;
1046
1096
  this.focused = day;
1047
1097
  const index = this.isRange && this.drafts[0].present && !this.drafts[1].present ? 1 : 0;
@@ -1054,7 +1104,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1054
1104
  this.renderRows();
1055
1105
  this.finish();
1056
1106
  if (this.presentation === "transient" &&
1057
- this[WklyPickerInputsPropertyKeys.Mode] === "date" &&
1107
+ this[WklyPickerInputsPropertyKeys.Mode]() === "date" &&
1058
1108
  this.viewMode === "calendar")
1059
1109
  this.submit("auto-submit");
1060
1110
  }
@@ -1086,7 +1136,7 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1086
1136
  position(day, preset = false, options = {}) {
1087
1137
  day = Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, day));
1088
1138
  this.anchorWeek = absoluteWeekOf(day, this.effectiveOffset);
1089
- const viewportPreset = this[WklyPickerInputsPropertyKeys.ViewportPreset];
1139
+ const viewportPreset = this[WklyPickerInputsPropertyKeys.ViewportPreset]();
1090
1140
  this.clipMonth = preset && viewportPreset.kind === "full-month";
1091
1141
  if (preset && viewportPreset.kind !== "weeks") {
1092
1142
  const d = this.adapter.epochDayToDate(day);
@@ -1186,12 +1236,12 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1186
1236
  return this.clampFirstWeek(this.firstWeek + delta) !== this.firstWeek;
1187
1237
  }
1188
1238
  moveWeek(delta) {
1189
- if (!this[WklyPickerInputsPropertyKeys.Disabled])
1239
+ if (!this.isDisabled())
1190
1240
  this.showFirstWeek(this.firstWeek + delta);
1191
1241
  }
1192
1242
  renderRows() {
1193
1243
  // Keep the virtual scroll offset here; row data is shared across Angular versions.
1194
- const overscan = Math.max(0, Math.min(50, this[WklyPickerInputsPropertyKeys.OverscanWeeks] || 0));
1244
+ const overscan = Math.max(0, Math.min(50, this[WklyPickerInputsPropertyKeys.OverscanWeeks]() || 0));
1195
1245
  const start = this.firstWeek - overscan;
1196
1246
  this.paddingTop = (start - this.baseWeek) * this.rowHeight;
1197
1247
  this.rows = createWeekRows({
@@ -1204,8 +1254,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1204
1254
  lastSupportedDay: this.lastSupportedDay,
1205
1255
  clipMonth: this.clipMonth,
1206
1256
  initialMonth: this.initialMonth,
1207
- weekLabelMode: this[WklyPickerInputsPropertyKeys.WeekLabelMode],
1208
- weekLabelFormatter: this[WklyPickerInputsPropertyKeys.WeekLabelFormatter] || null,
1257
+ weekLabelMode: this[WklyPickerInputsPropertyKeys.WeekLabelMode](),
1258
+ weekLabelFormatter: this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]() || null,
1209
1259
  isDayDisabled: (day) => this.dayDisabled(day),
1210
1260
  });
1211
1261
  this[WklyPickerOutputsPropertyKeys.ViewportChange].emit({
@@ -1259,8 +1309,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1259
1309
  (day || fallback)?.focus({ preventScroll: true });
1260
1310
  });
1261
1311
  }
1262
- 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 });
1263
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WklyDateTimePickerComponent, selector: "wkly-datetime-picker", providers: [
1312
+ 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 });
1313
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WklyDateTimePickerComponent, selector: "wkly-datetime-picker", providers: [
1264
1314
  {
1265
1315
  provide: NG_VALUE_ACCESSOR,
1266
1316
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
@@ -1271,11 +1321,11 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
1271
1321
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
1272
1322
  multi: true,
1273
1323
  },
1274
- ], 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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled):not([aria-disabled=true]):not(.selected){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}@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"] }] });
1324
+ ], 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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled):not([aria-disabled=true]):not(.selected){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}@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"] }] });
1275
1325
  }
1276
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
1326
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
1277
1327
  type: Component,
1278
- args: [{ selector: "wkly-datetime-picker", providers: [
1328
+ args: [{ selector: "wkly-datetime-picker", standalone: false, providers: [
1279
1329
  {
1280
1330
  provide: NG_VALUE_ACCESSOR,
1281
1331
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
@@ -1286,7 +1336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1286
1336
  useExisting: forwardRef(() => WklyDateTimePickerComponent),
1287
1337
  multi: true,
1288
1338
  },
1289
- ], 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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled):not([aria-disabled=true]):not(.selected){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}@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"] }]
1339
+ ], 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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled):not([aria-disabled=true]):not(.selected){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}@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"] }]
1290
1340
  }], ctorParameters: () => [{ type: undefined, decorators: [{
1291
1341
  type: Inject,
1292
1342
  args: [LOCALE_ID]
@@ -1312,14 +1362,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1312
1362
 
1313
1363
  /** Native-dialog factory. Browser resources are allocated only by open(). */
1314
1364
  class WklyDateTimePickerDialogService {
1315
- resolver;
1316
- injector;
1365
+ environmentInjector;
1317
1366
  app;
1318
1367
  document;
1319
1368
  platform;
1320
- constructor(resolver, injector, app, document, platform) {
1321
- this.resolver = resolver;
1322
- this.injector = injector;
1369
+ constructor(environmentInjector, app, document, platform) {
1370
+ this.environmentInjector = environmentInjector;
1323
1371
  this.app = app;
1324
1372
  this.document = document;
1325
1373
  this.platform = platform;
@@ -1338,9 +1386,10 @@ class WklyDateTimePickerDialogService {
1338
1386
  maxHeight: "94vh",
1339
1387
  background: "transparent",
1340
1388
  });
1341
- const component = this.resolver
1342
- .resolveComponentFactory(WklyDateTimePickerComponent)
1343
- .create(injector || this.injector);
1389
+ const component = createComponent(WklyDateTimePickerComponent, {
1390
+ environmentInjector: this.environmentInjector,
1391
+ elementInjector: injector,
1392
+ });
1344
1393
  component.instance.presentation = "transient";
1345
1394
  dialog.appendChild(component.location.nativeElement);
1346
1395
  this.document.body.appendChild(dialog);
@@ -1392,13 +1441,13 @@ class WklyDateTimePickerDialogService {
1392
1441
  },
1393
1442
  };
1394
1443
  }
1395
- 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 });
1396
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
1444
+ 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 });
1445
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
1397
1446
  }
1398
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
1447
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
1399
1448
  type: Injectable,
1400
1449
  args: [{ providedIn: "root" }]
1401
- }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
1450
+ }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
1402
1451
  type: Inject,
1403
1452
  args: [DOCUMENT]
1404
1453
  }] }, { type: Object, decorators: [{
@@ -1414,19 +1463,49 @@ class WklyTriggerBase extends WklyPickerInputs {
1414
1463
  change = () => { };
1415
1464
  touched = () => { };
1416
1465
  validation = () => { };
1466
+ formValue = signal(undefined);
1467
+ formDisabled = signal(false);
1468
+ previousInputs;
1469
+ currentValue() {
1470
+ return this.formValue() === undefined
1471
+ ? this[WklyPickerInputsPropertyKeys.Value]()
1472
+ : this.formValue();
1473
+ }
1474
+ isDisabled() {
1475
+ return this[WklyPickerInputsPropertyKeys.Disabled]() || this.formDisabled();
1476
+ }
1417
1477
  constructor(element) {
1418
1478
  super();
1419
1479
  this.element = element;
1480
+ effect(() => {
1481
+ const inputs = unwrapWklyPickerSignalInputs(this);
1482
+ const previous = this.previousInputs;
1483
+ this.previousInputs = inputs;
1484
+ untracked(() => {
1485
+ if (previous &&
1486
+ !Object.is(previous[WklyPickerInputsPropertyKeys.Value], inputs[WklyPickerInputsPropertyKeys.Value]))
1487
+ this.formValue.set(undefined);
1488
+ if (!previous ||
1489
+ Object.keys(inputs).some((key) => !Object.is(previous[key], inputs[key]))) {
1490
+ this.checkValue();
1491
+ this.display();
1492
+ if (this.ref) {
1493
+ this.copy();
1494
+ this.ref.component.changeDetectorRef.detectChanges();
1495
+ }
1496
+ }
1497
+ });
1498
+ });
1420
1499
  }
1421
1500
  open() {
1422
- if (this[WklyPickerInputsPropertyKeys.Disabled] || this.ref)
1501
+ if (this.isDisabled() || this.ref)
1423
1502
  return;
1424
1503
  this.ref = this.create();
1425
1504
  const picker = this.ref.component.instance;
1426
1505
  this.copy();
1427
1506
  this.subscriptions = [
1428
1507
  picker[WklyPickerOutputsPropertyKeys.ValueChange].subscribe((value) => {
1429
- this[WklyPickerInputsPropertyKeys.Value] = value;
1508
+ this.formValue.set(value);
1430
1509
  this.change(value);
1431
1510
  this[WklyPickerOutputsPropertyKeys.ValueChange].emit(value);
1432
1511
  this.display();
@@ -1466,55 +1545,43 @@ class WklyTriggerBase extends WklyPickerInputs {
1466
1545
  this.touched();
1467
1546
  this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
1468
1547
  }
1469
- ngOnChanges() {
1470
- [
1471
- WklyPickerInputsPropertyKeys.ShowSeconds,
1472
- WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled,
1473
- WklyPickerInputsPropertyKeys.Required,
1474
- WklyPickerInputsPropertyKeys.Disabled,
1475
- WklyPickerInputsPropertyKeys.CloseOnBackdrop,
1476
- ].forEach((key) => (this[key] = coerceBoolean(this[key])));
1477
- this.checkValue();
1478
- this.display();
1479
- if (this.ref) {
1480
- this.copy();
1481
- this.ref.component.instance.ngOnChanges({
1482
- [WklyPickerInputsPropertyKeys.Value]: true,
1483
- });
1484
- this.ref.component.changeDetectorRef.detectChanges();
1485
- }
1486
- }
1487
1548
  ngOnDestroy() {
1488
1549
  this.close();
1489
1550
  }
1490
1551
  copy() {
1491
- if (this.ref)
1492
- for (const name of INPUT_NAMES)
1493
- this.ref.component.instance[name] = this[name];
1552
+ if (!this.ref)
1553
+ return;
1554
+ const inputs = unwrapWklyPickerSignalInputs(this);
1555
+ for (const name of Object.values(WklyPickerInputsPropertyKeys))
1556
+ this.ref.component.setInput(name, name === WklyPickerInputsPropertyKeys.Value
1557
+ ? this.currentValue()
1558
+ : name === WklyPickerInputsPropertyKeys.Disabled
1559
+ ? this.isDisabled()
1560
+ : inputs[name]);
1494
1561
  }
1495
1562
  display() {
1496
1563
  const host = this.element.nativeElement;
1497
1564
  if (host.tagName === "INPUT") {
1498
1565
  host.readOnly = true;
1499
- const value = this[WklyPickerInputsPropertyKeys.Value];
1566
+ const value = this.currentValue();
1500
1567
  host.value =
1501
1568
  value === null
1502
1569
  ? ""
1503
1570
  : typeof value === "string"
1504
1571
  ? value
1505
1572
  : value.join(" — ");
1506
- host.disabled = this[WklyPickerInputsPropertyKeys.Disabled];
1573
+ host.disabled = this.isDisabled();
1507
1574
  host.setAttribute("aria-haspopup", "dialog");
1508
1575
  }
1509
1576
  }
1510
1577
  checkValue() {
1511
- this.errors = validateSelection(this[WklyPickerInputsPropertyKeys.Value], this, this[WklyPickerInputsPropertyKeys.CalendarAdapter] ||
1512
- new WklyGregorianCalendarAdapter(this[WklyPickerInputsPropertyKeys.Locale] || "en-US"));
1578
+ this.errors = validateSelection(this.currentValue(), unwrapWklyPickerSignalInputs(this), this[WklyPickerInputsPropertyKeys.CalendarAdapter]() ||
1579
+ new WklyGregorianCalendarAdapter(this[WklyPickerInputsPropertyKeys.Locale]() || "en-US"));
1513
1580
  this[WklyPickerOutputsPropertyKeys.ValidationChange].emit(this.errors);
1514
1581
  this.validation();
1515
1582
  }
1516
1583
  writeValue(value) {
1517
- this[WklyPickerInputsPropertyKeys.Value] = value;
1584
+ this.formValue.set(value);
1518
1585
  this.checkValue();
1519
1586
  this.display();
1520
1587
  if (this.ref)
@@ -1527,7 +1594,7 @@ class WklyTriggerBase extends WklyPickerInputs {
1527
1594
  this.touched = fn;
1528
1595
  }
1529
1596
  setDisabledState(value) {
1530
- this[WklyPickerInputsPropertyKeys.Disabled] = value;
1597
+ this.formDisabled.set(value);
1531
1598
  this.display();
1532
1599
  if (this.ref)
1533
1600
  this.ref.component.instance.setDisabledState(value);
@@ -1554,10 +1621,10 @@ class WklyTriggerBase extends WklyPickerInputs {
1554
1621
  this.open();
1555
1622
  this.ref?.component.instance.scrollToValue(value, options);
1556
1623
  }
1557
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1558
- 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 });
1624
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1625
+ 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 });
1559
1626
  }
1560
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyTriggerBase, decorators: [{
1627
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyTriggerBase, decorators: [{
1561
1628
  type: Directive
1562
1629
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { open: [{
1563
1630
  type: HostListener,
@@ -1578,10 +1645,10 @@ class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
1578
1645
  this.triggerInjector = triggerInjector;
1579
1646
  }
1580
1647
  create() {
1581
- return this.service.open(this.element.nativeElement, (reason) => this.close(reason), this[WklyPickerInputsPropertyKeys.CloseOnBackdrop], this.triggerInjector);
1648
+ return this.service.open(this.element.nativeElement, (reason) => this.close(reason), this[WklyPickerInputsPropertyKeys.CloseOnBackdrop](), this.triggerInjector);
1582
1649
  }
1583
- 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 });
1584
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: WklyDateTimePickerDialogDirective, selector: "[wklyDateTimePickerDialog]", providers: [
1650
+ 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 });
1651
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: WklyDateTimePickerDialogDirective, selector: "[wklyDateTimePickerDialog]", providers: [
1585
1652
  {
1586
1653
  provide: NG_VALUE_ACCESSOR,
1587
1654
  useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
@@ -1594,10 +1661,11 @@ class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
1594
1661
  },
1595
1662
  ], exportAs: ["wklyDialog"], usesInheritance: true, ngImport: i0 });
1596
1663
  }
1597
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
1664
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
1598
1665
  type: Directive,
1599
1666
  args: [{
1600
1667
  selector: "[wklyDateTimePickerDialog]",
1668
+ standalone: false,
1601
1669
  exportAs: "wklyDialog",
1602
1670
  providers: [
1603
1671
  {
@@ -1615,13 +1683,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1615
1683
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WklyDateTimePickerDialogService }, { type: i0.Injector }] });
1616
1684
 
1617
1685
  class WklyDateTimePickerModule {
1618
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1619
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
1686
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1687
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
1620
1688
  WklyDateTimePickerDialogDirective,
1621
1689
  WklyFieldComponent], imports: [CommonModule], exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective] });
1622
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
1690
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
1623
1691
  }
1624
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
1692
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
1625
1693
  type: NgModule,
1626
1694
  args: [{
1627
1695
  imports: [CommonModule],
@@ -1638,5 +1706,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1638
1706
  * Generated bundle index. Do not edit.
1639
1707
  */
1640
1708
 
1641
- export { WKLY_CLOCK, WKLY_CONFIG, WKLY_LOCALIZATION, WKLY_TRANSLATIONS, WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective, WklyDateTimePickerDialogService, WklyDateTimePickerModule, WklyFieldComponent, WklyPickerInputs, WklyTriggerBase };
1709
+ export { WKLY_CLOCK, WKLY_CONFIG, WKLY_LOCALIZATION, WKLY_TRANSLATIONS, WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective, WklyDateTimePickerDialogService, WklyDateTimePickerModule, WklyFieldComponent, WklyPickerInputs, WklyTriggerBase, unwrapWklyPickerSignalInputs };
1642
1710
  //# sourceMappingURL=wkly-datetime-picker.mjs.map