@wkly/datetime-picker 18.0.0 → 20.0.0

package/fesm2022/wkly-datetime-picker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-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';
+import { InjectionToken, input, booleanAttribute, output, Directive, EventEmitter, Output, Input, Component, signal, effect, untracked, LOCALE_ID, PLATFORM_ID, forwardRef, ViewChild, Inject, createComponent, Injectable, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, getLocaleFirstDayOfWeek, DOCUMENT, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
@@ -17,71 +17,76 @@ const WKLY_LOCALIZATION = new InjectionToken("WKLY_LOCALIZATION", { providedIn:
 const WKLY_TRANSLATIONS = new InjectionToken("WKLY_TRANSLATIONS", { providedIn: "root", factory: () => ({}) });
 class WklyPickerInputs {
     // Angular discovers signal inputs from identifier property declarations.
-    modeInput = input("datetime", {
-        alias: "mode",
-    });
-    valueInput = input(null, {
-        alias: "value",
-    });
-    calendarAdapterInput = input(undefined, { alias: "calendarAdapter" });
-    localeInput = input("", { alias: "locale" });
-    weekOffsetInput = input(null, {
-        alias: "weekOffset",
-    });
-    viewportPresetInput = input({ kind: "full-month" }, { alias: "viewportPreset" });
-    hourCycleInput = input("locale", {
-        alias: "hourCycle",
-    });
-    showSecondsInput = input(false, {
-        alias: "showSeconds",
-        transform: booleanAttribute,
-    });
-    minuteStepInput = input(1, { alias: "minuteStep" });
-    secondStepInput = input(1, { alias: "secondStep" });
-    minInput = input(null, { alias: "min" });
-    maxInput = input(null, { alias: "max" });
-    isDateDisabledInput = input(null, { alias: "isDateDisabled" });
-    isTimeDisabledInput = input(null, { alias: "isTimeDisabled" });
-    rangeValidatorInput = input(null, { alias: "rangeValidator" });
-    allowRangeAcrossDisabledInput = input(false, {
-        alias: "allowRangeAcrossDisabled",
-        transform: booleanAttribute,
-    });
-    requiredInput = input(false, {
-        alias: "required",
-        transform: booleanAttribute,
-    });
-    disabledInput = input(false, {
-        alias: "disabled",
-        transform: booleanAttribute,
-    });
-    weekLabelModeInput = input("locale", {
-        alias: "weekLabelMode",
-    });
-    weekLabelFormatterInput = input(null, { alias: "weekLabelFormatter" });
-    weekCacheSizeInput = input(256, {
-        alias: "weekCacheSize",
-    });
-    overscanWeeksInput = input(DEFAULT_OVERSCAN_WEEKS, {
-        alias: "overscanWeeks",
-    });
-    ariaLabelInput = input(null, {
-        alias: "ariaLabel",
-    });
-    ariaDescribedByInput = input(null, {
-        alias: "ariaDescribedBy",
-    });
-    initialEpochDayInput = input(null, {
-        alias: "initialEpochDay",
-    });
-    closeOnBackdropInput = input(true, {
-        alias: "closeOnBackdrop",
-        transform: booleanAttribute,
-    });
-    validatorsInput = input([], { alias: "validators" });
-    translationsInput = input(null, {
-        alias: "translations",
-    });
+    modeInput = input("datetime", ...(ngDevMode ? [{ debugName: "modeInput", alias: "mode" }] : [{
+            alias: "mode",
+        }]));
+    valueInput = input(null, ...(ngDevMode ? [{ debugName: "valueInput", alias: "value" }] : [{
+            alias: "value",
+        }]));
+    calendarAdapterInput = input(undefined, ...(ngDevMode ? [{ debugName: "calendarAdapterInput", alias: "calendarAdapter" }] : [{ alias: "calendarAdapter" }]));
+    localeInput = input("", ...(ngDevMode ? [{ debugName: "localeInput", alias: "locale" }] : [{ alias: "locale" }]));
+    weekOffsetInput = input(null, ...(ngDevMode ? [{ debugName: "weekOffsetInput", alias: "weekOffset" }] : [{
+            alias: "weekOffset",
+        }]));
+    viewportPresetInput = input({ kind: "full-month" }, ...(ngDevMode ? [{ debugName: "viewportPresetInput", alias: "viewportPreset" }] : [{ alias: "viewportPreset" }]));
+    hourCycleInput = input("locale", ...(ngDevMode ? [{ debugName: "hourCycleInput", alias: "hourCycle" }] : [{
+            alias: "hourCycle",
+        }]));
+    showSecondsInput = input(false, ...(ngDevMode ? [{ debugName: "showSecondsInput", alias: "showSeconds",
+            transform: booleanAttribute }] : [{
+            alias: "showSeconds",
+            transform: booleanAttribute,
+        }]));
+    minuteStepInput = input(1, ...(ngDevMode ? [{ debugName: "minuteStepInput", alias: "minuteStep" }] : [{ alias: "minuteStep" }]));
+    secondStepInput = input(1, ...(ngDevMode ? [{ debugName: "secondStepInput", alias: "secondStep" }] : [{ alias: "secondStep" }]));
+    minInput = input(null, ...(ngDevMode ? [{ debugName: "minInput", alias: "min" }] : [{ alias: "min" }]));
+    maxInput = input(null, ...(ngDevMode ? [{ debugName: "maxInput", alias: "max" }] : [{ alias: "max" }]));
+    isDateDisabledInput = input(null, ...(ngDevMode ? [{ debugName: "isDateDisabledInput", alias: "isDateDisabled" }] : [{ alias: "isDateDisabled" }]));
+    isTimeDisabledInput = input(null, ...(ngDevMode ? [{ debugName: "isTimeDisabledInput", alias: "isTimeDisabled" }] : [{ alias: "isTimeDisabled" }]));
+    rangeValidatorInput = input(null, ...(ngDevMode ? [{ debugName: "rangeValidatorInput", alias: "rangeValidator" }] : [{ alias: "rangeValidator" }]));
+    allowRangeAcrossDisabledInput = input(false, ...(ngDevMode ? [{ debugName: "allowRangeAcrossDisabledInput", alias: "allowRangeAcrossDisabled",
+            transform: booleanAttribute }] : [{
+            alias: "allowRangeAcrossDisabled",
+            transform: booleanAttribute,
+        }]));
+    requiredInput = input(false, ...(ngDevMode ? [{ debugName: "requiredInput", alias: "required",
+            transform: booleanAttribute }] : [{
+            alias: "required",
+            transform: booleanAttribute,
+        }]));
+    disabledInput = input(false, ...(ngDevMode ? [{ debugName: "disabledInput", alias: "disabled",
+            transform: booleanAttribute }] : [{
+            alias: "disabled",
+            transform: booleanAttribute,
+        }]));
+    weekLabelModeInput = input("locale", ...(ngDevMode ? [{ debugName: "weekLabelModeInput", alias: "weekLabelMode" }] : [{
+            alias: "weekLabelMode",
+        }]));
+    weekLabelFormatterInput = input(null, ...(ngDevMode ? [{ debugName: "weekLabelFormatterInput", alias: "weekLabelFormatter" }] : [{ alias: "weekLabelFormatter" }]));
+    weekCacheSizeInput = input(256, ...(ngDevMode ? [{ debugName: "weekCacheSizeInput", alias: "weekCacheSize" }] : [{
+            alias: "weekCacheSize",
+        }]));
+    overscanWeeksInput = input(DEFAULT_OVERSCAN_WEEKS, ...(ngDevMode ? [{ debugName: "overscanWeeksInput", alias: "overscanWeeks" }] : [{
+            alias: "overscanWeeks",
+        }]));
+    ariaLabelInput = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelInput", alias: "ariaLabel" }] : [{
+            alias: "ariaLabel",
+        }]));
+    ariaDescribedByInput = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedByInput", alias: "ariaDescribedBy" }] : [{
+            alias: "ariaDescribedBy",
+        }]));
+    initialEpochDayInput = input(null, ...(ngDevMode ? [{ debugName: "initialEpochDayInput", alias: "initialEpochDay" }] : [{
+            alias: "initialEpochDay",
+        }]));
+    closeOnBackdropInput = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropInput", alias: "closeOnBackdrop",
+            transform: booleanAttribute }] : [{
+            alias: "closeOnBackdrop",
+            transform: booleanAttribute,
+        }]));
+    validatorsInput = input([], ...(ngDevMode ? [{ debugName: "validatorsInput", alias: "validators" }] : [{ alias: "validators" }]));
+    translationsInput = input(null, ...(ngDevMode ? [{ debugName: "translationsInput", alias: "translations" }] : [{
+            alias: "translations",
+        }]));
     // Public members of the shared picker input contract.
     [WklyPickerInputsPropertyKeys.Mode] = this.modeInput;
     [WklyPickerInputsPropertyKeys.Value] = this.valueInput;
@@ -117,10 +122,10 @@ class WklyPickerInputs {
     [WklyPickerOutputsPropertyKeys.Closed] = output();
     [WklyPickerOutputsPropertyKeys.ViewportChange] = output();
     [WklyPickerOutputsPropertyKeys.ViewModeChange] = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyPickerInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyPickerInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.33", type: WklyPickerInputs, isStandalone: true, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyPickerInputs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyPickerInputs, decorators: [{
             type: Directive,
             args: [{
                     // Angular's metadata evaluator requires strings; template expressions
@@ -134,7 +139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         `${WklyPickerOutputsPropertyKeys.ViewModeChange}`,
                     ],
                 }]
-        }] });
+        }], propDecorators: { modeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], calendarAdapterInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarAdapter", required: false }] }], localeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], weekOffsetInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekOffset", required: false }] }], viewportPresetInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportPreset", required: false }] }], hourCycleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], showSecondsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStepInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStepInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], minInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateDisabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateDisabled", required: false }] }], isTimeDisabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTimeDisabled", required: false }] }], rangeValidatorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValidator", required: false }] }], allowRangeAcrossDisabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRangeAcrossDisabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], weekLabelModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekLabelMode", required: false }] }], weekLabelFormatterInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekLabelFormatter", required: false }] }], weekCacheSizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekCacheSize", required: false }] }], overscanWeeksInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscanWeeks", required: false }] }], ariaLabelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], initialEpochDayInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialEpochDay", required: false }] }], closeOnBackdropInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], validatorsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], translationsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "translations", required: false }] }] } });
 function unwrapWklyPickerSignalInputs(source) {
     const keys = Object.values(WklyPickerInputsPropertyKeys);
     return Object.fromEntries(keys.map((key) => [key, source[key]()]));
@@ -350,10 +355,10 @@ class WklyFieldComponent {
         this.touchSteps = steps;
         this.touchChanged = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WklyFieldComponent, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.33", type: WklyFieldComponent, isStandalone: false, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "wkly-field", template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"] }]
         }], propDecorators: { value: [{
@@ -438,8 +443,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
     pendingValue = null;
     emittedValue = null;
     manualDateEndpoint = 0;
-    formValue = signal(undefined);
-    formDisabled = signal(false);
+    formValue = signal(undefined, ...(ngDevMode ? [{ debugName: "formValue" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
     previousInputs;
     currentValue() {
         return this.formValue() === undefined
@@ -1303,8 +1308,8 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
             (day || fallback)?.focus({ preventScroll: true });
         });
     }
-    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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: WklyDateTimePickerComponent, selector: "wkly-datetime-picker", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: WklyDateTimePickerComponent, isStandalone: false, selector: "wkly-datetime-picker", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WklyDateTimePickerComponent),
@@ -1315,9 +1320,9 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
                 useExisting: forwardRef(() => WklyDateTimePickerComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section\n  class=\"wkly\"\n  [attr.dir]=\"direction\"\n  [attr.aria-label]=\"\n    this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Date and time picker'\n  \"\n  [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]()\"\n  (focusout)=\"touched()\"\n>\n  <header class=\"toolbar\">\n    @if (hasDate) {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n        (click)=\"toggleView()\"\n      >\n        {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n      </button>\n    }\n    @if (hasDate) {\n      <span class=\"year-control\">{{ title }}</span>\n    }\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    @if (presentation === \"transient\") {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t('close')\"\n        (click)=\"cancel()\"\n      >\n        \u00D7\n      </button>\n    }\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span>\n        @for (day of weekdays; track $index) {\n          <span role=\"columnheader\">{{ day }}</span>\n        }\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(-1)\"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(1)\"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              isDisabled() ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WklyFieldComponent, selector: "wkly-field", inputs: ["value", "label", "hideLabel", "previousLabel", "nextLabel", "min", "max", "step", "locale", "disabled", "invalid", "labels"], outputs: ["valueChange", "complete"] }] });
+        ], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section\n  class=\"wkly\"\n  [attr.dir]=\"direction\"\n  [attr.aria-label]=\"\n    this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Date and time picker'\n  \"\n  [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]()\"\n  (focusout)=\"touched()\"\n>\n  <header class=\"toolbar\">\n    @if (hasDate) {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n        (click)=\"toggleView()\"\n      >\n        {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n      </button>\n    }\n    @if (hasDate) {\n      <span class=\"year-control\">{{ title }}</span>\n    }\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    @if (presentation === \"transient\") {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t('close')\"\n        (click)=\"cancel()\"\n      >\n        \u00D7\n      </button>\n    }\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span>\n        @for (day of weekdays; track $index) {\n          <span role=\"columnheader\">{{ day }}</span>\n        }\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(-1)\"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(1)\"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              isDisabled() ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media(forced-colors:active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WklyFieldComponent, selector: "wkly-field", inputs: ["value", "label", "hideLabel", "previousLabel", "nextLabel", "min", "max", "step", "locale", "disabled", "invalid", "labels"], outputs: ["valueChange", "complete"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "wkly-datetime-picker", standalone: false, providers: [
                         {
@@ -1330,7 +1335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => WklyDateTimePickerComponent),
                             multi: true,
                         },
-                    ], template: "<section\n  class=\"wkly\"\n  [attr.dir]=\"direction\"\n  [attr.aria-label]=\"\n    this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Date and time picker'\n  \"\n  [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]()\"\n  (focusout)=\"touched()\"\n>\n  <header class=\"toolbar\">\n    @if (hasDate) {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n        (click)=\"toggleView()\"\n      >\n        {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n      </button>\n    }\n    @if (hasDate) {\n      <span class=\"year-control\">{{ title }}</span>\n    }\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    @if (presentation === \"transient\") {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t('close')\"\n        (click)=\"cancel()\"\n      >\n        \u00D7\n      </button>\n    }\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span>\n        @for (day of weekdays; track $index) {\n          <span role=\"columnheader\">{{ day }}</span>\n        }\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(-1)\"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(1)\"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              isDisabled() ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"] }]
+                    ], template: "<section\n  class=\"wkly\"\n  [attr.dir]=\"direction\"\n  [attr.aria-label]=\"\n    this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Date and time picker'\n  \"\n  [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]()\"\n  (focusout)=\"touched()\"\n>\n  <header class=\"toolbar\">\n    @if (hasDate) {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n        (click)=\"toggleView()\"\n      >\n        {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n      </button>\n    }\n    @if (hasDate) {\n      <span class=\"year-control\">{{ title }}</span>\n    }\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    @if (presentation === \"transient\") {\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled()\"\n        [attr.aria-label]=\"t('close')\"\n        (click)=\"cancel()\"\n      >\n        \u00D7\n      </button>\n    }\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel]() || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span>\n        @for (day of weekdays; track $index) {\n          <span role=\"columnheader\">{{ day }}</span>\n        }\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode]() ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter]())\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"cell.disabled || isDisabled()\"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(-1)\"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"isDisabled() || !canMoveWeek(1)\"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"isDisabled()\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]()\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep]() > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep]() === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]()\n              : 1\n          \"\n          [disabled]=\"isDisabled()\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              isDisabled() ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle]() === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"isDisabled()\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media(forced-colors:active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -1435,10 +1440,10 @@ class WklyDateTimePickerDialogService {
             },
         };
     }
-    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 });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerDialogService, deps: [{ token: i0.EnvironmentInjector }, { token: i0.ApplicationRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
         }], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
@@ -1457,8 +1462,8 @@ class WklyTriggerBase extends WklyPickerInputs {
     change = () => { };
     touched = () => { };
     validation = () => { };
-    formValue = signal(undefined);
-    formDisabled = signal(false);
+    formValue = signal(undefined, ...(ngDevMode ? [{ debugName: "formValue" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
     previousInputs;
     currentValue() {
         return this.formValue() === undefined
@@ -1615,10 +1620,10 @@ class WklyTriggerBase extends WklyPickerInputs {
         this.open();
         this.ref?.component.instance.scrollToValue(value, options);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: WklyTriggerBase, isStandalone: true, host: { listeners: { "click": "open()", "keydown": "key($event)", "blur": "blur()" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyTriggerBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyTriggerBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { open: [{
                 type: HostListener,
@@ -1641,8 +1646,8 @@ class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
     create() {
         return this.service.open(this.element.nativeElement, (reason) => this.close(reason), this[WklyPickerInputsPropertyKeys.CloseOnBackdrop](), this.triggerInjector);
     }
-    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 });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: WklyDateTimePickerDialogDirective, selector: "[wklyDateTimePickerDialog]", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerDialogDirective, deps: [{ token: i0.ElementRef }, { token: WklyDateTimePickerDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.33", type: WklyDateTimePickerDialogDirective, isStandalone: false, selector: "[wklyDateTimePickerDialog]", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
@@ -1655,7 +1660,7 @@ class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
             },
         ], exportAs: ["wklyDialog"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[wklyDateTimePickerDialog]",
@@ -1677,13 +1682,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WklyDateTimePickerDialogService }, { type: i0.Injector }] });
 
 class WklyDateTimePickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
             WklyDateTimePickerDialogDirective,
             WklyFieldComponent], imports: [CommonModule], exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],