@wkly/datetime-picker 15.0.0 → 17.0.0

package/{fesm2020 → fesm2022}/wkly-datetime-picker.mjs

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Component, Input, Output, LOCALE_ID, PLATFORM_ID, forwardRef, Inject, ViewChild, Injectable, HostListener, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Directive, Output, Input, Component, LOCALE_ID, PLATFORM_ID, forwardRef, ViewChild, Inject, 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';
 import { floorMod, integer, createWeekGenerator, absoluteWeekOf, firstEpochDayOf } from '@wkly/core';
 import { normalizeDigits, WklyGregorianCalendarAdapter, resolveWeekOffset, error, validateSelection, decodeIso } from '@wkly/adapters';
-import { DEFAULT_OVERSCAN_WEEKS, WklyPickerInputsPropertyKeys, WklyPickerOutputsPropertyKeys, coerceBoolean, resolveWklyTranslation, validateDrafts, draftDayDifference, setDraftDayDifference, calendarMonthBounds, createWeekRows, INPUT_NAMES } from '@wkly/presentation';
+import { WklyPickerInputsPropertyKeys, DEFAULT_OVERSCAN_WEEKS, WklyPickerOutputsPropertyKeys, coerceBoolean, resolveWklyTranslation, validateDrafts, draftDayDifference, setDraftDayDifference, calendarMonthBounds, createWeekRows, INPUT_NAMES } from '@wkly/presentation';
 export * from '@wkly/presentation';
 
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
 const WKLY_CLOCK = new InjectionToken("WKLY_CLOCK", {
     providedIn: "root",
     factory: () => ({ now: () => new Date() }),
@@ -19,48 +18,46 @@ const WKLY_TRANSLATIONS = new InjectionToken("WKLY_TRANSLATIONS", { providedIn:
 /** Shared public inputs/outputs inherited by the picker and both trigger directives. */
 // Inherited inputs need literal names in published decorator metadata.
 class WklyPickerInputs {
-    constructor() {
-        this[_a] = "datetime";
-        this[_b] = null;
-        this[_c] = "";
-        this[_d] = null;
-        this[_e] = {
-            kind: "full-month",
-        };
-        this[_f] = "locale";
-        this[_g] = false;
-        this[_h] = 1;
-        this[_j] = 1;
-        this[_k] = null;
-        this[_l] = null;
-        this[_m] = null;
-        this[_o] = null;
-        this[_p] = null;
-        this[_q] = false;
-        this[_r] = false;
-        this[_s] = false;
-        this[_t] = "locale";
-        this[_u] = null;
-        this[_v] = 256;
-        this[_w] = DEFAULT_OVERSCAN_WEEKS;
-        this[_x] = null;
-        this[_y] = null;
-        this[_z] = null;
-        this[_0] = true;
-        this[_1] = [];
-        this[_2] = null;
-        this[_3] = new EventEmitter();
-        this[_4] = new EventEmitter(true);
-        this[_5] = new EventEmitter();
-        this[_6] = new EventEmitter();
-        this[_7] = new EventEmitter(true);
-        this[_8] = new EventEmitter();
-    }
+    [WklyPickerInputsPropertyKeys.Mode] = "datetime";
+    [WklyPickerInputsPropertyKeys.Value] = null;
+    [WklyPickerInputsPropertyKeys.CalendarAdapter];
+    [WklyPickerInputsPropertyKeys.Locale] = "";
+    [WklyPickerInputsPropertyKeys.WeekOffset] = null;
+    [WklyPickerInputsPropertyKeys.ViewportPreset] = {
+        kind: "full-month",
+    };
+    [WklyPickerInputsPropertyKeys.HourCycle] = "locale";
+    [WklyPickerInputsPropertyKeys.ShowSeconds] = false;
+    [WklyPickerInputsPropertyKeys.MinuteStep] = 1;
+    [WklyPickerInputsPropertyKeys.SecondStep] = 1;
+    [WklyPickerInputsPropertyKeys.Min] = null;
+    [WklyPickerInputsPropertyKeys.Max] = null;
+    [WklyPickerInputsPropertyKeys.IsDateDisabled] = null;
+    [WklyPickerInputsPropertyKeys.IsTimeDisabled] = null;
+    [WklyPickerInputsPropertyKeys.RangeValidator] = null;
+    [WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled] = false;
+    [WklyPickerInputsPropertyKeys.Required] = false;
+    [WklyPickerInputsPropertyKeys.Disabled] = false;
+    [WklyPickerInputsPropertyKeys.WeekLabelMode] = "locale";
+    [WklyPickerInputsPropertyKeys.WeekLabelFormatter] = null;
+    [WklyPickerInputsPropertyKeys.WeekCacheSize] = 256;
+    [WklyPickerInputsPropertyKeys.OverscanWeeks] = DEFAULT_OVERSCAN_WEEKS;
+    [WklyPickerInputsPropertyKeys.AriaLabel] = null;
+    [WklyPickerInputsPropertyKeys.AriaDescribedBy] = null;
+    [WklyPickerInputsPropertyKeys.InitialEpochDay] = null;
+    [WklyPickerInputsPropertyKeys.CloseOnBackdrop] = true;
+    [WklyPickerInputsPropertyKeys.Validators] = [];
+    [WklyPickerInputsPropertyKeys.Translations] = null;
+    [WklyPickerOutputsPropertyKeys.ValueChange] = new EventEmitter();
+    [WklyPickerOutputsPropertyKeys.ValidationChange] = new EventEmitter(true);
+    [WklyPickerOutputsPropertyKeys.Opened] = new EventEmitter();
+    [WklyPickerOutputsPropertyKeys.Closed] = new EventEmitter();
+    [WklyPickerOutputsPropertyKeys.ViewportChange] = new EventEmitter(true);
+    [WklyPickerOutputsPropertyKeys.ViewModeChange] = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyPickerInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: WklyPickerInputs, inputs: { mode: "mode", value: "value", calendarAdapter: "calendarAdapter", locale: "locale", weekOffset: "weekOffset", viewportPreset: "viewportPreset", hourCycle: "hourCycle", showSeconds: "showSeconds", minuteStep: "minuteStep", secondStep: "secondStep", min: "min", max: "max", isDateDisabled: "isDateDisabled", isTimeDisabled: "isTimeDisabled", rangeValidator: "rangeValidator", allowRangeAcrossDisabled: "allowRangeAcrossDisabled", required: "required", disabled: "disabled", weekLabelMode: "weekLabelMode", weekLabelFormatter: "weekLabelFormatter", weekCacheSize: "weekCacheSize", overscanWeeks: "overscanWeeks", ariaLabel: "ariaLabel", ariaDescribedBy: "ariaDescribedBy", initialEpochDay: "initialEpochDay", closeOnBackdrop: "closeOnBackdrop", validators: "validators", translations: "translations" }, outputs: { valueChange: "valueChange", validationChange: "validationChange", opened: "opened", closed: "closed", viewportChange: "viewportChange", viewModeChange: "viewModeChange" }, ngImport: i0 });
 }
-_a = WklyPickerInputsPropertyKeys.Mode, _b = WklyPickerInputsPropertyKeys.Value, WklyPickerInputsPropertyKeys.CalendarAdapter, _c = WklyPickerInputsPropertyKeys.Locale, _d = WklyPickerInputsPropertyKeys.WeekOffset, _e = WklyPickerInputsPropertyKeys.ViewportPreset, _f = WklyPickerInputsPropertyKeys.HourCycle, _g = WklyPickerInputsPropertyKeys.ShowSeconds, _h = WklyPickerInputsPropertyKeys.MinuteStep, _j = WklyPickerInputsPropertyKeys.SecondStep, _k = WklyPickerInputsPropertyKeys.Min, _l = WklyPickerInputsPropertyKeys.Max, _m = WklyPickerInputsPropertyKeys.IsDateDisabled, _o = WklyPickerInputsPropertyKeys.IsTimeDisabled, _p = WklyPickerInputsPropertyKeys.RangeValidator, _q = WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled, _r = WklyPickerInputsPropertyKeys.Required, _s = WklyPickerInputsPropertyKeys.Disabled, _t = WklyPickerInputsPropertyKeys.WeekLabelMode, _u = WklyPickerInputsPropertyKeys.WeekLabelFormatter, _v = WklyPickerInputsPropertyKeys.WeekCacheSize, _w = WklyPickerInputsPropertyKeys.OverscanWeeks, _x = WklyPickerInputsPropertyKeys.AriaLabel, _y = WklyPickerInputsPropertyKeys.AriaDescribedBy, _z = WklyPickerInputsPropertyKeys.InitialEpochDay, _0 = WklyPickerInputsPropertyKeys.CloseOnBackdrop, _1 = WklyPickerInputsPropertyKeys.Validators, _2 = WklyPickerInputsPropertyKeys.Translations, _3 = WklyPickerOutputsPropertyKeys.ValueChange, _4 = WklyPickerOutputsPropertyKeys.ValidationChange, _5 = WklyPickerOutputsPropertyKeys.Opened, _6 = WklyPickerOutputsPropertyKeys.Closed, _7 = WklyPickerOutputsPropertyKeys.ViewportChange, _8 = WklyPickerOutputsPropertyKeys.ViewModeChange;
-WklyPickerInputs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyPickerInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-WklyPickerInputs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: WklyPickerInputs, inputs: { mode: "mode", value: "value", calendarAdapter: "calendarAdapter", locale: "locale", weekOffset: "weekOffset", viewportPreset: "viewportPreset", hourCycle: "hourCycle", showSeconds: "showSeconds", minuteStep: "minuteStep", secondStep: "secondStep", min: "min", max: "max", isDateDisabled: "isDateDisabled", isTimeDisabled: "isTimeDisabled", rangeValidator: "rangeValidator", allowRangeAcrossDisabled: "allowRangeAcrossDisabled", required: "required", disabled: "disabled", weekLabelMode: "weekLabelMode", weekLabelFormatter: "weekLabelFormatter", weekCacheSize: "weekCacheSize", overscanWeeks: "overscanWeeks", ariaLabel: "ariaLabel", ariaDescribedBy: "ariaDescribedBy", initialEpochDay: "initialEpochDay", closeOnBackdrop: "closeOnBackdrop", validators: "validators", translations: "translations" }, outputs: { valueChange: "valueChange", validationChange: "validationChange", opened: "opened", closed: "closed", viewportChange: "viewportChange", viewModeChange: "viewModeChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyPickerInputs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyPickerInputs, decorators: [{
             type: Directive,
             args: [{
                     inputs: [
@@ -105,29 +102,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class WklyFieldComponent {
-    constructor() {
-        this.value = 0;
-        this.label = "";
-        this.hideLabel = false;
-        this.previousLabel = "";
-        this.nextLabel = "";
-        this.min = 0;
-        this.max = 59;
-        this.step = 1;
-        this.locale = "en-US";
-        this.disabled = false;
-        this.invalid = false;
-        this.labels = null;
-        this.valueChange = new EventEmitter();
-        this.complete = new EventEmitter();
-        this.before = null;
-        this.touchY = 0;
-        this.touchSteps = 0;
-        this.touchChanged = false;
-        this.typed = null;
-        this.inputTimer = null;
-        this.wheelTimer = null;
-    }
+    value = 0;
+    label = "";
+    hideLabel = false;
+    previousLabel = "";
+    nextLabel = "";
+    min = 0;
+    max = 59;
+    step = 1;
+    locale = "en-US";
+    disabled = false;
+    invalid = false;
+    labels = null;
+    valueChange = new EventEmitter();
+    complete = new EventEmitter();
+    before = null;
+    touchY = 0;
+    touchSteps = 0;
+    touchChanged = false;
+    typed = null;
+    inputTimer = null;
+    wheelTimer = null;
     get display() {
         if (this.typed !== null)
             return this.typed;
@@ -316,10 +311,10 @@ class WklyFieldComponent {
         this.touchSteps = steps;
         this.touchChanged = true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WklyFieldComponent, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-WklyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WklyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: "wkly-field", template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}\n"] }]
         }], propDecorators: { value: [{
@@ -353,6 +348,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class WklyDateTimePickerComponent extends WklyPickerInputs {
+    defaultLocale;
+    defaults;
+    clock;
+    strings;
+    defaultTranslations;
+    host;
+    changeDetector;
+    scroller;
+    presentation = "inline";
+    viewMode = "calendar";
+    endView = "date";
+    adapter;
+    effectiveLocale = "en-US";
+    effectiveOffset = 0;
+    effectiveHourCycle = "h24";
+    direction = "ltr";
+    rows = [];
+    weekdays = [];
+    drafts = [];
+    errors = [];
+    today = 0;
+    focused = 0;
+    anchorWeek = 0;
+    firstWeek = 0;
+    visibleCount = 6;
+    rowHeight = 76;
+    scrollHeight = 152076;
+    paddingTop = 0;
+    initialized = false;
+    compact = false;
+    WklyPickerInputsPropertyKeys = WklyPickerInputsPropertyKeys;
+    baseWeek = 0;
+    firstSupportedDay = 0;
+    lastSupportedDay = 0;
+    firstSupportedWeek = 0;
+    lastSupportedWeek = 0;
+    generator;
+    initialMonth = "";
+    clipMonth = false;
+    browser = false;
+    observer;
+    destroyed = false;
+    scrollEndTimer;
+    snapPending = false;
+    onChange = () => { };
+    onTouched = () => { };
+    validatorChanged = () => { };
+    configErrors = [];
+    pendingValue = null;
+    emittedValue = null;
+    manualDateEndpoint = 0;
     constructor(defaultLocale, defaults, clock, strings, defaultTranslations, platform, host, changeDetector) {
         super();
         this.defaultLocale = defaultLocale;
@@ -362,45 +408,6 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
         this.defaultTranslations = defaultTranslations;
         this.host = host;
         this.changeDetector = changeDetector;
-        this.presentation = "inline";
-        this.viewMode = "calendar";
-        this.endView = "date";
-        this.effectiveLocale = "en-US";
-        this.effectiveOffset = 0;
-        this.effectiveHourCycle = "h24";
-        this.direction = "ltr";
-        this.rows = [];
-        this.weekdays = [];
-        this.drafts = [];
-        this.errors = [];
-        this.today = 0;
-        this.focused = 0;
-        this.anchorWeek = 0;
-        this.firstWeek = 0;
-        this.visibleCount = 6;
-        this.rowHeight = 76;
-        this.scrollHeight = 152076;
-        this.paddingTop = 0;
-        this.initialized = false;
-        this.compact = false;
-        this.WklyPickerInputsPropertyKeys = WklyPickerInputsPropertyKeys;
-        this.baseWeek = 0;
-        this.firstSupportedDay = 0;
-        this.lastSupportedDay = 0;
-        this.firstSupportedWeek = 0;
-        this.lastSupportedWeek = 0;
-        this.initialMonth = "";
-        this.clipMonth = false;
-        this.browser = false;
-        this.destroyed = false;
-        this.snapPending = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.validatorChanged = () => { };
-        this.configErrors = [];
-        this.pendingValue = null;
-        this.emittedValue = null;
-        this.manualDateEndpoint = 0;
         this.browser = isPlatformBrowser(platform);
     }
     ngOnInit() {
@@ -1246,21 +1253,21 @@ class WklyDateTimePickerComponent extends WklyPickerInputs {
             (day || fallback)?.focus({ preventScroll: true });
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerComponent, deps: [{ token: LOCALE_ID }, { token: WKLY_CONFIG }, { token: WKLY_CLOCK }, { token: WKLY_LOCALIZATION }, { token: WKLY_TRANSLATIONS }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: WklyDateTimePickerComponent, selector: "wkly-datetime-picker", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WklyDateTimePickerComponent),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => WklyDateTimePickerComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section\n  class=\"wkly\"\n  [attr.dir]=\"direction\"\n  [attr.aria-label]=\"\n    this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Date and time picker'\n  \"\n  [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]\"\n  (focusout)=\"touched()\"\n>\n  <header class=\"toolbar\">\n    <button\n      *ngIf=\"hasDate\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n      (click)=\"toggleView()\"\n    >\n      {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n    </button>\n    <span *ngIf=\"hasDate\" class=\"year-control\">{{ title }}</span>\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    <button\n      *ngIf=\"presentation === 'transient'\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t('close')\"\n      (click)=\"cancel()\"\n    >\n      \u00D7\n    </button>\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode] === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span\n        ><span *ngFor=\"let day of weekdays\" role=\"columnheader\">{{ day }}</span>\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"\n                  cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                \"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"\n                    cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                  \"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(-1)\n        \"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(1)\n        \"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              this[WklyPickerInputsPropertyKeys.Disabled] ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WklyFieldComponent, selector: "wkly-field", inputs: ["value", "label", "hideLabel", "previousLabel", "nextLabel", "min", "max", "step", "locale", "disabled", "invalid", "labels"], outputs: ["valueChange", "complete"] }] });
 }
-WklyDateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-WklyDateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: WklyDateTimePickerComponent, selector: "wkly-datetime-picker", providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => WklyDateTimePickerComponent),
-            multi: true,
-        },
-        {
-            provide: NG_VALIDATORS,
-            useExisting: forwardRef(() => WklyDateTimePickerComponent),
-            multi: true,
-        },
-    ], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section\n  class=\"wkly\"\n  [attr.dir]=\"direction\"\n  [attr.aria-label]=\"\n    this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Date and time picker'\n  \"\n  [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]\"\n  (focusout)=\"touched()\"\n>\n  <header class=\"toolbar\">\n    <button\n      *ngIf=\"hasDate\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n      (click)=\"toggleView()\"\n    >\n      {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n    </button>\n    <span *ngIf=\"hasDate\" class=\"year-control\">{{ title }}</span>\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    <button\n      *ngIf=\"presentation === 'transient'\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t('close')\"\n      (click)=\"cancel()\"\n    >\n      \u00D7\n    </button>\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode] === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span\n        ><span *ngFor=\"let day of weekdays\" role=\"columnheader\">{{ day }}</span>\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"\n                  cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                \"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"\n                    cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                  \"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(-1)\n        \"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(1)\n        \"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              this[WklyPickerInputsPropertyKeys.Disabled] ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=\"true\"]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WklyFieldComponent, selector: "wkly-field", inputs: ["value", "label", "hideLabel", "previousLabel", "nextLabel", "min", "max", "step", "locale", "disabled", "invalid", "labels"], outputs: ["valueChange", "complete"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: "wkly-datetime-picker", providers: [
                         {
@@ -1273,8 +1280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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    <button\n      *ngIf=\"hasDate\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n      (click)=\"toggleView()\"\n    >\n      {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n    </button>\n    <span *ngIf=\"hasDate\" class=\"year-control\">{{ title }}</span>\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    <button\n      *ngIf=\"presentation === 'transient'\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t('close')\"\n      (click)=\"cancel()\"\n    >\n      \u00D7\n    </button>\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode] === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span\n        ><span *ngFor=\"let day of weekdays\" role=\"columnheader\">{{ day }}</span>\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"\n                  cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                \"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"\n                    cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                  \"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(-1)\n        \"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(1)\n        \"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              this[WklyPickerInputsPropertyKeys.Disabled] ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=\"true\"]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    ], template: "<section\n  class=\"wkly\"\n  [attr.dir]=\"direction\"\n  [attr.aria-label]=\"\n    this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Date and time picker'\n  \"\n  [attr.aria-describedby]=\"this[WklyPickerInputsPropertyKeys.AriaDescribedBy]\"\n  (focusout)=\"touched()\"\n>\n  <header class=\"toolbar\">\n    <button\n      *ngIf=\"hasDate\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t(viewMode === 'calendar' ? 'manual' : 'calendar')\"\n      (click)=\"toggleView()\"\n    >\n      {{ viewMode === \"calendar\" ? \"\u2637\" : \"\u25A6\" }}\n    </button>\n    <span *ngIf=\"hasDate\" class=\"year-control\">{{ title }}</span>\n    <span class=\"spacer\"></span\n    ><button\n      type=\"button\"\n      class=\"now\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      (click)=\"now()\"\n    >\n      {{ t(\"now\") }}\n    </button>\n    <button\n      *ngIf=\"presentation === 'transient'\"\n      type=\"button\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"t('close')\"\n      (click)=\"cancel()\"\n    >\n      \u00D7\n    </button>\n  </header>\n  <ng-container *ngIf=\"hasDate && viewMode === 'calendar'\">\n    <div\n      role=\"grid\"\n      [attr.aria-label]=\"\n        this[WklyPickerInputsPropertyKeys.AriaLabel] || 'Calendar'\n      \"\n      [attr.aria-multiselectable]=\"isRange\"\n    >\n      <div\n        role=\"row\"\n        class=\"week-head\"\n        [class.no-label]=\"\n          compact ||\n          (this[WklyPickerInputsPropertyKeys.WeekLabelMode] === 'hidden' &&\n            !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n        \"\n      >\n        <span\n          *ngIf=\"\n            !compact &&\n            (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !== 'hidden' ||\n              this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n          \"\n          role=\"columnheader\"\n          aria-label=\"Week\"\n        ></span\n        ><span *ngFor=\"let day of weekdays\" role=\"columnheader\">{{ day }}</span>\n      </div>\n      <div\n        #scroller\n        class=\"week-scroll\"\n        [style.height.px]=\"visibleCount * rowHeight\"\n        (scroll)=\"scroll($event)\"\n        (scrollend)=\"snapWeek()\"\n      >\n        <div [style.height.px]=\"scrollHeight\" class=\"scroll-space\">\n          <div class=\"rows\" [style.top.px]=\"paddingTop\">\n            <div\n              *ngFor=\"let row of rows; trackBy: trackRow\"\n              role=\"row\"\n              class=\"week-row\"\n              [class.no-label]=\"\n                compact ||\n                (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                  'hidden' &&\n                  !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n              \"\n            >\n              <span\n                *ngIf=\"\n                  !compact &&\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] !==\n                    'hidden' ||\n                    this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                \"\n                role=\"rowheader\"\n                class=\"week-number\"\n                >{{ row.label }}</span\n              >\n              <div\n                *ngFor=\"\n                  let cell of row.cells;\n                  let dayIndex = index;\n                  trackBy: trackCell\n                \"\n                role=\"gridcell\"\n                [attr.data-weekday-index]=\"dayIndex\"\n                [attr.aria-colindex]=\"\n                  dayIndex +\n                  (compact ||\n                  (this[WklyPickerInputsPropertyKeys.WeekLabelMode] ===\n                    'hidden' &&\n                    !this[WklyPickerInputsPropertyKeys.WeekLabelFormatter])\n                    ? 1\n                    : 2)\n                \"\n                [attr.aria-selected]=\"selected(cell.epochDay)\"\n                [attr.aria-disabled]=\"\n                  cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                \"\n                [class.range]=\"inRange(cell.epochDay)\"\n                [class.hidden]=\"cell.hidden\"\n                [class.odd-month]=\"cell.date && cell.date.month % 2 === 1\"\n              >\n                <span [class]=\"'annotation annotation--' + dayIndex\">{{\n                  cell.annotation\n                }}</span>\n                <button\n                  type=\"button\"\n                  class=\"day\"\n                  [attr.data-day]=\"cell.epochDay\"\n                  [attr.aria-label]=\"cell.accessible\"\n                  [attr.aria-current]=\"cell.epochDay === today ? 'date' : null\"\n                  [attr.aria-disabled]=\"\n                    cell.disabled || this[WklyPickerInputsPropertyKeys.Disabled]\n                  \"\n                  [attr.tabindex]=\"\n                    !cell.hidden && cell.epochDay === focused ? 0 : -1\n                  \"\n                  [class.selected]=\"selected(cell.epochDay)\"\n                  [class.today]=\"cell.epochDay === today\"\n                  (focus)=\"focused = cell.epochDay\"\n                  (click)=\"select(cell.epochDay)\"\n                  (keydown)=\"key($event, cell.epochDay)\"\n                >\n                  {{ cell.label }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"week-navigation\">\n      <button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(-1)\n        \"\n        [attr.aria-label]=\"t('previous')\"\n        (click)=\"moveWeek(-1)\"\n      >\n        \u2191</button\n      ><span>{{ title }}</span\n      ><button\n        type=\"button\"\n        [disabled]=\"\n          this[WklyPickerInputsPropertyKeys.Disabled] || !canMoveWeek(1)\n        \"\n        [attr.aria-label]=\"t('next')\"\n        (click)=\"moveWeek(1)\"\n      >\n        \u2193\n      </button>\n    </div>\n  </ng-container>\n  <ng-container\n    *ngFor=\"let draft of drafts; let i = index; trackBy: trackDraft\"\n  >\n    <fieldset\n      *ngIf=\"(i === 0 || isRange) && (hasTime || viewMode === 'manual')\"\n      [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n      [attr.aria-label]=\"isRange ? t(i === 0 ? 'start' : 'end') : null\"\n    >\n      <legend *ngIf=\"isRange\">\n        <ng-container\n          *ngIf=\"\n            i === 1 && hasDate && viewMode === 'manual';\n            else endpointLabel\n          \"\n        >\n          <span class=\"end-view-toggle\">\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'date'\"\n              (click)=\"toggleEndView('date')\"\n            >\n              {{ t(\"end\") }}\n            </button>\n            <button\n              type=\"button\"\n              [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n              [attr.aria-pressed]=\"endView === 'days'\"\n              (click)=\"toggleEndView('days')\"\n            >\n              {{ inDaysLabel }}\n            </button>\n          </span>\n        </ng-container>\n        <ng-template #endpointLabel>{{\n          t(i === 0 ? \"start\" : \"end\")\n        }}</ng-template>\n      </legend>\n      <div\n        *ngIf=\"\n          i === 1 && hasDate && viewMode === 'manual' && endView === 'days'\n        \"\n        class=\"date-fields in-days-fields\"\n      >\n        <span class=\"resulting-end-date\" [attr.aria-label]=\"t('endDate')\">{{\n          resultingEndDate\n        }}</span>\n        <wkly-field\n          [label]=\"t('days')\"\n          [hideLabel]=\"true\"\n          [previousLabel]=\"t('daysPrevious')\"\n          [nextLabel]=\"t('daysNext')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"inDays\"\n          [min]=\"-9999\"\n          [max]=\"9999\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"days($event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"\n          hasDate && viewMode === 'manual' && (i === 0 || endView === 'date')\n        \"\n        class=\"date-fields\"\n      >\n        <wkly-field\n          [label]=\"t('day')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.day\"\n          [min]=\"1\"\n          [max]=\"31\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'day', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('month')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.month\"\n          [min]=\"1\"\n          [max]=\"monthCount(draft)\"\n          [labels]=\"months(draft)\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'month', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('year')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.date.year\"\n          [min]=\"adapter.supportedYearRange[0]\"\n          [max]=\"adapter.supportedYearRange[1]\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'year', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n      </div>\n      <div\n        *ngIf=\"hasTime\"\n        class=\"time-fields\"\n        [class.seconds]=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n      >\n        <wkly-field\n          [label]=\"t('hour')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"displayHour(draft)\"\n          [min]=\"effectiveHourCycle === 'h12' ? 1 : 0\"\n          [max]=\"effectiveHourCycle === 'h12' ? 12 : 23\"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'hour', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          [label]=\"t('minute')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.minute\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.MinuteStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.MinuteStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.MinuteStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'minute', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <wkly-field\n          *ngIf=\"this[WklyPickerInputsPropertyKeys.ShowSeconds]\"\n          [label]=\"t('second')\"\n          [locale]=\"effectiveLocale\"\n          [value]=\"draft.second\"\n          [max]=\"59\"\n          [step]=\"\n            this[WklyPickerInputsPropertyKeys.SecondStep] > 0 &&\n            60 % this[WklyPickerInputsPropertyKeys.SecondStep] === 0\n              ? this[WklyPickerInputsPropertyKeys.SecondStep]\n              : 1\n          \"\n          [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n          [invalid]=\"!!errors.length\"\n          (valueChange)=\"field(i, 'second', $event)\"\n          (complete)=\"finish()\"\n        ></wkly-field>\n        <div class=\"period\">\n          <button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) < 12\n            \"\n            (click)=\"period(i, 'am')\"\n          >\n            {{ t(\"am\") }}</button\n          ><button\n            type=\"button\"\n            [disabled]=\"\n              this[WklyPickerInputsPropertyKeys.Disabled] ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] !== 'switchable'\n            \"\n            [attr.aria-pressed]=\"effectiveHourCycle === 'h24'\"\n            (click)=\"period(i, '24')\"\n          >\n            24</button\n          ><button\n            *ngIf=\"\n              effectiveHourCycle === 'h12' ||\n              this[WklyPickerInputsPropertyKeys.HourCycle] === 'switchable'\n            \"\n            type=\"button\"\n            [disabled]=\"this[WklyPickerInputsPropertyKeys.Disabled]\"\n            [attr.aria-pressed]=\"\n              effectiveHourCycle === 'h12' && (draft.hour || 0) >= 12\n            \"\n            (click)=\"period(i, 'pm')\"\n          >\n            {{ t(\"pm\") }}\n          </button>\n        </div>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"validation\" role=\"status\" aria-live=\"polite\">\n    <p *ngFor=\"let err of errors\">! {{ t(err.messageKey) }}</p>\n  </div>\n  <footer *ngIf=\"submitVisible\">\n    <button\n      type=\"button\"\n      class=\"confirm\"\n      [disabled]=\"!canSubmit\"\n      (click)=\"submit()\"\n    >\n      {{ t(\"confirm\") }}\n    </button>\n  </footer>\n</section>\n", styles: [":host{display:block;width:100%;box-sizing:border-box;--wkly-background-color: #fff;--wkly-background-color-alternate: #fafafa;--wkly-text-color: #192c28;--wkly-muted-color: #52635e;--wkly-border-color: #dce5e1;--wkly-accent-color: #176c55;--wkly-accent-color-alternate: #6ea494;--wkly-accent-text-color: #fff;--wkly-range-color: #e5f1ee;--wkly-error-color: #b42318;--wkly-focus-color: #245bd6;--wkly-size-multiplier: 1;--wkly-size-unit: 3.5em;color:var(--wkly-text-color);font:14px/1.4 system-ui,sans-serif;container-type:inline-size}.wkly{background:var(--wkly-background-color);border:1px solid var(--wkly-border-color);border-radius:14px;overflow:hidden;min-width:0;font-size:calc(14px*clamp(1,var(--wkly-size-multiplier),1.5))}button{font:inherit;color:inherit;min-width:var(--wkly-size-unit);min-height:var(--wkly-size-unit);border:0;background:transparent;border-radius:8px;cursor:pointer}button:hover:not(:disabled):not([aria-disabled=true]){background:var(--wkly-accent-color-alternate)}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;gap:7px;padding:12px 0}.end-view-toggle{display:inline-flex}.end-view-toggle button{min-height:0;min-width:0;padding:0 6px;border-radius:0;line-height:inherit}.end-view-toggle button:first-child{padding-inline-start:0}.end-view-toggle button+button{border-inline-start:1px solid var(--wkly-text-color)}.end-view-toggle button[aria-pressed=false]{color:var(--wkly-muted-color);font-weight:400}.in-days-fields{grid-template-columns:minmax(0,1fr);gap:0;text-align:center}.resulting-end-date{font-size:11px;color:var(--wkly-muted-color);height:1.4em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.time-fields{display:grid;grid-template-columns:1fr 1fr 52px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}.confirm:hover:not(:disabled){background:var(--wkly-accent-color-alternate)}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
                 }] }, { type: undefined, decorators: [{
@@ -1292,13 +1299,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }] }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { scroller: [{
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { scroller: [{
                 type: ViewChild,
                 args: ["scroller"]
             }] } });
 
 /** Native-dialog factory. Browser resources are allocated only by open(). */
 class WklyDateTimePickerDialogService {
+    resolver;
+    injector;
+    app;
+    document;
+    platform;
     constructor(resolver, injector, app, document, platform) {
         this.resolver = resolver;
         this.injector = injector;
@@ -1374,30 +1386,31 @@ class WklyDateTimePickerDialogService {
             },
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
 }
-WklyDateTimePickerDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerDialogService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ApplicationRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-WklyDateTimePickerDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ApplicationRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }]; } });
+                }] }] });
 /** Shared trigger lifecycle; optional presentation packages extend this class. */
 class WklyTriggerBase extends WklyPickerInputs {
+    element;
+    ref = null;
+    subscriptions = [];
+    errors = [];
+    change = () => { };
+    touched = () => { };
+    validation = () => { };
     constructor(element) {
         super();
         this.element = element;
-        this.ref = null;
-        this.subscriptions = [];
-        this.errors = [];
-        this.change = () => { };
-        this.touched = () => { };
-        this.validation = () => { };
     }
     open() {
         if (this[WklyPickerInputsPropertyKeys.Disabled] || this.ref)
@@ -1535,12 +1548,12 @@ class WklyTriggerBase extends WklyPickerInputs {
         this.open();
         this.ref?.component.instance.scrollToValue(value, options);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: WklyTriggerBase, host: { listeners: { "click": "open()", "keydown": "key($event)", "blur": "blur()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-WklyTriggerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-WklyTriggerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: WklyTriggerBase, host: { listeners: { "click": "open()", "keydown": "key($event)", "blur": "blur()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyTriggerBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyTriggerBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { open: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { open: [{
                 type: HostListener,
                 args: ["click"]
             }], key: [{
@@ -1551,6 +1564,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 args: ["blur"]
             }] } });
 class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
+    service;
+    triggerInjector;
     constructor(element, service, triggerInjector) {
         super(element);
         this.service = service;
@@ -1559,21 +1574,21 @@ 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: "17.3.12", 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: "17.3.12", type: WklyDateTimePickerDialogDirective, selector: "[wklyDateTimePickerDialog]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
+                multi: true,
+            },
+        ], exportAs: ["wklyDialog"], usesInheritance: true, ngImport: i0 });
 }
-WklyDateTimePickerDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerDialogDirective, deps: [{ token: i0.ElementRef }, { token: WklyDateTimePickerDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-WklyDateTimePickerDialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: WklyDateTimePickerDialogDirective, selector: "[wklyDateTimePickerDialog]", providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
-            multi: true,
-        },
-        {
-            provide: NG_VALIDATORS,
-            useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
-            multi: true,
-        },
-    ], exportAs: ["wklyDialog"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[wklyDateTimePickerDialog]",
@@ -1591,16 +1606,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         },
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: WklyDateTimePickerDialogService }, { type: i0.Injector }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: WklyDateTimePickerDialogService }, { type: i0.Injector }] });
 
 class WklyDateTimePickerModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
+            WklyDateTimePickerDialogDirective,
+            WklyFieldComponent], imports: [CommonModule], exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
 }
-WklyDateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WklyDateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
-        WklyDateTimePickerDialogDirective,
-        WklyFieldComponent], imports: [CommonModule], exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective] });
-WklyDateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -1609,7 +1624,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         WklyDateTimePickerDialogDirective,
                         WklyFieldComponent,
                     ],
-                    entryComponents: [WklyDateTimePickerComponent],
                     exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective],
                 }]
         }] });