@wkly/datetime-picker 12.1.0 → 13.1.0

package/fesm2015/wkly-datetime-picker.mjs

@@ -0,0 +1,1629 @@
+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 * as i2 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';
+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() }),
+});
+const WKLY_CONFIG = new InjectionToken("WKLY_CONFIG", { providedIn: "root", factory: () => ({}) });
+const WKLY_LOCALIZATION = new InjectionToken("WKLY_LOCALIZATION", { providedIn: "root", factory: () => ({}) });
+const WKLY_TRANSLATIONS = new InjectionToken("WKLY_TRANSLATIONS", { providedIn: "root", factory: () => ({}) });
+/** 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();
+    }
+}
+_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: "13.4.0", ngImport: i0, type: WklyPickerInputs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+WklyPickerInputs.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: WklyPickerInputs, decorators: [{
+            type: Directive,
+            args: [{
+                    inputs: [
+                        "mode",
+                        "value",
+                        "calendarAdapter",
+                        "locale",
+                        "weekOffset",
+                        "viewportPreset",
+                        "hourCycle",
+                        "showSeconds",
+                        "minuteStep",
+                        "secondStep",
+                        "min",
+                        "max",
+                        "isDateDisabled",
+                        "isTimeDisabled",
+                        "rangeValidator",
+                        "allowRangeAcrossDisabled",
+                        "required",
+                        "disabled",
+                        "weekLabelMode",
+                        "weekLabelFormatter",
+                        "weekCacheSize",
+                        "overscanWeeks",
+                        "ariaLabel",
+                        "ariaDescribedBy",
+                        "initialEpochDay",
+                        "closeOnBackdrop",
+                        "validators",
+                        "translations",
+                    ],
+                    outputs: [
+                        "valueChange",
+                        "validationChange",
+                        "opened",
+                        "closed",
+                        "viewportChange",
+                        "viewModeChange",
+                    ],
+                }]
+        }] });
+
+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;
+    }
+    get display() {
+        if (this.typed !== null)
+            return this.typed;
+        return this.value === null
+            ? ""
+            : this.labels
+                ? this.labels[this.value - this.min] || String(this.value)
+                : new Intl.NumberFormat(this.locale, {
+                    useGrouping: false,
+                    minimumIntegerDigits: this.max < 60 ? 2 : 1,
+                }).format(this.value);
+    }
+    ngOnChanges(changes) {
+        if (changes.value && this.min < 0 && this.typed !== null) {
+            const typedValue = this.typed === "" || this.typed === "-" ? null : Number(this.typed);
+            if (this.value !== typedValue) {
+                // External date edits replace a pending relative-day preview.
+                this.cancelInput();
+                this.typed = null;
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.cancelInput();
+        if (this.wheelTimer !== null)
+            clearTimeout(this.wheelTimer);
+    }
+    next(delta) {
+        const count = Math.floor((this.max - this.min) / this.step) + 1;
+        return (this.min +
+            floorMod(Math.floor(((this.value === null ? this.min : this.value) - this.min) /
+                this.step) + delta, count) *
+                this.step);
+    }
+    neighbor(delta) {
+        const n = this.next(delta);
+        return this.labels
+            ? this.labels[n - this.min] || ""
+            : new Intl.NumberFormat(this.locale, { useGrouping: false }).format(n);
+    }
+    stepBy(delta) {
+        if (this.disabled)
+            return;
+        this.scrollBy(delta);
+        this.complete.emit();
+    }
+    begin(event) {
+        this.before = this.value;
+        event.target.select();
+    }
+    type(event) {
+        if (this.disabled)
+            return;
+        const input = event.target;
+        const raw = input.value;
+        const numeric = Array.from(raw).every((character) => normalizeDigits(character).length === 1);
+        if (this.min < 0 && !this.labels) {
+            // Preserve the sign while using the same locale digit normalization.
+            const signed = raw
+                .replace(/[\u200e\u200f\u061c]/g, "")
+                .replace(/\u2212/g, "-");
+            const digits = normalizeDigits(signed);
+            this.typed = input.value = (signed.startsWith("-") ? "-" : "") + digits;
+            this.value =
+                digits === ""
+                    ? null
+                    : Math.max(this.min, Math.min(this.max, Number(this.typed)));
+            if (this.value !== null && Number(this.typed) !== this.value)
+                this.typed = input.value = String(this.value);
+        }
+        else if (numeric) {
+            const normalized = normalizeDigits(raw);
+            this.typed = input.value =
+                this.min >= 0 && this.max < 100 ? normalized.slice(-2) : normalized;
+            this.value = this.typed === "" ? null : Number(this.typed);
+        }
+        else if (this.labels) {
+            const search = raw.trim().toLocaleLowerCase(this.locale);
+            this.typed = raw;
+            const matches = this.labels
+                .map((label, index) => ({ label, index }))
+                .filter((item) => item.label.toLocaleLowerCase(this.locale).includes(search));
+            this.value = matches.length === 1 ? this.min + matches[0].index : null;
+        }
+        else {
+            this.typed = input.value = normalizeDigits(raw);
+            this.value = this.typed === "" ? null : Number(this.typed);
+        }
+        this.valueChange.emit(this.value);
+        this.cancelInput();
+        if (!numeric && this.labels && this.value !== null)
+            this.complete.emit();
+        this.inputTimer = setTimeout(() => {
+            this.inputTimer = null;
+            this.typed = null;
+            if (!this.disabled)
+                this.complete.emit();
+        }, 1000);
+    }
+    key(event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.cancelInput();
+            this.typed = null;
+            this.value = this.before;
+            this.valueChange.emit(this.before);
+            event.target.value = this.display;
+            event.target.blur();
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+            this.finish();
+        }
+        const delta = event.key === "ArrowUp"
+            ? -1
+            : event.key === "ArrowDown"
+                ? 1
+                : event.key === "PageUp"
+                    ? -5
+                    : event.key === "PageDown"
+                        ? 5
+                        : 0;
+        if (delta) {
+            event.preventDefault();
+            this.stepBy(delta);
+        }
+    }
+    finish() {
+        this.cancelInput();
+        this.typed = null;
+        this.complete.emit();
+    }
+    wheel(event) {
+        if (this.disabled || Math.abs(event.deltaY) < 1)
+            return;
+        event.preventDefault();
+        this.scrollBy(event.deltaY > 0 ? 1 : -1);
+        if (this.wheelTimer !== null)
+            clearTimeout(this.wheelTimer);
+        this.wheelTimer = setTimeout(() => {
+            this.wheelTimer = null;
+            this.complete.emit();
+        }, 140);
+    }
+    touchStart(event) {
+        this.touchY = event.touches[0].clientY;
+        this.touchSteps = 0;
+        this.touchChanged = false;
+    }
+    touchMove(event) {
+        this.applyTouchY(event.touches[0].clientY);
+    }
+    touchEnd(event) {
+        this.applyTouchY(event.changedTouches[0].clientY);
+        if (this.touchChanged)
+            this.complete.emit();
+        this.touchChanged = false;
+    }
+    cancelInput() {
+        if (this.inputTimer !== null)
+            clearTimeout(this.inputTimer);
+        this.inputTimer = null;
+    }
+    scrollBy(delta) {
+        if (this.disabled || !delta)
+            return;
+        this.cancelInput();
+        this.typed = null;
+        this.value = this.next(delta);
+        this.valueChange.emit(this.value);
+    }
+    applyTouchY(y) {
+        // Count total gesture steps so repeated move events do not duplicate changes.
+        if (this.disabled)
+            return;
+        const delta = this.touchY - y;
+        const steps = Math.abs(delta) > 16
+            ? Math.sign(delta) * Math.max(1, Math.round(Math.abs(delta) / 40))
+            : 0;
+        const change = steps - this.touchSteps;
+        if (!change)
+            return;
+        this.scrollBy(change);
+        this.touchSteps = steps;
+        this.touchChanged = true;
+    }
+}
+WklyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WklyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: WklyFieldComponent, selector: "wkly-field", inputs: { value: "value", label: "label", hideLabel: "hideLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", min: "min", max: "max", step: "step", locale: "locale", disabled: "disabled", invalid: "invalid", labels: "labels" }, outputs: { valueChange: "valueChange", complete: "complete" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"field\"\n  (wheel)=\"wheel($event)\"\n  (touchstart)=\"touchStart($event)\"\n  (touchmove)=\"touchMove($event)\"\n  (touchend)=\"touchEnd($event)\"\n  (touchcancel)=\"touchEnd($event)\"\n>\n  <span *ngIf=\"!hideLabel\" class=\"label\">{{ label }}</span>\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"previousLabel || label + ': previous'\"\n    (click)=\"stepBy(-1)\"\n  >\n    {{ neighbor(-1) }}\n  </button>\n  <input\n    [attr.aria-label]=\"label\"\n    [attr.aria-invalid]=\"invalid\"\n    [disabled]=\"disabled\"\n    [value]=\"display\"\n    [attr.inputmode]=\"labels ? 'text' : min < 0 ? 'text' : 'numeric'\"\n    autocomplete=\"off\"\n    (focus)=\"begin($event)\"\n    (input)=\"type($event)\"\n    (blur)=\"finish()\"\n    (keydown)=\"key($event)\"\n  />\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"nextLabel || label + ': next'\"\n    (click)=\"stepBy(1)\"\n  >\n    {{ neighbor(1) }}\n  </button>\n</div>\n", styles: [".field{display:flex;flex-direction:column;align-items:stretch;min-width:0;text-align:center;touch-action:pan-x}.label{font-size:11px;color:var(--wkly-muted-color, #54616e);margin-bottom:4px}button,input{font:inherit;box-sizing:border-box;min-height:44px;width:100%;border:0;text-align:center;background:transparent;color:inherit;border-radius:7px}button{color:var(--wkly-muted-color, #54616e);cursor:pointer}input{font-size:18px;font-weight:650;background:var(--wkly-range-color, #e5f1ee);border-block:2px solid var(--wkly-accent-color, #176c55)}input[aria-invalid=true]{border-color:var(--wkly-error-color, #b42318)}:focus-visible{outline:2px solid var(--wkly-focus-color, #124ee0);outline-offset:1px}button:disabled,input:disabled{opacity:.45}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled){background:var(--wkly-range-color, #e5f1ee)}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
+            }], previousLabel: [{
+                type: Input
+            }], nextLabel: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], complete: [{
+                type: Output
+            }] } });
+
+class WklyDateTimePickerComponent extends WklyPickerInputs {
+    constructor(defaultLocale, defaults, clock, strings, defaultTranslations, platform, host, changeDetector) {
+        super();
+        this.defaultLocale = defaultLocale;
+        this.defaults = defaults;
+        this.clock = clock;
+        this.strings = strings;
+        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() {
+        this.initialize();
+    }
+    ngOnChanges(changes) {
+        if (this.initialized) {
+            if (Object.keys(changes).length === 1 &&
+                changes[WklyPickerInputsPropertyKeys.Value] &&
+                this.emittedValue ===
+                    JSON.stringify(this[WklyPickerInputsPropertyKeys.Value])) {
+                this.emittedValue = null;
+                return;
+            }
+            const focus = this.focused;
+            this.configure();
+            if (changes[WklyPickerInputsPropertyKeys.Value] ||
+                changes[WklyPickerInputsPropertyKeys.Mode] ||
+                changes[WklyPickerInputsPropertyKeys.CalendarAdapter]) {
+                this.load(this[WklyPickerInputsPropertyKeys.Value]);
+                this.position(this.focused, true);
+            }
+            else {
+                this.check();
+                if (changes[WklyPickerInputsPropertyKeys.ViewportPreset])
+                    this.position(focus, true);
+                else
+                    this.scrollToEpochDay(focus);
+            }
+        }
+    }
+    initialize() {
+        if (this.initialized)
+            return;
+        this.configure();
+        const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay];
+        this.today = this.browser
+            ? Math.floor(this.clock.now().getTime() / 86400000)
+            : initialEpochDay === null
+                ? 0
+                : initialEpochDay;
+        this.focused =
+            initialEpochDay === null
+                ? this.defaults.initialEpochDay === undefined
+                    ? this.today
+                    : this.defaults.initialEpochDay
+                : initialEpochDay;
+        this.load(this[WklyPickerInputsPropertyKeys.Value]);
+        this.initialized = true;
+        this.position(this.focused, true);
+    }
+    configure() {
+        this.configErrors = [];
+        [
+            WklyPickerInputsPropertyKeys.ShowSeconds,
+            WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled,
+            WklyPickerInputsPropertyKeys.Required,
+            WklyPickerInputsPropertyKeys.Disabled,
+            WklyPickerInputsPropertyKeys.CloseOnBackdrop,
+        ].forEach((key) => (this[key] = coerceBoolean(this[key])));
+        this.effectiveLocale =
+            this[WklyPickerInputsPropertyKeys.Locale] ||
+                this.defaults.locale ||
+                this.defaultLocale;
+        this.direction = /^(ar|he|fa|ur)(-|$)/.test(this.effectiveLocale)
+            ? "rtl"
+            : "ltr";
+        this.adapter =
+            this[WklyPickerInputsPropertyKeys.CalendarAdapter] ||
+                new WklyGregorianCalendarAdapter(this.effectiveLocale);
+        try {
+            let firstDay;
+            try {
+                firstDay = getLocaleFirstDayOfWeek(this.effectiveLocale);
+            }
+            catch (_) { }
+            this.effectiveOffset = resolveWeekOffset(this.effectiveLocale, this[WklyPickerInputsPropertyKeys.WeekOffset], this.defaults.weekOffset, firstDay);
+            integer(this[WklyPickerInputsPropertyKeys.WeekCacheSize]);
+            integer(this[WklyPickerInputsPropertyKeys.OverscanWeeks]);
+            if (this[WklyPickerInputsPropertyKeys.WeekCacheSize] < 0 ||
+                this[WklyPickerInputsPropertyKeys.OverscanWeeks] < 0 ||
+                this[WklyPickerInputsPropertyKeys.OverscanWeeks] > 50)
+                throw new RangeError();
+            if (![
+                "datetime",
+                "date",
+                "time",
+                "datetime-range",
+                "date-range",
+                "time-range",
+            ].includes(this[WklyPickerInputsPropertyKeys.Mode]))
+                throw new RangeError();
+            const preset = this[WklyPickerInputsPropertyKeys.ViewportPreset];
+            if (preset.kind === "weeks") {
+                integer(preset.visibleWeekCount);
+                if (preset.visibleWeekCount < 1 || preset.visibleWeekCount > 52)
+                    throw new RangeError();
+            }
+            if (preset.kind === "full-month-and-around")
+                for (const n of [
+                    preset.extraWeeksBefore || 0,
+                    preset.extraWeeksAfter || 0,
+                ]) {
+                    integer(n);
+                    if (n < 0 || n > 52)
+                        throw new RangeError();
+                }
+            this.generator = createWeekGenerator({
+                weekOffset: this.effectiveOffset,
+                cacheSize: this[WklyPickerInputsPropertyKeys.WeekCacheSize],
+            });
+        }
+        catch (_) {
+            this.configErrors.push(error("configuration-error", this[WklyPickerInputsPropertyKeys.WeekOffset]));
+            this.generator = createWeekGenerator();
+            this.effectiveOffset = 0;
+        }
+        this.setSupportedScrollRange();
+        const hourCycle = this[WklyPickerInputsPropertyKeys.HourCycle];
+        // Host value/configuration feedback must retain the user's switchable format.
+        if (hourCycle !== "switchable" || this.configuredHourCycle !== hourCycle) {
+            this.effectiveHourCycle =
+                hourCycle === "h12"
+                    ? "h12"
+                    : hourCycle === "locale"
+                        ? new Intl.DateTimeFormat(this.effectiveLocale, {
+                            hour: "numeric",
+                            timeZone: "UTC",
+                        }).resolvedOptions().hour12
+                            ? "h12"
+                            : "h24"
+                        : "h24";
+        }
+        this.configuredHourCycle = hourCycle;
+        this.weekdays = Array.from({ length: 7 }, (_, i) => this.adapter.formatWeekday(this.effectiveOffset + i, "short"));
+    }
+    setSupportedScrollRange() {
+        let [first, last] = this.adapter.supportedEpochDayRange;
+        const [firstYear, lastYear] = this.adapter.supportedYearRange;
+        const yearOf = (day) => this.adapter.epochDayToDate(day).year;
+        if (yearOf(first) < firstYear) {
+            let low = first, high = last;
+            while (low < high) {
+                const mid = Math.floor((low + high) / 2);
+                if (yearOf(mid) < firstYear)
+                    low = mid + 1;
+                else
+                    high = mid;
+            }
+            first = low;
+        }
+        if (yearOf(last) > lastYear) {
+            let low = first, high = last;
+            while (low < high) {
+                const mid = Math.ceil((low + high) / 2);
+                if (yearOf(mid) > lastYear)
+                    high = mid - 1;
+                else
+                    low = mid;
+            }
+            last = low;
+        }
+        if (first > last ||
+            yearOf(first) < firstYear ||
+            yearOf(first) > lastYear ||
+            yearOf(last) < firstYear ||
+            yearOf(last) > lastYear)
+            throw new RangeError("No supported days within the calendar year range");
+        this.firstSupportedDay = first;
+        this.lastSupportedDay = last;
+        this.firstSupportedWeek = absoluteWeekOf(first, this.effectiveOffset);
+        this.lastSupportedWeek = absoluteWeekOf(last, this.effectiveOffset);
+    }
+    clampFirstWeek(week) {
+        // Keep supported weeks inside the viewport; renderRows adds the buffer rows.
+        const last = Math.max(this.firstSupportedWeek, this.lastSupportedWeek - this.visibleCount + 1);
+        return Math.max(this.firstSupportedWeek, Math.min(last, week));
+    }
+    ngAfterViewInit() {
+        this.resetScroll();
+        if (this.browser && typeof ResizeObserver !== "undefined") {
+            this.observer = new ResizeObserver(() => {
+                this.compact = this.host.nativeElement.clientWidth < 338;
+                const row = this.host.nativeElement.querySelector(".week-row");
+                // CSS heights and scrollTop use layout pixels; client rectangles include zoom.
+                const height = row ? parseFloat(getComputedStyle(row).height) : 0;
+                if (height && height !== this.rowHeight) {
+                    this.rowHeight = height;
+                    this.scrollHeight = this.rowHeight * 2001;
+                    this.renderRows();
+                    this.resetScroll();
+                }
+            });
+            this.observer.observe(this.host.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        if (this.observer)
+            this.observer.disconnect();
+        if (this.scrollEndTimer)
+            clearTimeout(this.scrollEndTimer);
+        if (this.generator)
+            this.generator.clearCache();
+    }
+    t(key) {
+        return resolveWklyTranslation(key, this.effectiveLocale, this[WklyPickerInputsPropertyKeys.Translations] ||
+            this.defaultTranslations, this.strings);
+    }
+    get isRange() {
+        return this[WklyPickerInputsPropertyKeys.Mode].endsWith("-range");
+    }
+    get hasDate() {
+        return !this[WklyPickerInputsPropertyKeys.Mode].startsWith("time");
+    }
+    get hasTime() {
+        return (this[WklyPickerInputsPropertyKeys.Mode] !== "date" &&
+            this[WklyPickerInputsPropertyKeys.Mode] !== "date-range");
+    }
+    get submitVisible() {
+        return (this.presentation === "transient" &&
+            (this[WklyPickerInputsPropertyKeys.Mode] !== "date" ||
+                this.viewMode === "manual"));
+    }
+    get title() {
+        try {
+            const d = this.adapter.epochDayToDate(Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, firstEpochDayOf(this.anchorWeek, this.effectiveOffset))));
+            return this.adapter.formatMonth(d) + " " + this.adapter.formatYear(d);
+        }
+        catch (_) {
+            return "";
+        }
+    }
+    get canSubmit() {
+        return (!this[WklyPickerInputsPropertyKeys.Disabled] &&
+            !this.errors.length &&
+            this.pendingValue !== null);
+    }
+    blank(day) {
+        const safe = Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, day));
+        return {
+            date: this.adapter.epochDayToDate(safe),
+            hour: 0,
+            minute: 0,
+            second: 0,
+            present: false,
+        };
+    }
+    load(value) {
+        this.drafts = [this.blank(this.focused), this.blank(this.focused)];
+        const validation = validateSelection(value, this, this.adapter);
+        if (value !== null && !validation.length) {
+            const values = typeof value === "string" ? [value] : value;
+            values.forEach((v, i) => {
+                const d = decodeIso(v);
+                this.drafts[i] = {
+                    date: this.hasDate
+                        ? this.adapter.epochDayToDate(d.epochDay)
+                        : this.blank(this.today).date,
+                    hour: d.hour,
+                    minute: d.minute,
+                    second: d.second,
+                    present: true,
+                };
+                if (i === 0 && this.hasDate)
+                    this.focused = d.epochDay;
+            });
+        }
+        if (validation.length) {
+            this.pendingValue = null;
+            this.report(validation);
+        }
+        else
+            this.check();
+    }
+    writeValue(value) {
+        this[WklyPickerInputsPropertyKeys.Value] = value;
+        if (this.initialized) {
+            this.load(value);
+            this.position(this.focused, true);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this[WklyPickerInputsPropertyKeys.Disabled] = disabled;
+    }
+    validate(_control) {
+        return this.errors.length ? { wkly: this.errors } : null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChanged = fn;
+    }
+    touched() {
+        Promise.resolve().then(() => this.onTouched());
+    }
+    report(errors) {
+        const changed = JSON.stringify(this.errors) !== JSON.stringify(errors);
+        this.errors = errors;
+        if (changed) {
+            this[WklyPickerOutputsPropertyKeys.ValidationChange].emit(errors);
+            this.validatorChanged();
+        }
+    }
+    check() {
+        const result = validateDrafts({
+            drafts: this.drafts,
+            configErrors: this.configErrors,
+            adapter: this.adapter,
+            selection: this,
+            mode: this[WklyPickerInputsPropertyKeys.Mode],
+            isRange: this.isRange,
+            hasDate: this.hasDate,
+            hasTime: this.hasTime,
+            showSeconds: this[WklyPickerInputsPropertyKeys.ShowSeconds],
+            required: this[WklyPickerInputsPropertyKeys.Required],
+        });
+        this.pendingValue = result.pendingValue;
+        this.report(result.errors);
+    }
+    trackDraft(index) {
+        // Endpoint controls keep their identity and focus when draft objects swap.
+        return index;
+    }
+    orderDrafts() {
+        if (!this.isRange || !this.drafts.every((draft) => draft.present))
+            return;
+        if (this.drafts.some((draft) => draft.unsupportedEpochDay !== undefined))
+            return;
+        try {
+            const a = this.drafts[0], b = this.drafts[1];
+            const key = (d) => this.adapter.dateToEpochDay(d.date) * 86400 +
+                (d.hour || 0) * 3600 +
+                (d.minute || 0) * 60 +
+                (d.second || 0);
+            if (key(a) > key(b))
+                this.drafts = [b, a];
+        }
+        catch (_) {
+            // Impossible or incomplete dates remain editable until corrected.
+        }
+    }
+    finish() {
+        if (this[WklyPickerInputsPropertyKeys.Disabled])
+            return;
+        this.orderDrafts();
+        if (this.viewMode === "manual" && this.hasDate)
+            this.positionOnManualDate();
+        this.check();
+        if (this.presentation === "inline" && this.canSubmit)
+            this.commit();
+    }
+    commit() {
+        if (!this.canSubmit)
+            return;
+        const next = this.pendingValue;
+        if (JSON.stringify(next) !==
+            JSON.stringify(this[WklyPickerInputsPropertyKeys.Value])) {
+            this[WklyPickerInputsPropertyKeys.Value] = next;
+            this.emittedValue = JSON.stringify(next);
+            this.onChange(next);
+            this[WklyPickerOutputsPropertyKeys.ValueChange].emit(next);
+        }
+        this.onTouched();
+    }
+    submit(reason = "submit") {
+        this.check();
+        if (!this.canSubmit)
+            return;
+        this.commit();
+        if (this.presentation === "transient")
+            this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
+    }
+    cancel(reason = "close-button") {
+        if (this[WklyPickerInputsPropertyKeys.Disabled])
+            return;
+        this.load(this[WklyPickerInputsPropertyKeys.Value]);
+        this.onTouched();
+        this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
+    }
+    now() {
+        if (this[WklyPickerInputsPropertyKeys.Disabled])
+            return;
+        const n = this.clock.now();
+        const day = Math.floor(n.getTime() / 86400000);
+        this.drafts = [0, 1].map((index) => (Object.assign(Object.assign({}, this.clockDraft(day, n)), { present: index === 0 || this.isRange })));
+        if (this.hasDate &&
+            (day < this.firstSupportedDay || day > this.lastSupportedDay)) {
+            this.report([error("unsupported-adapter-date", day)]);
+            return;
+        }
+        this.focused = day;
+        this.position(day, true);
+        this.check();
+        this.submit("now");
+    }
+    clockDraft(day, now) {
+        return Object.assign(Object.assign({}, this.blank(day)), { hour: now.getUTCHours(), minute: Math.floor(now.getUTCMinutes() / this[WklyPickerInputsPropertyKeys.MinuteStep]) * this[WklyPickerInputsPropertyKeys.MinuteStep], second: this[WklyPickerInputsPropertyKeys.ShowSeconds]
+                ? Math.floor(now.getUTCSeconds() / this[WklyPickerInputsPropertyKeys.SecondStep]) * this[WklyPickerInputsPropertyKeys.SecondStep]
+                : 0 });
+    }
+    initializeManualRange() {
+        if (!this.isRange ||
+            !this.hasDate ||
+            this.drafts.every((draft) => draft.present))
+            return;
+        let seed = this.drafts.find((draft) => draft.present);
+        if (!seed) {
+            if (this[WklyPickerInputsPropertyKeys.Value] !== null)
+                return;
+            const now = this.clock.now();
+            const initialEpochDay = this[WklyPickerInputsPropertyKeys.InitialEpochDay];
+            const day = initialEpochDay === null
+                ? this.defaults.initialEpochDay === undefined
+                    ? Math.floor(now.getTime() / 86400000)
+                    : this.defaults.initialEpochDay
+                : initialEpochDay;
+            seed = Object.assign(Object.assign({}, this.clockDraft(day, now)), { present: true });
+        }
+        // Complete missing endpoints without replacing selected or invalid drafts.
+        const initial = seed;
+        this.drafts = this.drafts.map((draft) => draft.present ? draft : Object.assign(Object.assign({}, initial), { date: Object.assign({}, initial.date) }));
+        this.finish();
+        // Positioning renders before validation; refresh completion controls afterward.
+        this.changeDetector.markForCheck();
+    }
+    toggleView() {
+        if (this[WklyPickerInputsPropertyKeys.Disabled] || !this.hasDate)
+            return;
+        this.viewMode = this.viewMode === "calendar" ? "manual" : "calendar";
+        if (this.viewMode === "manual")
+            this.initializeManualRange();
+        if (this.viewMode === "calendar")
+            this.positionOnManualDate();
+        this[WklyPickerOutputsPropertyKeys.ViewModeChange].emit(this.viewMode);
+        if (this.viewMode === "calendar")
+            setTimeout(() => this.resetScroll());
+    }
+    positionOnManualDate() {
+        const draft = this.drafts[this.manualDateEndpoint];
+        if (!draft || !draft.present)
+            return;
+        try {
+            // A valid day follows the selection. An impossible day keeps its draft
+            // fields but still shows the chosen month in the calendar.
+            const target = this.adapter.dateToEpochDay(draft.date);
+            this.focused = target;
+            this.position(target, true);
+        }
+        catch (_) {
+            try {
+                const first = this.adapter.dateToEpochDay(Object.assign(Object.assign({}, draft.date), { day: 1 }));
+                this.focused = first;
+                this.position(first, true);
+            }
+            catch (_) { }
+        }
+    }
+    months(draft) {
+        try {
+            return this.adapter.getMonths(draft.date.year).map((m) => m.label);
+        }
+        catch (_) {
+            return [];
+        }
+    }
+    monthCount(draft) {
+        return this.months(draft).length || 12;
+    }
+    get inDays() {
+        return draftDayDifference(this.drafts, this.adapter);
+    }
+    get inDaysLabel() {
+        const days = this.inDays;
+        return this.t("inDays").replace(/{{\s*days\s*}}/g, days === null
+            ? this.t("daysUnavailable")
+            : new Intl.NumberFormat(this.effectiveLocale, {
+                useGrouping: false,
+            }).format(days));
+    }
+    get resultingEndDate() {
+        try {
+            const draft = this.drafts[1];
+            if (draft.unsupportedEpochDay !== undefined ||
+                this.adapter.validateDate(draft.date).length)
+                return "";
+            return [
+                this.adapter.formatDay(draft.date),
+                this.adapter.formatMonth(draft.date),
+                this.adapter.formatYear(draft.date),
+            ].join(" ");
+        }
+        catch (_) {
+            return "";
+        }
+    }
+    toggleEndView(view) {
+        if (this[WklyPickerInputsPropertyKeys.Disabled])
+            return;
+        this.endView = view;
+    }
+    days(value) {
+        if (this[WklyPickerInputsPropertyKeys.Disabled])
+            return;
+        this.manualDateEndpoint = 1;
+        setDraftDayDifference(this.drafts, this.adapter, value);
+        this.check();
+    }
+    field(index, field, value) {
+        if (this[WklyPickerInputsPropertyKeys.Disabled])
+            return;
+        const draft = this.drafts[index];
+        draft.present = true;
+        if (field === "day" || field === "year" || field === "month") {
+            this.manualDateEndpoint = index;
+            delete draft.unsupportedEpochDay;
+            let date = Object.assign(Object.assign({}, draft.date), { [field]: value });
+            if (field === "month") {
+                let month;
+                try {
+                    month = this.adapter
+                        .getMonths(date.year)
+                        .find((m) => m.month === value);
+                }
+                catch (_) { }
+                date = Object.assign(Object.assign({}, date), { monthCode: month ? month.monthCode : "" });
+            }
+            if (field === "year" && value !== null) {
+                try {
+                    const months = this.adapter.getMonths(value);
+                    const month = months.find((m) => m.monthCode === date.monthCode);
+                    if (month)
+                        date = Object.assign(Object.assign({}, date), { month: month.month });
+                }
+                catch (_) { }
+            }
+            draft.date = date;
+        }
+        else if (field === "hour" && this.effectiveHourCycle === "h12")
+            draft.hour =
+                value === null
+                    ? null
+                    : value >= 1 && value <= 12
+                        ? (value % 12) + ((draft.hour || 0) >= 12 ? 12 : 0)
+                        : 24 + value;
+        else
+            draft[field] = value;
+        this.check();
+    }
+    displayHour(draft) {
+        return draft.hour === null
+            ? null
+            : this.effectiveHourCycle === "h12"
+                ? draft.hour % 12 || 12
+                : draft.hour;
+    }
+    period(index, period) {
+        if (this[WklyPickerInputsPropertyKeys.Disabled])
+            return;
+        if (period === "24")
+            this.effectiveHourCycle = "h24";
+        else {
+            this.effectiveHourCycle = "h12";
+            this.drafts[index].hour =
+                ((this.drafts[index].hour || 0) % 12) + (period === "pm" ? 12 : 0);
+            this.drafts[index].present = true;
+            this.finish();
+        }
+    }
+    selected(day) {
+        return this.drafts.some((d) => {
+            try {
+                return d.present && this.adapter.dateToEpochDay(d.date) === day;
+            }
+            catch (_) {
+                return false;
+            }
+        });
+    }
+    inRange(day) {
+        if (!this.isRange || !this.drafts.every((d) => d.present))
+            return false;
+        try {
+            const a = this.adapter.dateToEpochDay(this.drafts[0].date), b = this.adapter.dateToEpochDay(this.drafts[1].date);
+            return day > Math.min(a, b) && day < Math.max(a, b);
+        }
+        catch (_) {
+            return false;
+        }
+    }
+    dayDisabled(day) {
+        var _a, _b;
+        if (day < this.firstSupportedDay || day > this.lastSupportedDay)
+            return true;
+        try {
+            const date = this.adapter.epochDayToDate(day);
+            const isDateDisabled = this[WklyPickerInputsPropertyKeys.IsDateDisabled];
+            if (isDateDisabled &&
+                isDateDisabled(day, {
+                    mode: this[WklyPickerInputsPropertyKeys.Mode],
+                    endpoint: this.isRange
+                        ? ((_a = this.drafts[0]) === null || _a === void 0 ? void 0 : _a.present) && !((_b = this.drafts[1]) === null || _b === void 0 ? void 0 : _b.present)
+                            ? "end"
+                            : "start"
+                        : "single",
+                    calendarDate: date,
+                }))
+                return true;
+            const min = this[WklyPickerInputsPropertyKeys.Min];
+            const max = this[WklyPickerInputsPropertyKeys.Max];
+            if (min && day < decodeIso(min).epochDay)
+                return true;
+            if (max && day > decodeIso(max).epochDay)
+                return true;
+            return false;
+        }
+        catch (_) {
+            return true;
+        }
+    }
+    select(day) {
+        if (this[WklyPickerInputsPropertyKeys.Disabled] || this.dayDisabled(day))
+            return;
+        this.focused = day;
+        const index = this.isRange && this.drafts[0].present && !this.drafts[1].present ? 1 : 0;
+        if (this.isRange && index === 0)
+            this.drafts[1].present = false;
+        delete this.drafts[index].unsupportedEpochDay;
+        this.drafts[index].date = this.adapter.epochDayToDate(day);
+        this.drafts[index].present = true;
+        this.orderDrafts();
+        this.renderRows();
+        this.finish();
+        if (this.presentation === "transient" &&
+            this[WklyPickerInputsPropertyKeys.Mode] === "date" &&
+            this.viewMode === "calendar")
+            this.submit("auto-submit");
+    }
+    key(event, day) {
+        let delta = 0;
+        if (event.key === "ArrowLeft")
+            delta = -1;
+        if (event.key === "ArrowRight")
+            delta = 1;
+        if (event.key === "ArrowUp")
+            delta = -7;
+        if (event.key === "ArrowDown")
+            delta = 7;
+        if (event.key === "PageUp")
+            delta = -7 * (event.shiftKey ? this.visibleCount : 1);
+        if (event.key === "PageDown")
+            delta = 7 * (event.shiftKey ? this.visibleCount : 1);
+        if (event.key === "Home") {
+            event.preventDefault();
+            this.scrollToEpochDay(this.today, { focus: true });
+        }
+        if (delta) {
+            event.preventDefault();
+            const target = day + delta;
+            if (target >= this.firstSupportedDay && target <= this.lastSupportedDay)
+                this.scrollToEpochDay(target, { focus: true });
+        }
+    }
+    position(day, preset = false, options = {}) {
+        day = Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, day));
+        this.anchorWeek = absoluteWeekOf(day, this.effectiveOffset);
+        const viewportPreset = this[WklyPickerInputsPropertyKeys.ViewportPreset];
+        this.clipMonth = preset && viewportPreset.kind === "full-month";
+        if (preset && viewportPreset.kind !== "weeks") {
+            const d = this.adapter.epochDayToDate(day);
+            this.initialMonth = d.year + "/" + d.monthCode;
+            const [start, end] = calendarMonthBounds(this.adapter, day);
+            this.firstWeek = absoluteWeekOf(start, this.effectiveOffset);
+            this.visibleCount =
+                absoluteWeekOf(end, this.effectiveOffset) - this.firstWeek + 1;
+            if (viewportPreset.kind === "full-month-and-around" &&
+                !this.configErrors.length) {
+                const before = viewportPreset.extraWeeksBefore || 0, after = viewportPreset.extraWeeksAfter || 0;
+                this.firstWeek -= before;
+                this.visibleCount += before + after;
+            }
+        }
+        else {
+            if (viewportPreset.kind === "weeks")
+                this.visibleCount = this.configErrors.length
+                    ? 6
+                    : viewportPreset.visibleWeekCount;
+            this.firstWeek =
+                this.anchorWeek -
+                    (options.align === "start"
+                        ? 0
+                        : options.align === "end"
+                            ? this.visibleCount - 1
+                            : Math.floor(this.visibleCount / 2));
+        }
+        this.firstWeek = this.clampFirstWeek(this.firstWeek);
+        this.baseWeek = this.firstWeek - 1000;
+        this.renderRows();
+        // Apply the new runway before writing scrollTop or locating a focus target.
+        this.changeDetector.detectChanges();
+        this.resetScroll();
+    }
+    resetScroll() {
+        // Round week boundaries to avoid scrollTop truncation under CSS zoom.
+        if (this.scroller)
+            this.scroller.nativeElement.scrollTop = Math.round(1000 * this.rowHeight);
+    }
+    scroll(event) {
+        const element = event.target;
+        this.snapPending = true;
+        this.scheduleSnap();
+        // Quantize displacement around the reset point, equally in both directions.
+        const relativeRows = element.scrollTop / this.rowHeight - 1000;
+        const index = 1000 + Math.sign(relativeRows) * Math.round(Math.abs(relativeRows));
+        const requestedFirst = this.baseWeek + index;
+        const first = this.clampFirstWeek(requestedFirst);
+        if (requestedFirst !== first) {
+            element.scrollTop = Math.round((first - this.baseWeek) * this.rowHeight);
+        }
+        if (first === this.firstWeek)
+            return;
+        this.clipMonth = false;
+        this.firstWeek = first;
+        this.anchorWeek = first + Math.floor(this.visibleCount / 2);
+        if (index < 100 || index > 1900) {
+            // Preserve signed displacement from this week; modulo turns fractional
+            // rounding just below a boundary into almost a full row after rebasing.
+            const offset = element.scrollTop - (first - this.baseWeek) * this.rowHeight;
+            this.baseWeek = first - 1000;
+            element.scrollTop = Math.round(1000 * this.rowHeight + offset);
+        }
+        this.renderRows();
+    }
+    scheduleSnap() {
+        if (this.scrollEndTimer)
+            clearTimeout(this.scrollEndTimer);
+        this.scrollEndTimer = setTimeout(() => this.snapWeek(), 200);
+    }
+    snapWeek() {
+        if (this.scrollEndTimer)
+            clearTimeout(this.scrollEndTimer);
+        this.scrollEndTimer = undefined;
+        if (!this.snapPending || !this.scroller)
+            return;
+        this.snapPending = false;
+        // Align the current virtual week without rebuilding or rebasing its rows.
+        const element = this.scroller.nativeElement;
+        const target = Math.round((this.firstWeek - this.baseWeek) * this.rowHeight);
+        if (element.scrollTop !== target)
+            element.scrollTop = target;
+    }
+    showFirstWeek(week) {
+        const first = this.clampFirstWeek(week);
+        if (first === this.firstWeek)
+            return;
+        this.clipMonth = false;
+        this.firstWeek = first;
+        this.anchorWeek = first + Math.floor(this.visibleCount / 2);
+        this.baseWeek = first - 1000;
+        this.renderRows();
+        this.resetScroll();
+    }
+    canMoveWeek(delta) {
+        return this.clampFirstWeek(this.firstWeek + delta) !== this.firstWeek;
+    }
+    moveWeek(delta) {
+        if (!this[WklyPickerInputsPropertyKeys.Disabled])
+            this.showFirstWeek(this.firstWeek + delta);
+    }
+    renderRows() {
+        // Keep the virtual scroll offset here; row data is shared across Angular versions.
+        const overscan = Math.max(0, Math.min(50, this[WklyPickerInputsPropertyKeys.OverscanWeeks] || 0));
+        const start = this.firstWeek - overscan;
+        this.paddingTop = (start - this.baseWeek) * this.rowHeight;
+        this.rows = createWeekRows({
+            generator: this.generator,
+            adapter: this.adapter,
+            startWeek: start,
+            count: this.visibleCount + 2 * overscan,
+            firstVisibleWeek: this.firstWeek,
+            firstSupportedDay: this.firstSupportedDay,
+            lastSupportedDay: this.lastSupportedDay,
+            clipMonth: this.clipMonth,
+            initialMonth: this.initialMonth,
+            weekLabelMode: this[WklyPickerInputsPropertyKeys.WeekLabelMode],
+            weekLabelFormatter: this[WklyPickerInputsPropertyKeys.WeekLabelFormatter] || null,
+            isDayDisabled: (day) => this.dayDisabled(day),
+        });
+        this[WklyPickerOutputsPropertyKeys.ViewportChange].emit({
+            firstVisibleAbsoluteWeek: this.firstWeek,
+            lastVisibleAbsoluteWeek: this.firstWeek + this.visibleCount - 1,
+            anchorAbsoluteWeek: this.anchorWeek,
+        });
+    }
+    // Retain day DOM nodes and keyboard focus when row metadata is regenerated.
+    trackCell(_i, cell) {
+        return cell.epochDay;
+    }
+    trackRow(_i, row) {
+        return row.week.absoluteWeek;
+    }
+    scrollToEpochDay(day, options = {}) {
+        integer(day);
+        this.adapter.epochDayToDate(day);
+        day = Math.max(this.firstSupportedDay, Math.min(this.lastSupportedDay, day));
+        // position renders synchronously; publish the tab stop before that render.
+        if (options.focus)
+            this.focused = day;
+        this.position(day, false, options);
+        if (options.select)
+            this.select(day);
+        if (options.focus)
+            this.focusDay();
+    }
+    scrollToAbsoluteWeek(week, options = {}) {
+        // A boundary week can start before the adapter's first supported day.
+        const first = firstEpochDayOf(week, this.effectiveOffset);
+        this.scrollToEpochDay(week === this.firstSupportedWeek
+            ? Math.max(first, this.firstSupportedDay)
+            : first, options);
+    }
+    scrollToCalendarDate(date, options = {}) {
+        this.scrollToEpochDay(this.adapter.dateToEpochDay(date), options);
+    }
+    scrollToValue(value, options = {}) {
+        this.scrollToEpochDay(decodeIso(value).epochDay, options);
+    }
+    focusDay() {
+        if (!this.browser)
+            return;
+        setTimeout(() => {
+            var _a;
+            if (this.destroyed)
+                return;
+            this.changeDetector.detectChanges();
+            const day = this.host.nativeElement.querySelector('[data-day="' + this.focused + '"]');
+            const fallback = this.host.nativeElement.querySelector("button:not(:disabled),input:not(:disabled)");
+            (_a = (day || fallback)) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        });
+    }
+}
+WklyDateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "12.0.0", version: "13.4.0", 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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled):not([aria-disabled=\"true\"]):not(.selected){background:var(--wkly-accent-color-alternate)}}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;grid-gap:7px;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;grid-gap:8px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"], components: [{ type: WklyFieldComponent, selector: "wkly-field", inputs: ["value", "label", "hideLabel", "previousLabel", "nextLabel", "min", "max", "step", "locale", "disabled", "invalid", "labels"], outputs: ["valueChange", "complete"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyDateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "wkly-datetime-picker", providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WklyDateTimePickerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            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}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled):not([aria-disabled=\"true\"]):not(.selected){background:var(--wkly-accent-color-alternate)}}button:disabled,button[aria-disabled=true]{opacity:.4;cursor:default}button:focus-visible{outline:2px solid var(--wkly-focus-color);outline-offset:-2px}.toolbar{display:flex;align-items:center;padding:8px;gap:3px;border-bottom:1px solid var(--wkly-border-color)}.spacer{flex:1}.year-control{padding:0 6px;font-weight:650;text-align:start;line-height:1.2}.now{color:var(--wkly-accent-color);font-weight:650}.week-head,.week-row{display:grid;grid-template-columns:28px repeat(7,minmax(0,1fr))}.week-head{font-size:.85em;color:var(--wkly-muted-color);height:34px;align-items:center;text-align:center}.week-row{height:calc(var(--wkly-size-unit) * clamp(1,var(--wkly-size-multiplier),1));align-items:end}.no-label{grid-template-columns:repeat(7,minmax(0,1fr))}.week-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:thin;max-height:65vh;touch-action:pan-y}.scroll-space{position:relative}.rows{position:absolute;left:0;right:0}.week-number{font-size:.85em;text-align:center;align-self:end;line-height:var(--wkly-size-unit);color:var(--wkly-muted-color)}[role=gridcell]{position:relative;min-width:0;height:var(--wkly-size-unit);text-align:center}[role=gridcell].odd-month:not(.range):not(.today){background:var(--wkly-background-color-alternate)}.day{width:100%;min-width:0;height:var(--wkly-size-unit);padding:0;border-radius:8px}.annotation{position:absolute;bottom:.25em;white-space:nowrap;font-size:1.25em;font-weight:650;line-height:1;pointer-events:none;z-index:1;color:var(--wkly-muted-color);color:color-mix(in srgb,var(--wkly-muted-color) 50%,transparent);text-shadow:0 0 2px --wkly-background-color,0 0 4px --wkly-background-color}.odd-month .annotation{text-shadow:0 0 2px --wkly-background-color-alternate,0 0 4px --wkly-background-color-alternate}.annotation:empty{display:none}.annotation--0{inset-inline-start:10%;bottom:1.75em}.annotation--1{inset-inline-start:-5%}.annotation--2{inset-inline-start:-20%}.annotation--3{inset-inline-start:-50%;inset-inline-end:-50%}.annotation--4{inset-inline-end:-20%}.annotation--5{inset-inline-end:-5%}.annotation--6{inset-inline-end:10%}.range{background:var(--wkly-range-color)}.day.selected{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);font-weight:700}.today:after{content:\"\";display:block;width:5px;height:5px;background:currentColor;border-radius:50%;position:absolute;bottom:2px;left:calc(50% - 2px)}.today{font-weight:750;box-shadow:inset 0 0 0 1px var(--wkly-accent-color)}.hidden{visibility:hidden}.week-navigation{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--wkly-border-color);font-size:.85em;color:var(--wkly-muted-color)}fieldset{border:0;padding:0 12px;margin:0;min-width:0}legend{padding-top:.85em;font-weight:650;color:var(--wkly-accent-color)}.date-fields{display:grid;grid-template-columns:1fr 2fr 1.4fr;grid-gap:7px;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;grid-gap:8px;gap:8px;padding:14px 0;border-top:1px solid var(--wkly-border-color)}.time-fields.seconds{grid-template-columns:1fr 1fr 1fr 48px}.period{display:flex;flex-direction:column;justify-content:center;gap:2px;padding-top:1.25em}.period button{font-size:.85em}.period [aria-pressed=true]{background:var(--wkly-range-color);box-shadow:inset 0 0 0 1px var(--wkly-accent-color);font-weight:700}.validation{color:var(--wkly-error-color);font-size:.85em}.validation p{margin:.5em .85em}footer{padding:12px;border-top:1px solid var(--wkly-border-color)}.confirm{background:var(--wkly-accent-color);color:var(--wkly-accent-text-color);width:100%;font-weight:650}@media (forced-colors: active){.day.selected{outline:2px solid Highlight}.range{border-bottom:2px solid Highlight}.today{outline:1px dashed CanvasText}}@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important}}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [WKLY_CONFIG]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [WKLY_CLOCK]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [WKLY_LOCALIZATION]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [WKLY_TRANSLATIONS]
+                    }] }, { type: Object, decorators: [{
+                        type: Inject,
+                        args: [PLATFORM_ID]
+                    }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { scroller: [{
+                type: ViewChild,
+                args: ["scroller"]
+            }] } });
+
+/** Native-dialog factory. Browser resources are allocated only by open(). */
+class WklyDateTimePickerDialogService {
+    constructor(resolver, injector, app, document, platform) {
+        this.resolver = resolver;
+        this.injector = injector;
+        this.app = app;
+        this.document = document;
+        this.platform = platform;
+    }
+    open(trigger, onCancel, backdrop = true, injector) {
+        if (!isPlatformBrowser(this.platform))
+            throw new Error("Picker presentations can only open in a browser");
+        const dialog = this.document.createElement("dialog");
+        dialog.setAttribute("aria-label", "Date and time picker");
+        Object.assign(dialog.style, {
+            padding: "0",
+            border: "0",
+            borderRadius: "14px",
+            width: "min(390px, 100vw)",
+            maxWidth: "100vw",
+            maxHeight: "94vh",
+            background: "transparent",
+        });
+        const component = this.resolver
+            .resolveComponentFactory(WklyDateTimePickerComponent)
+            .create(injector || this.injector);
+        component.instance.presentation = "transient";
+        dialog.appendChild(component.location.nativeElement);
+        this.document.body.appendChild(dialog);
+        this.app.attachView(component.hostView);
+        const cancel = (event) => {
+            event.preventDefault();
+            onCancel("escape");
+        };
+        const click = (event) => {
+            if (backdrop && event.target === dialog) {
+                const r = dialog.getBoundingClientRect();
+                if (event.clientX < r.left ||
+                    event.clientX > r.right ||
+                    event.clientY < r.top ||
+                    event.clientY > r.bottom)
+                    onCancel("backdrop");
+            }
+        };
+        const keydown = (event) => {
+            if (event.key !== "Tab")
+                return;
+            const controls = Array.from(dialog.querySelectorAll('button:not(:disabled),input:not(:disabled),[tabindex="0"]')).filter((el) => el.tabIndex >= 0 &&
+                el.getClientRects().length &&
+                getComputedStyle(el).visibility !== "hidden");
+            const first = controls[0], last = controls[controls.length - 1];
+            if (first &&
+                (event.shiftKey
+                    ? this.document.activeElement === first
+                    : this.document.activeElement === last)) {
+                event.preventDefault();
+                (event.shiftKey ? last : first).focus();
+            }
+        };
+        dialog.addEventListener("cancel", cancel);
+        dialog.addEventListener("click", click);
+        dialog.addEventListener("keydown", keydown);
+        dialog.showModal();
+        return {
+            component,
+            destroy: () => {
+                dialog.removeEventListener("cancel", cancel);
+                dialog.removeEventListener("click", click);
+                dialog.removeEventListener("keydown", keydown);
+                dialog.close();
+                this.app.detachView(component.hostView);
+                component.destroy();
+                dialog.remove();
+                trigger.focus();
+            },
+        };
+    }
+}
+WklyDateTimePickerDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: WklyDateTimePickerDialogService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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: [{
+                        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 {
+    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)
+            return;
+        this.ref = this.create();
+        const picker = this.ref.component.instance;
+        this.copy();
+        this.subscriptions = [
+            picker[WklyPickerOutputsPropertyKeys.ValueChange].subscribe((value) => {
+                this[WklyPickerInputsPropertyKeys.Value] = value;
+                this.change(value);
+                this[WklyPickerOutputsPropertyKeys.ValueChange].emit(value);
+                this.display();
+            }),
+            picker[WklyPickerOutputsPropertyKeys.ValidationChange].subscribe((errors) => {
+                this.errors = errors;
+                this[WklyPickerOutputsPropertyKeys.ValidationChange].emit(errors);
+                this.validation();
+            }),
+            picker[WklyPickerOutputsPropertyKeys.Closed].subscribe((reason) => this.close(reason)),
+            picker[WklyPickerOutputsPropertyKeys.ViewportChange].subscribe((value) => this[WklyPickerOutputsPropertyKeys.ViewportChange].emit(value)),
+            picker[WklyPickerOutputsPropertyKeys.ViewModeChange].subscribe((value) => this[WklyPickerOutputsPropertyKeys.ViewModeChange].emit(value)),
+        ];
+        this.ref.component.changeDetectorRef.detectChanges();
+        picker.focusDay();
+        this[WklyPickerOutputsPropertyKeys.Opened].emit();
+    }
+    key(event) {
+        if (event.key === "Enter" ||
+            event.key === " " ||
+            event.key === "ArrowDown") {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    blur() {
+        this.touched();
+    }
+    close(reason = "programmatic") {
+        if (!this.ref)
+            return;
+        const ref = this.ref;
+        this.ref = null;
+        this.subscriptions.forEach((s) => s.unsubscribe());
+        this.subscriptions = [];
+        ref.destroy();
+        this.touched();
+        this[WklyPickerOutputsPropertyKeys.Closed].emit(reason);
+    }
+    ngOnChanges() {
+        [
+            WklyPickerInputsPropertyKeys.ShowSeconds,
+            WklyPickerInputsPropertyKeys.AllowRangeAcrossDisabled,
+            WklyPickerInputsPropertyKeys.Required,
+            WklyPickerInputsPropertyKeys.Disabled,
+            WklyPickerInputsPropertyKeys.CloseOnBackdrop,
+        ].forEach((key) => (this[key] = coerceBoolean(this[key])));
+        this.checkValue();
+        this.display();
+        if (this.ref) {
+            this.copy();
+            this.ref.component.instance.ngOnChanges({
+                [WklyPickerInputsPropertyKeys.Value]: true,
+            });
+            this.ref.component.changeDetectorRef.detectChanges();
+        }
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    copy() {
+        if (this.ref)
+            for (const name of INPUT_NAMES)
+                this.ref.component.instance[name] = this[name];
+    }
+    display() {
+        const host = this.element.nativeElement;
+        if (host.tagName === "INPUT") {
+            host.readOnly = true;
+            const value = this[WklyPickerInputsPropertyKeys.Value];
+            host.value =
+                value === null
+                    ? ""
+                    : typeof value === "string"
+                        ? value
+                        : value.join(" — ");
+            host.disabled = this[WklyPickerInputsPropertyKeys.Disabled];
+            host.setAttribute("aria-haspopup", "dialog");
+        }
+    }
+    checkValue() {
+        this.errors = validateSelection(this[WklyPickerInputsPropertyKeys.Value], this, this[WklyPickerInputsPropertyKeys.CalendarAdapter] ||
+            new WklyGregorianCalendarAdapter(this[WklyPickerInputsPropertyKeys.Locale] || "en-US"));
+        this[WklyPickerOutputsPropertyKeys.ValidationChange].emit(this.errors);
+        this.validation();
+    }
+    writeValue(value) {
+        this[WklyPickerInputsPropertyKeys.Value] = value;
+        this.checkValue();
+        this.display();
+        if (this.ref)
+            this.ref.component.instance.writeValue(value);
+    }
+    registerOnChange(fn) {
+        this.change = fn;
+    }
+    registerOnTouched(fn) {
+        this.touched = fn;
+    }
+    setDisabledState(value) {
+        this[WklyPickerInputsPropertyKeys.Disabled] = value;
+        this.display();
+        if (this.ref)
+            this.ref.component.instance.setDisabledState(value);
+    }
+    validate() {
+        return this.errors.length ? { wkly: this.errors } : null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validation = fn;
+    }
+    scrollToEpochDay(day, options) {
+        var _a;
+        this.open();
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.component.instance.scrollToEpochDay(day, options);
+    }
+    scrollToAbsoluteWeek(week, options) {
+        var _a;
+        this.open();
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.component.instance.scrollToAbsoluteWeek(week, options);
+    }
+    scrollToCalendarDate(date, options) {
+        var _a;
+        this.open();
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.component.instance.scrollToCalendarDate(date, options);
+    }
+    scrollToValue(value, options) {
+        var _a;
+        this.open();
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.component.instance.scrollToValue(value, options);
+    }
+}
+WklyTriggerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyTriggerBase, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+WklyTriggerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: WklyTriggerBase, host: { listeners: { "click": "open()", "keydown": "key($event)", "blur": "blur()" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyTriggerBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { open: [{
+                type: HostListener,
+                args: ["click"]
+            }], key: [{
+                type: HostListener,
+                args: ["keydown", ["$event"]]
+            }], blur: [{
+                type: HostListener,
+                args: ["blur"]
+            }] } });
+class WklyDateTimePickerDialogDirective extends WklyTriggerBase {
+    constructor(element, service, triggerInjector) {
+        super(element);
+        this.service = service;
+        this.triggerInjector = triggerInjector;
+    }
+    create() {
+        return this.service.open(this.element.nativeElement, (reason) => this.close(reason), this[WklyPickerInputsPropertyKeys.CloseOnBackdrop], this.triggerInjector);
+    }
+}
+WklyDateTimePickerDialogDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyDateTimePickerDialogDirective, deps: [{ token: i0.ElementRef }, { token: WklyDateTimePickerDialogService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+WklyDateTimePickerDialogDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", 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: "13.4.0", ngImport: i0, type: WklyDateTimePickerDialogDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[wklyDateTimePickerDialog]",
+                    exportAs: "wklyDialog",
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => WklyDateTimePickerDialogDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: WklyDateTimePickerDialogService }, { type: i0.Injector }]; } });
+
+class WklyDateTimePickerModule {
+}
+WklyDateTimePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyDateTimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WklyDateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyDateTimePickerModule, declarations: [WklyDateTimePickerComponent,
+        WklyDateTimePickerDialogDirective,
+        WklyFieldComponent], imports: [CommonModule], exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective] });
+WklyDateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyDateTimePickerModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: WklyDateTimePickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [
+                        WklyDateTimePickerComponent,
+                        WklyDateTimePickerDialogDirective,
+                        WklyFieldComponent,
+                    ],
+                    entryComponents: [WklyDateTimePickerComponent],
+                    exports: [WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WKLY_CLOCK, WKLY_CONFIG, WKLY_LOCALIZATION, WKLY_TRANSLATIONS, WklyDateTimePickerComponent, WklyDateTimePickerDialogDirective, WklyDateTimePickerDialogService, WklyDateTimePickerModule, WklyFieldComponent, WklyPickerInputs, WklyTriggerBase };
+//# sourceMappingURL=wkly-datetime-picker.mjs.map