@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-datetime-picker.mjs

@@ -0,0 +1,1362 @@
+import { createDateTimeFormat, dateBoundsOf, isDateTimeInRange, dayWindow, isTimeInRange, timeList, isTruncated, isSameTime, isSameDate, nowDateTimeIn, nearestIndex, hourJump, isSameDateTime } from '@slotted/core/date';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { tabbables } from '@slotted/core/focus';
+import { createPositioner } from '@slotted/core/positioner';
+import { createControllable } from '@slotted/core/state';
+import { createTypeahead, isPrintable } from '@slotted/core/typeahead';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Directive, input, booleanAttribute, numberAttribute, output, ElementRef, Injector, DestroyRef, signal, computed, effect, untracked, afterNextRender, TemplateRef, forwardRef, ViewChild, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { datetimePickerMessages } from '@slotted/core/i18n';
+import { SlCalendar } from '@slotted/angular/calendar';
+import { SlDateTimeField, SlDateTimeFieldEnd } from '@slotted/angular/datetime-field';
+import { SlField } from '@slotted/angular/field';
+
+/**
+ * A whole day at a one-minute step, which is the finest whole-day list any
+ * surveyed implementation offers. A day at a one-second step is 86 400 rows and
+ * is a configuration mistake rather than a list.
+ */
+const DATE_TIME_PICKER_MAX_OPTIONS = 1440;
+const FALLBACK = {
+    calendar: 'gregory',
+    closeOnSelect: 'auto',
+    granularity: 'minute',
+    hourCycle: undefined,
+    maxOptions: DATE_TIME_PICKER_MAX_OPTIONS,
+    openTo: 'date',
+    placement: 'bottom-start',
+    size: 'md',
+    step: 900,
+    timeZone: undefined,
+    unavailableOptions: 'disable',
+    variant: 'outline',
+};
+const DATE_TIME_PICKER_DEFAULTS = new InjectionToken('slotted datetime picker defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once how its datetime pickers behave — which clock
+ * they run on, which step the list offers, which surface focus opens on —
+ * rather than repeating the same inputs on every control in a form. A control
+ * that states any of them itself still wins. The locale that writes them and
+ * every word they say come from the language in force (`provideSlotted`).
+ */
+function provideDateTimePickerDefaults(defaults) {
+    return {
+        provide: DATE_TIME_PICKER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a datetime picker renders as here, before it states anything itself. */
+function injectDateTimePickerDefaults() {
+    return inject(DATE_TIME_PICKER_DEFAULTS);
+}
+
+/**
+ * What one row of the list draws.
+ *
+ * The row is the family's — its role, its states, its keyboard and its target
+ * size — and what is written inside it is the consumer's. It is a template
+ * rather than a projected slot because it is re-rendered once per option, which
+ * is exactly the case `references/frameworks.md` names `NgTemplateOutlet` for.
+ *
+ * The context carries the time as `$implicit`, plus `date`, `label`,
+ * `selected`, `current` and `unavailable`.
+ */
+class SlDateTimePickerOption {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePickerOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimePickerOption, isStandalone: true, selector: "[slDateTimePickerOption]", exportAs: ["slDateTimePickerOption"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePickerOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimePickerOption]',
+                    standalone: true,
+                    exportAs: 'slDateTimePickerOption',
+                }]
+        }] });
+/**
+ * The consumer's own shortcuts, in the head beside `now`.
+ *
+ * This family ships no list of them: "tomorrow at nine" is a business clock,
+ * and a library that guessed at one would be guessing at an industry. What it
+ * ships is the row they stand in.
+ */
+class SlDateTimePickerPresets {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePickerPresets, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimePickerPresets, isStandalone: true, selector: "[slDateTimePickerPresets]", host: { attributes: { "data-part": "presets" } }, exportAs: ["slDateTimePickerPresets"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePickerPresets, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimePickerPresets]',
+                    standalone: true,
+                    exportAs: 'slDateTimePickerPresets',
+                    host: { 'data-part': 'presets' },
+                }]
+        }] });
+/** The consumer's own actions, under both surfaces. */
+class SlDateTimePickerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePickerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimePickerFooter, isStandalone: true, selector: "[slDateTimePickerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDateTimePickerFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePickerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimePickerFooter]',
+                    standalone: true,
+                    exportAs: 'slDateTimePickerFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+
+/**
+ * Below this width, on a finger, the surface is a sheet rather than a popover.
+ * §2.7 of `docs/component-features.md` asks for it by name.
+ */
+const SHEET_QUERY = '(max-width: 480px) and (pointer: coarse)';
+/** The surface needs an identifier the trigger can point `aria-controls` at. */
+let sequence = 0;
+/**
+ * A datetime field, a trigger, and the only panel in the library that holds two
+ * surfaces.
+ *
+ * **Both surfaces are in the DOM at every width.** A `tablist` that exists on a
+ * narrow container and not on a wide one tells assistive technology two
+ * different stories about the same component, which is the arrangement Kendo
+ * and MUI ship and this family declines. `openTo` decides where focus lands,
+ * not what is drawn.
+ *
+ * **The decision this family owes, in one sentence:** the press that leaves the
+ * value incomplete carries focus to the half that is missing, and the press
+ * that completes the value closes the panel.
+ *
+ * **The list answers the day the reader is on**, not a day already committed.
+ *
+ * **Two pairs of bounds apply at once**, which MUI's own validation page
+ * records that it cannot combine.
+ */
+class SlDateTimePicker {
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** Present means the consumer owns whether the surface is showing. */
+    open = input(undefined, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Where the reader is in the panel. Present means the consumer owns it. */
+    highlighted = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    defaultHighlighted = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultHighlighted" }] : /* istanbul ignore next */ []));
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** The earliest time of every day inside the range, beside `min`. */
+    minTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /** The latest time of every day inside the range, beside `max`. */
+    maxTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    isDateUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* istanbul ignore next */ []));
+    isTimeUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTimeUnavailable" }] : /* istanbul ignore next */ []));
+    /** Seconds between two offered times. Ignored when `options` states the list. */
+    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    /**
+     * The times to offer, stated rather than stepped. A step describes a regular
+     * list and a great many real ones are not.
+     */
+    options = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    maxOptions = input(undefined, { ...(ngDevMode ? { debugName: "maxOptions" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    unavailableOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unavailableOptions" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Writes the field, the grid, the list and the trigger's moment. Unset, the language in force decides. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    hourCycle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    granularity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    calendar = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    months = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+    weekNumbers = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekNumbers" }] : /* istanbul ignore next */ []));
+    referenceDateTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referenceDateTime" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    placement = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    openTo = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openTo" }] : /* istanbul ignore next */ []));
+    closeOnSelect = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    readOnly = input(undefined, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    invalid = input(undefined, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    required = input(undefined, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    relative = input(undefined, { ...(ngDevMode ? { debugName: "relative" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * trigger's two names, the `now` button, what an empty day says and what a
+     * cut list says.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    openChange = output();
+    highlightedChange = output();
+    optionTemplate;
+    layer;
+    triggerRef;
+    listRef;
+    datePanelRef;
+    field;
+    calendarRef;
+    element = inject(ElementRef).nativeElement;
+    defaults = injectDateTimePickerDefaults();
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this picker's `messages` laid over them. */
+    t = injectMessages(datetimePickerMessages, this.messages);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    enclosing = inject(SlField, { optional: true });
+    contentId = `sl-datetime-picker-${String((sequence += 1))}`;
+    ownOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownOpen" }] : /* istanbul ignore next */ []));
+    ownValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownValue" }] : /* istanbul ignore next */ []));
+    /**
+     * The half pressed in the panel while the other half is missing. The value
+     * stays `null` until the second press writes both, so the half lives here and
+     * is forgotten when the panel closes.
+     */
+    pendingDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingDate" }] : /* istanbul ignore next */ []));
+    pendingTime = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingTime" }] : /* istanbul ignore next */ []));
+    ownHighlight = signal({
+        date: { year: 2000, month: 1, day: 1 },
+        time: null,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownHighlight" }] : /* istanbul ignore next */ []));
+    clock = signal({
+        date: { year: 2000, month: 1, day: 1 },
+        time: { hour: 12, minute: 0, second: 0 },
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clock" }] : /* istanbul ignore next */ []));
+    view = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    positioned = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
+    sheet = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    /** Whether a form model holds the value, and answers a reset through `writeValue`. */
+    formBound = false;
+    onTouchedFn = () => undefined;
+    onValidatorChangeFn = () => undefined;
+    /**
+     * Whether the next opening moves focus into the panel. Set by a request to
+     * open from the trigger or from `openSurface()`, and never by Alt+ArrowDown,
+     * which leaves focus in the field, or by a first render that starts open,
+     * which would take focus from wherever the page put it.
+     */
+    focusOnOpen = false;
+    /**
+     * Whether the reader has moved the highlight themselves. Until they have, the
+     * day the panel is on follows the value and then the reference.
+     */
+    movedByReader = false;
+    positioner = null;
+    dismissable = null;
+    typeahead = null;
+    isOpen = computed(() => this.open() ?? this.ownOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    held = computed(() => this.value() ?? this.ownValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    highlight = computed(() => this.highlighted() ?? this.ownHighlight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+    resolvedLocale = computed(() => this.locale() ?? this.appLocale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    resolvedTimeZone = computed(() => this.timeZone() ?? this.defaults.timeZone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTimeZone" }] : /* istanbul ignore next */ []));
+    resolvedHourCycle = computed(() => this.hourCycle() ?? this.defaults.hourCycle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHourCycle" }] : /* istanbul ignore next */ []));
+    resolvedGranularity = computed(() => this.granularity() ?? this.defaults.granularity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedGranularity" }] : /* istanbul ignore next */ []));
+    resolvedCalendar = computed(() => this.calendar() ?? this.defaults.calendar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCalendar" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.enclosing?.resolvedSize() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedPlacement = computed(() => this.placement() ?? this.defaults.placement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : /* istanbul ignore next */ []));
+    resolvedOpenTo = computed(() => this.openTo() ?? this.defaults.openTo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOpenTo" }] : /* istanbul ignore next */ []));
+    resolvedDisabled = computed(() => this.disabled() ?? this.formDisabled() ?? this.enclosing?.resolvedDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ?? this.enclosing?.resolvedReadOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    resolvedRequired = computed(() => this.required() ?? this.enclosing?.required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRequired" }] : /* istanbul ignore next */ []));
+    editable = computed(() => this.resolvedDisabled() !== true && this.resolvedReadOnly() !== true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    format = computed(() => {
+        const firstDayOfWeek = this.firstDayOfWeek();
+        return createDateTimeFormat({
+            granularity: this.resolvedGranularity(),
+            hourCycle: this.resolvedHourCycle(),
+            locale: this.resolvedLocale(),
+            ...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek }),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    anchor = computed(() => this.referenceDateTime() ?? this.clock(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    bounds = computed(() => ({
+        max: this.max(),
+        maxTime: this.maxTime(),
+        min: this.min(),
+        minTime: this.minTime(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    dateMin = computed(() => dateBoundsOf(this.bounds()).min, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateMin" }] : /* istanbul ignore next */ []));
+    dateMax = computed(() => dateBoundsOf(this.bounds()).max, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateMax" }] : /* istanbul ignore next */ []));
+    dateValue = computed(() => this.held()?.date ?? this.pendingDate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Validity the family owns, beside the validity the consumer states: both
+     * pairs of bounds, and both predicates.
+     */
+    resolvedInvalid = computed(() => {
+        const value = this.held();
+        if (value !== null) {
+            if (!isDateTimeInRange(value, this.min(), this.max()))
+                return true;
+            const window = dayWindow(value.date, this.bounds());
+            if (window === null || !isTimeInRange(value.time, window.earliest, window.latest)) {
+                return true;
+            }
+            if (this.isDateUnavailable()?.(value.date) === true)
+                return true;
+            if (this.isTimeUnavailable()?.(value.time, value.date) === true)
+                return true;
+        }
+        return this.invalid() ?? this.enclosing?.invalid();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    /**
+     * The day the list answers: the date half of the value when there is one, and
+     * the day the calendar has focused when there is not — so a reader moving
+     * through the month sees the times of the day under their cursor.
+     */
+    listDate = computed(() => this.held()?.date ?? this.pendingDate() ?? this.highlight().date, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listDate" }] : /* istanbul ignore next */ []));
+    window = computed(() => dayWindow(this.listDate(), this.bounds()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "window" }] : /* istanbul ignore next */ []));
+    listOptions = computed(() => {
+        const predicate = this.isTimeUnavailable();
+        const date = this.listDate();
+        const window = this.window();
+        return {
+            isTimeUnavailable: predicate === undefined ? undefined : (time) => predicate(time, date),
+            max: window?.latest,
+            maxOptions: this.maxOptions() ?? this.defaults.maxOptions,
+            min: window?.earliest,
+            options: this.options(),
+            step: this.step() ?? this.defaults.step,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listOptions" }] : /* istanbul ignore next */ []));
+    list = computed(() => {
+        if (this.window() === null)
+            return [];
+        if (this.isDateUnavailable()?.(this.listDate()) === true)
+            return [];
+        const built = timeList(this.listOptions());
+        const hidden = (this.unavailableOptions() ?? this.defaults.unavailableOptions) === 'hide';
+        return hidden ? built.filter((option) => !option.unavailable) : built;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    truncated = computed(() => isTruncated(this.listOptions()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "truncated" }] : /* istanbul ignore next */ []));
+    labels = computed(() => this.list().map((option) => this.format().time.format(option.time)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    highlightIndex = computed(() => {
+        const at = this.highlight().time;
+        if (at === null)
+            return -1;
+        return this.list().findIndex((option) => isSameTime(option.time, at));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightIndex" }] : /* istanbul ignore next */ []));
+    /** The list's own accessible name: the day its times belong to. */
+    listLabel = computed(() => this.format().describeDate(this.listDate(), 'short'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listLabel" }] : /* istanbul ignore next */ []));
+    /* ── What the head says ──────────────────────────────────────────────── */
+    headValue = computed(() => {
+        const value = this.held();
+        return value === null ? '' : this.format().describe(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headValue" }] : /* istanbul ignore next */ []));
+    headDate = computed(() => this.format().describeDate(this.pendingDate() ?? this.highlight().date), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headDate" }] : /* istanbul ignore next */ []));
+    headTime = computed(() => {
+        const time = this.pendingTime();
+        return time === null ? null : this.format().time.format(time);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headTime" }] : /* istanbul ignore next */ []));
+    headPlaceholder = computed(() => {
+        const granularity = this.resolvedGranularity();
+        if (granularity === 'hour')
+            return '--';
+        return granularity === 'second' ? '--:--:--' : '--:--';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * The trigger's accessible name. Focus returns here when the panel closes, so
+     * this is where the reader is told what was chosen.
+     */
+    triggerLabel = computed(() => {
+        const chosen = this.held();
+        if (chosen === null)
+            return this.t('choose');
+        return this.t('change', { date: this.format().describe(chosen) });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* The layer is created and torn down with the surface, not with the
+           component: a layer that outlived its content would hold a place in the
+           single stack that nothing occupies. */
+        effect(() => {
+            if (!this.isOpen()) {
+                this.release();
+                /* A half pressed and never completed does not outlive the panel. */
+                untracked(() => {
+                    this.pendingDate.set(null);
+                    this.pendingTime.set(null);
+                });
+                return;
+            }
+            afterNextRender(() => this.attach(), { injector: this.injector });
+        });
+        /* The day the panel is on, before the reader has said otherwise. */
+        effect(() => {
+            const date = this.held()?.date ?? this.anchor().date;
+            untracked(() => {
+                if (this.movedByReader || this.highlighted() !== undefined)
+                    return;
+                if (isSameDate(date, this.highlight().date))
+                    return;
+                this.setHighlight({ date, time: this.highlight().time }, 'programmatic', undefined);
+            });
+        });
+        /**
+         * The highlight's **time** lands where the list opens. The date half is the
+         * effect above's: one of the two has to own it, or the two write over each
+         * other in the same change detection and the panel opens on whichever ran
+         * last.
+         */
+        effect(() => {
+            if (!this.isOpen())
+                return;
+            const list = this.list();
+            untracked(() => {
+                const index = this.openingIndex();
+                const option = list[index];
+                if (index < 0 || option === undefined)
+                    return;
+                if (isSameTime(option.time, this.highlight().time))
+                    return;
+                this.setHighlight({ date: this.highlight().date, time: option.time }, 'programmatic', undefined);
+            });
+        });
+        /**
+         * The row the highlight is on is brought into view: a panel that opens on a
+         * chosen time opens *at* it rather than at midnight, and a highlight moved
+         * by a key lands whole rather than half under the edge.
+         *
+         * The reveal runs after the next render and again whenever the list is
+         * resized. The list's height is the panel's, the panel's is the layer's,
+         * and the layer has not been measured on the frame it mounts, so the first
+         * call is made against a box with nothing to scroll and moves nothing — a
+         * panel opened on 15:30 showed 00:00 to 03:30 and asked the reader to
+         * scroll six hours to their own time. A reader's own scrolling resizes
+         * nothing, so this never fights them.
+         */
+        effect(() => {
+            const open = this.isOpen();
+            const index = this.highlightIndex();
+            if (!open || index < 0) {
+                this.listResize?.disconnect();
+                this.listResize = null;
+                return;
+            }
+            untracked(() => this.revealHighlight());
+        });
+        /* A bound that changed is a validity that changed, and the form is told. */
+        effect(() => {
+            this.min();
+            this.max();
+            this.minTime();
+            this.maxTime();
+            this.isDateUnavailable();
+            this.isTimeUnavailable();
+            this.onValidatorChangeFn();
+        });
+        this.destroyRef.onDestroy(() => this.release());
+        this.destroyRef.onDestroy(() => this.listResize?.disconnect());
+    }
+    /* ── Forms ───────────────────────────────────────────────────────────── */
+    writeValue(value) {
+        this.ownValue.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+        this.formBound = true;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChangeFn = fn;
+    }
+    /**
+     * The rules no other validator can see, under the names `datetime-field`
+     * reports them with, because the field holds the bounds, the predicates and
+     * the half the reader has not written. `required` is left to Angular's own.
+     */
+    validate(control) {
+        return this.field?.validate(control) ?? null;
+    }
+    /**
+     * A day typed without a time leaves the value `null`, so the picker's own
+     * value never moves; the field's validity does. The field says so on every
+     * edit, and the form is told.
+     */
+    ngAfterViewInit() {
+        this.field?.registerOnValidatorChange(() => this.onValidatorChangeFn());
+    }
+    ngOnInit() {
+        this.ownOpen.set(this.defaultOpen());
+        this.ownValue.set(this.defaultValue() ?? null);
+        const start = this.defaultHighlighted() ??
+            {
+                date: (this.defaultValue() ?? this.referenceDateTime() ?? this.clock()).date,
+                time: null,
+            };
+        this.ownHighlight.set(start);
+        this.clock.set(nowDateTimeIn(this.resolvedTimeZone()));
+        this.typeahead = createTypeahead({ locale: () => this.resolvedLocale() });
+        this.destroyRef.onDestroy(() => this.typeahead?.destroy());
+        /* A native reset restores the hidden input and tells nothing, so the
+           picker would keep the last moment chosen in a form that had been reset.
+           The value returns to `defaultValue` through `valueChange`, reason
+           `programmatic`, and a half pressed in the panel without the other is
+           dropped with it. A picker bound to a form model takes the model's reset
+           value through `writeValue` instead. */
+        const form = this.element.closest('form');
+        if (form !== null) {
+            const onReset = (event) => {
+                if (this.formBound)
+                    return;
+                this.pendingDate.set(null);
+                this.pendingTime.set(null);
+                this.commit(this.defaultValue() ?? null, 'programmatic', event);
+            };
+            form.addEventListener('reset', onReset);
+            this.destroyRef.onDestroy(() => form.removeEventListener('reset', onReset));
+        }
+        /* `matchMedia` is absent in a server render and in some test environments,
+           and the popover is the right answer wherever it cannot be asked. */
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const query = window.matchMedia(SHEET_QUERY);
+        const read = () => this.sheet.set(query.matches);
+        read();
+        query.addEventListener('change', read);
+        this.destroyRef.onDestroy(() => query.removeEventListener('change', read));
+    }
+    /** Puts focus on the first segment of the field. */
+    focus() {
+        this.field?.focus();
+    }
+    openSurface(source) {
+        this.setOpen(true, 'keyboard', source);
+    }
+    closeSurface(source) {
+        this.setOpen(false, 'keyboard', source);
+    }
+    /* ── What the template reads ─────────────────────────────────────────── */
+    labelFor(option) {
+        return this.format().time.format(option.time);
+    }
+    isSelected(option) {
+        const value = this.held();
+        if (value === null)
+            return isSameTime(option.time, this.pendingTime());
+        return isSameDate(value.date, this.listDate()) && isSameTime(option.time, value.time);
+    }
+    contextFor(option, index) {
+        return {
+            $implicit: option.time,
+            current: index === this.highlightIndex(),
+            date: this.listDate(),
+            label: this.labels()[index] ?? '',
+            selected: this.isSelected(option),
+            unavailable: option.unavailable,
+        };
+    }
+    /* ── Focus follows the missing half ──────────────────────────────────── */
+    toggle(source) {
+        this.setOpen(!this.isOpen(), 'pointer', source);
+    }
+    /** Tab and Shift+Tab wrap inside the panel while it is open. */
+    onContentKeyDown(event) {
+        if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const content = event.currentTarget;
+        const items = tabbables(content);
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (first === undefined || last === undefined)
+            return;
+        const current = content.ownerDocument.activeElement;
+        if (event.shiftKey && current === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && current === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    onControlFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.element.contains(next))
+            return;
+        this.onTouchedFn();
+    }
+    chooseNow(source) {
+        const wasWhole = this.held() !== null;
+        /* The clock, read at the press: `referenceDateTime` says where an empty
+           field starts, not what time it is. */
+        const now = nowDateTimeIn(this.resolvedTimeZone());
+        this.pendingDate.set(null);
+        this.pendingTime.set(null);
+        this.commit(now, 'select', source);
+        this.setHighlight({ date: now.date, time: now.time }, 'pointer', source);
+        this.afterPress(now, wasWhole, 'time', source);
+    }
+    onCalendarValue(request) {
+        if (!this.editable())
+            return;
+        const next = request.value;
+        /* `single` is the only mode this panel asks for, so a range or a set is a
+           shape the calendar cannot hand back here — and narrowing it is what keeps
+           `selectDate` taking one day. */
+        const candidate = Array.isArray(next) ? next[0] : next;
+        if (candidate === null || candidate === undefined)
+            return;
+        if (!('year' in candidate))
+            return;
+        this.selectDate(candidate, request.source);
+    }
+    onFocusedDate(request) {
+        this.setHighlight({ date: request.value, time: this.highlight().time }, request.reason === 'pointer' ? 'pointer' : 'keyboard', request.source);
+    }
+    /**
+     * A day pressed in the calendar. The time half is the one the value holds,
+     * or the one pressed in the list. With neither, the day waits for a time:
+     * focus moves to the list, onto the option nearest `referenceDateTime`, and
+     * the value does not move.
+     */
+    selectDate(date, source) {
+        const wasWhole = this.held() !== null;
+        const time = this.held()?.time ?? this.pendingTime();
+        if (time === null) {
+            this.pendingDate.set(date);
+            this.setHighlight({ date, time: null }, 'pointer', source);
+            this.enterSurface('time');
+            return;
+        }
+        const next = { date, time };
+        this.pendingDate.set(null);
+        this.pendingTime.set(null);
+        this.commit(next, 'select', source);
+        this.setHighlight({ date, time: this.highlight().time }, 'pointer', source);
+        this.afterPress(next, wasWhole, 'date', source);
+    }
+    /**
+     * A time pressed in the list. The date half is the one the value holds, or
+     * the day pressed in the calendar; with neither, the time waits for a day and
+     * focus moves to the calendar.
+     */
+    selectTime(option, source) {
+        if (option.unavailable || !this.editable())
+            return;
+        const wasWhole = this.held() !== null;
+        const date = this.held()?.date ?? this.pendingDate();
+        this.setHighlight({ date: this.listDate(), time: option.time }, 'pointer', source);
+        if (date === null) {
+            this.pendingTime.set(option.time);
+            this.enterSurface('date');
+            return;
+        }
+        const next = { date, time: option.time };
+        this.pendingDate.set(null);
+        this.pendingTime.set(null);
+        this.commit(next, 'select', source);
+        this.afterPress(next, wasWhole, 'time', source);
+    }
+    /**
+     * The rule, in one place: a press that leaves the value incomplete carries
+     * focus to the half that is missing; a press that completes it closes the
+     * panel; and a press on a value that was already whole changes one half and
+     * leaves the panel where it is.
+     */
+    afterPress(next, wasWhole, wrote, source) {
+        const closeOnSelect = this.closeOnSelect() ?? this.defaults.closeOnSelect;
+        const nowWhole = next !== null;
+        if (nowWhole && !wasWhole && closeOnSelect !== 'never') {
+            this.close(source);
+            return;
+        }
+        if (nowWhole && wasWhole && closeOnSelect === 'always') {
+            this.close(source);
+            return;
+        }
+        if (!nowWhole)
+            this.enterSurface(wrote === 'date' ? 'time' : 'date');
+    }
+    close(source) {
+        this.setOpen(false, 'select', source);
+        this.triggerRef?.nativeElement.focus({ preventScroll: true });
+    }
+    enterSurface(surface) {
+        afterNextRender(() => this.enterSurfaceNow(surface), { injector: this.injector });
+    }
+    /** Focus into one surface, on a panel that is already rendered. */
+    enterSurfaceNow(surface) {
+        if (surface === 'time') {
+            this.enterList();
+            return;
+        }
+        const day = this.datePanelRef?.nativeElement.querySelector('[data-part="day"][tabindex="0"]');
+        day?.focus({ preventScroll: true });
+    }
+    /**
+     * Where the list opens: on the chosen time, on the nearest step to the
+     * reference when nothing is chosen, and on the first available option when
+     * that is refused.
+     */
+    openingIndex() {
+        const list = this.list();
+        if (list.length === 0)
+            return -1;
+        const near = nearestIndex(list, this.held()?.time ?? this.anchor().time);
+        if (near >= 0 && list[near]?.unavailable !== true)
+            return near;
+        const first = list.findIndex((option) => !option.unavailable);
+        return first >= 0 ? first : 0;
+    }
+    enterList() {
+        const index = this.highlightIndex() >= 0 ? this.highlightIndex() : this.openingIndex();
+        if (index < 0)
+            return;
+        const option = this.list()[index];
+        if (option !== undefined) {
+            this.setHighlight({ date: this.listDate(), time: option.time }, 'keyboard', undefined);
+        }
+        this.focusOption(index);
+    }
+    /** Watches the list's own box, which is what "the layer has been measured" looks like from inside it. */
+    listResize = null;
+    revealHighlight() {
+        afterNextRender(() => {
+            const list = this.listRef?.nativeElement;
+            if (list === undefined)
+                return;
+            const reveal = () => {
+                const row = list.querySelector('[data-part="option"][data-current]');
+                /* jsdom implements neither `scrollIntoView` nor `ResizeObserver`, and
+                   a test environment without a scroller is not a reason for the
+                   family to throw where a browser would scroll. */
+                row?.scrollIntoView?.({ block: 'nearest' });
+            };
+            reveal();
+            if (typeof ResizeObserver !== 'function')
+                return;
+            this.listResize?.disconnect();
+            this.listResize = new ResizeObserver(reveal);
+            this.listResize.observe(list);
+        }, { injector: this.injector });
+    }
+    focusOption(index) {
+        const rows = this.listRef?.nativeElement.querySelectorAll('[data-part="option"]');
+        const row = rows?.[index];
+        row?.focus();
+        /* jsdom does not implement `scrollIntoView`, and a test environment without
+           a scroller is not a reason for the family to throw. */
+        row?.scrollIntoView?.({ block: 'nearest' });
+    }
+    /* ── The keyboard ────────────────────────────────────────────────────── */
+    onControlKeyDown(event) {
+        if (!this.editable())
+            return;
+        /* ChromeOS turns the chord into `PageDown` before the browser sees it,
+           which Angular Material records for its own input — so the trigger button
+           is always drawn and this is only a shortcut. Focus stays in the field. */
+        if (event.altKey && event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.setOpen(true, 'keyboard', event, false);
+        }
+    }
+    onTriggerKeyDown(event) {
+        if (!this.editable())
+            return;
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        if (this.isOpen())
+            this.enterSurface(this.resolvedOpenTo());
+        else
+            this.setOpen(true, 'keyboard', event);
+    }
+    onListKeyDown(event) {
+        const list = this.list();
+        const at = this.highlightIndex() >= 0 ? this.highlightIndex() : 0;
+        const move = (index) => {
+            event.preventDefault();
+            const clamped = Math.max(0, Math.min(list.length - 1, index));
+            const option = list[clamped];
+            if (option === undefined)
+                return;
+            this.setHighlight({ date: this.listDate(), time: option.time }, 'keyboard', event);
+            this.focusOption(clamped);
+        };
+        switch (event.key) {
+            case 'ArrowDown':
+                move(at + 1);
+                return;
+            case 'ArrowUp':
+                move(at - 1);
+                return;
+            case 'Home':
+                move(0);
+                return;
+            case 'End':
+                move(list.length - 1);
+                return;
+            case 'PageDown':
+                move(hourJump(list, at, 1));
+                return;
+            case 'PageUp':
+                move(hourJump(list, at, -1));
+                return;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const option = list[at];
+                if (option !== undefined)
+                    this.selectTime(option, event);
+                return;
+            }
+            default:
+                break;
+        }
+        /* Type-ahead, which the pattern recommends above seven options and this
+           list passes at every step it offers. */
+        const typeahead = this.typeahead;
+        if (typeahead === null)
+            return;
+        if (!isPrintable(event.key, typeahead.query.length > 0))
+            return;
+        const found = typeahead.match(event.key, this.labels(), at);
+        if (found < 0)
+            return;
+        move(found);
+    }
+    /* ── The machinery ───────────────────────────────────────────────────── */
+    onFieldValue(request) {
+        this.commit(request.value, request.reason, request.source, request);
+    }
+    commit(next, reason, source, carried) {
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.held(),
+            equals: isSameDateTime,
+            onRequest: (request) => {
+                this.valueChange.emit(carried === undefined
+                    ? request
+                    : { ...request, incomplete: carried.incomplete, segments: carried.segments });
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (cancelled || !moved)
+            return;
+        if (this.value() === undefined)
+            this.ownValue.set(next);
+        this.onChangeFn(next);
+    }
+    setHighlight(next, reason, source) {
+        if (reason !== 'programmatic')
+            this.movedByReader = true;
+        const state = createControllable({
+            controlled: this.highlighted(),
+            initial: this.highlight(),
+            equals: (a, b) => isSameDate(a.date, b.date) && isSameTime(a.time, b.time),
+            onRequest: (request) => this.highlightedChange.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.ownHighlight.set(next);
+    }
+    setOpen(next, reason, source, enter = true) {
+        const state = createControllable({
+            controlled: this.open(),
+            initial: this.isOpen(),
+            onRequest: (request) => {
+                this.openChange.emit(request);
+                this.focusOnOpen = enter && request.value && !request.cancelled;
+            },
+        });
+        if (state.request(next, reason, source))
+            this.ownOpen.set(next);
+    }
+    /** Places the layer and puts it in the single stack. */
+    attach() {
+        const layer = this.layer?.nativeElement;
+        if (layer === undefined)
+            return;
+        this.release();
+        if (!this.sheet()) {
+            const anchor = this.element.querySelector('[data-part="control"]') ?? this.element;
+            const [side, align] = this.resolvedPlacement().split('-');
+            this.positioner = createPositioner(anchor, layer, { align: align ?? 'center', side });
+            void this.positioner.update().then(() => this.positioned.set(true));
+        }
+        /* The dialog takes focus when it opens, in the surface `openTo` names. */
+        if (this.focusOnOpen) {
+            this.focusOnOpen = false;
+            this.enterSurfaceNow(this.resolvedOpenTo());
+        }
+        const trigger = this.triggerRef?.nativeElement;
+        this.dismissable = createDismissableLayer(layer, {
+            branches: trigger === undefined ? [] : [trigger],
+            escape: true,
+            focusOutside: false,
+            modal: false,
+            outsidePress: true,
+            scrollLock: false,
+            /**
+             * `Escape` is staged, and here it has three steps rather than two. The
+             * field takes the key first while an expression is open — its own handler
+             * stops it before this ever runs — then the calendar's view walks down
+             * from year or month, and only then does the panel close.
+             */
+            onDismiss: (request) => {
+                if (request.reason === 'escape' && this.view() !== 'day') {
+                    this.view.set(this.view() === 'year' ? 'month' : 'day');
+                    return;
+                }
+                this.setOpen(false, request.reason === 'escape' ? 'escape' : 'outsidePress', request.source);
+                if (request.reason === 'escape') {
+                    this.triggerRef?.nativeElement.focus({ preventScroll: true });
+                }
+            },
+        });
+    }
+    release() {
+        this.positioner?.destroy();
+        this.positioner = null;
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        this.positioned.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDateTimePicker, isStandalone: true, selector: "[slDateTimePicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, defaultHighlighted: { classPropertyName: "defaultHighlighted", publicName: "defaultHighlighted", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, isTimeUnavailable: { classPropertyName: "isTimeUnavailable", publicName: "isTimeUnavailable", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptions: { classPropertyName: "maxOptions", publicName: "maxOptions", isSignal: true, isRequired: false, transformFunction: null }, unavailableOptions: { classPropertyName: "unavailableOptions", publicName: "unavailableOptions", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, referenceDateTime: { classPropertyName: "referenceDateTime", publicName: "referenceDateTime", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, openTo: { classPropertyName: "openTo", publicName: "openTo", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", highlightedChange: "highlightedChange" }, host: { attributes: { "data-ui": "datetime-picker", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-granularity": "resolvedGranularity()", "attr.data-open": "isOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "resolvedRequired() === true ? '' : null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDateTimePicker), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimePicker), multi: true },
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SlDateTimePickerOption, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "listRef", first: true, predicate: ["rows"], descendants: true }, { propertyName: "datePanelRef", first: true, predicate: ["datePanel"], descendants: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }], exportAs: ["slDateTimePicker"], ngImport: i0, template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+      <div
+        slDateTimeField
+        #field="slDateTimeField"
+        [locale]="resolvedLocale()"
+        [timeZone]="resolvedTimeZone()"
+        [hourCycle]="resolvedHourCycle()"
+        [granularity]="resolvedGranularity()"
+        [calendar]="resolvedCalendar()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [referenceDateTime]="referenceDateTime()"
+        [size]="resolvedSize()"
+        [variant]="resolvedVariant()"
+        [min]="min()"
+        [max]="max()"
+        [minTime]="minTime()"
+        [maxTime]="maxTime()"
+        [isDateUnavailable]="isDateUnavailable()"
+        [isTimeUnavailable]="isTimeUnavailable()"
+        [clearable]="clearable()"
+        [relative]="relative()"
+        [name]="name()"
+        [disabled]="resolvedDisabled()"
+        [readOnly]="readOnly()"
+        [invalid]="invalid()"
+        [required]="required()"
+        [value]="held()"
+        (valueChange)="onFieldValue($event)"
+        (focusout)="onControlFocusOut($event)"
+      >
+        <span slDateTimeFieldEnd>
+          <button
+            #trigger
+            data-part="trigger"
+            type="button"
+            aria-haspopup="dialog"
+            [attr.aria-label]="triggerLabel()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="isOpen() ? contentId : null"
+            [disabled]="!editable()"
+            (click)="toggle($event)"
+            (keydown)="onTriggerKeyDown($event)"
+          >
+            <span slIcon><svg slGlyph name="calendar"></svg></span>
+          </button>
+        </span>
+      </div>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="datetime-picker"
+        data-part="positioner"
+        data-open
+        [attr.data-presentation]="sheet() ? 'sheet' : 'popover'"
+        [attr.data-positioned]="positioned() ? '' : null"
+      >
+        <div
+          data-part="content"
+          role="dialog"
+          [attr.id]="contentId"
+          [attr.aria-label]="triggerLabel()"
+          [attr.aria-description]="truncated() ? t('truncated') : null"
+          [attr.data-granularity]="resolvedGranularity()"
+          [attr.data-open-to]="resolvedOpenTo()"
+          (keydown)="onContentKeyDown($event)"
+        >
+          <div data-part="head">
+            <span data-part="head-value">
+              @if (held() !== null) {
+                {{ headValue() }}
+              } @else {
+                {{ headDate() }},
+                @if (headTime(); as time) {
+                  {{ time }}
+                } @else {
+                  <span data-placeholder>{{ headPlaceholder() }}</span>
+                }
+              }
+            </span>
+            <ng-content select="[slDateTimePickerPresets]" />
+            <button data-part="now" type="button" (click)="chooseNow($event)">
+              <span slIcon size="sm"><svg slGlyph name="clock"></svg></span>
+              {{ t('now') }}
+            </button>
+          </div>
+
+          <div data-part="panels">
+            <div #datePanel data-part="date-panel">
+              <div
+                slCalendar
+                #calendar="slCalendar"
+                selectionMode="single"
+                [locale]="resolvedLocale()"
+                [timeZone]="resolvedTimeZone()"
+                [firstDayOfWeek]="firstDayOfWeek()"
+                [months]="months()"
+                [weekNumbers]="weekNumbers()"
+                [readOnly]="readOnly()"
+                [min]="dateMin()"
+                [max]="dateMax()"
+                [isDateUnavailable]="isDateUnavailable()"
+                [value]="dateValue()"
+                [focusedDate]="highlight().date"
+                [view]="view()"
+                (valueChange)="onCalendarValue($event)"
+                (focusedDateChange)="onFocusedDate($event)"
+                (viewChange)="view.set($event)"
+              ></div>
+            </div>
+
+            <div data-part="time-panel">
+              @if (list().length === 0) {
+                <div data-part="empty">{{ t('empty') }}</div>
+              } @else {
+                <div
+                  #rows
+                  data-part="list"
+                  role="listbox"
+                  [attr.aria-label]="listLabel()"
+                  [attr.data-truncated]="truncated() ? '' : null"
+                  (keydown)="onListKeyDown($event)"
+                >
+                  @for (option of list(); track $index) {
+                    <div
+                      data-part="option"
+                      role="option"
+                      [attr.aria-selected]="isSelected(option)"
+                      [attr.aria-disabled]="option.unavailable ? 'true' : null"
+                      [attr.data-disabled]="option.unavailable ? '' : null"
+                      [attr.data-selected]="isSelected(option) ? '' : null"
+                      [attr.data-current]="$index === highlightIndex() ? '' : null"
+                      [tabindex]="$index === highlightIndex() ? 0 : -1"
+                      (click)="selectTime(option, $event)"
+                    >
+                      @if (optionTemplate) {
+                        <ng-container
+                          [ngTemplateOutlet]="optionTemplate"
+                          [ngTemplateOutletContext]="contextFor(option, $index)"
+                        />
+                      } @else {
+                        {{ labelFor(option) }}
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+
+          <ng-content select="[slDateTimePickerFooter]" />
+        </div>
+      </div>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=datetime-picker][data-part=root]{display:block;inline-size:100%}[data-ui=datetime-picker] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui=datetime-picker][data-part=root][data-size=sm] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui=datetime-picker][data-part=root][data-size=lg] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui=datetime-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-datetime-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-datetime-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-datetime-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=datetime-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=datetime-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-picker] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=datetime-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-picker][data-part=positioner]{position:absolute;inset-block-start:0;box-sizing:border-box;isolation:isolate;pointer-events:none;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));--_enter-distance: var(--slotted-space-2, .25rem);opacity:0;translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=datetime-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=datetime-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=datetime-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-datetime-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-datetime-picker-enter-up}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-datetime-picker-fade}@keyframes slotted-datetime-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-datetime-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-datetime-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=datetime-picker][data-part=positioner],[data-ui=datetime-picker][data-part=positioner][data-side=top],[data-ui=datetime-picker][data-part=positioner][data-side=left],[data-ui=datetime-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned],[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-datetime-picker-fade}}[data-ui=datetime-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=datetime-picker] [data-part=content]{background-color:var(--slotted-datetime-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );border-radius:var(--slotted-datetime-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-datetime-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-datetime-picker-content-color, var(--slotted-text, CanvasText));--_row: max(var(--slotted-target-min, 24px), var(--slotted-control-height-sm, 30px));--_row-pitch: calc(var(--_row) + var(--slotted-space-1, .125rem));display:grid;gap:var(--slotted-space-2, .25rem);grid-template-areas:\"head\" \"panels\" \"footer\";grid-template-columns:minmax(0,1fr);inline-size:auto;max-inline-size:min(34rem,var(--slotted-positioner-available-width, 34rem));padding:var(--slotted-datetime-picker-content-padding, var(--slotted-space-3, .375rem));pointer-events:auto}[data-ui=datetime-picker] [data-part=head]{box-sizing:border-box;inline-size:0;min-inline-size:100%;align-items:center;border-block-end:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );column-gap:var(--slotted-space-4, .5rem);display:flex;flex-wrap:wrap;grid-area:head;justify-content:space-between;padding-block-end:var(--slotted-space-3, .375rem);row-gap:var(--slotted-space-2, .25rem)}[data-ui=datetime-picker] [data-part=head-value]{color:var(--slotted-datetime-picker-content-color, var(--slotted-text, CanvasText));font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0;unicode-bidi:plaintext}[data-ui=datetime-picker] [data-part=head-value] [data-placeholder]{color:var(--slotted-datetime-picker-label-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-picker] [data-part=now]{align-items:center;appearance:none;background-color:var(--slotted-datetime-picker-now-background, transparent);border:var(--slotted-control-border-width, 1px) solid var( --slotted-datetime-picker-now-border-color, var(--slotted-control-border-color, ButtonBorder) );border-radius:var(--slotted-datetime-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-picker-now-color, var(--slotted-text, CanvasText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--slotted-space-2, .25rem);justify-content:center;min-block-size:var(--slotted-control-height-sm, 30px);padding-block:0;padding-inline:var(--slotted-control-padding-inline-sm, 10px);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=datetime-picker] [data-part=now]>[data-ui=icon]{color:var(--slotted-datetime-picker-now-icon-color, var(--slotted-text-muted))}[data-ui=datetime-picker] [data-part=now]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-now-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:var( --slotted-datetime-picker-now-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-picker] [data-part=now]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-now-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-picker] [data-part=now]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-picker] [data-part=presets]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-2, .25rem)}[data-ui=datetime-picker] [data-part=panels]{column-gap:var(--slotted-space-6, 1rem);display:flex;flex-wrap:wrap;grid-area:panels;min-inline-size:0;row-gap:var(--slotted-space-4, .5rem)}[data-ui=datetime-picker] [data-part=date-panel]{flex:0 0 auto}[data-ui=datetime-picker] [data-part=time-panel]{display:flex;flex:1 1 var(--slotted-datetime-picker-time-panel-inline-size, 7rem);flex-direction:column;gap:var(--slotted-space-2, .25rem);min-inline-size:var(--slotted-datetime-picker-time-panel-inline-size, 7rem)}[data-ui=datetime-picker] [data-part=list]{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);max-block-size:var(--slotted-datetime-picker-list-block-size, calc(var(--_row-pitch) * 7.5));min-block-size:0;min-inline-size:0;overflow-y:auto;scroll-padding-block:var(--slotted-space-2, .25rem)}[data-ui=datetime-picker] [data-part=option]{align-items:center;background-color:transparent;border-radius:var(--slotted-datetime-picker-option-radius, var(--slotted-radius-sm, 4px));color:inherit;cursor:pointer;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);min-block-size:var(--_row);padding-inline:var(--slotted-space-3, .375rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=datetime-picker] [data-part=option]:hover:not([data-disabled]):not([data-selected]):not([data-current]){background-color:var( --slotted-datetime-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-picker] [data-part=option][data-current]:not([data-selected]){background-color:var( --slotted-datetime-picker-option-current-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-picker] [data-part=option]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-picker] [data-part=option][data-selected]{background-color:var( --slotted-datetime-picker-option-selected-background, var(--slotted-tone-accent-solid) );color:var( --slotted-datetime-picker-option-selected-color, var(--slotted-tone-accent-on-solid) )}[data-ui=datetime-picker] [data-part=option][data-selected]:hover:not([data-disabled]){background-color:var( --slotted-datetime-picker-option-selected-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=datetime-picker] [data-part=option][data-disabled]{background-color:transparent;color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-picker] [data-part=empty]{align-items:center;color:var(--slotted-datetime-picker-label-color, var(--slotted-text-muted, GrayText));display:flex;flex:1 1 auto;justify-content:center;min-block-size:calc(var(--_row) * 2);padding:var(--slotted-space-4, .5rem);text-align:center;text-wrap:balance}[data-ui=datetime-picker] [data-part=footer]{box-sizing:border-box;inline-size:0;min-inline-size:100%;align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-3, .375rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet] [data-part=content]{border-end-end-radius:0;border-end-start-radius:0;border-inline:0;border-block-end:0;inline-size:var(--slotted-datetime-picker-sheet-inline-size, 100%);max-inline-size:none;max-block-size:85vh;overflow-y:auto}[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet] [data-part=list]{max-block-size:calc(var(--_row-pitch) * 5.5)}}@media(forced-colors:active){[data-ui=datetime-picker] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=datetime-picker] [data-part=option][data-current]:not([data-selected]){outline:var(--slotted-focus-ring-width, 2px) solid Highlight;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlCalendar, selector: "[slCalendar]", inputs: ["value", "defaultValue", "focusedDate", "defaultFocusedDate", "min", "max", "isDateUnavailable", "selectionMode", "months", "view", "defaultView", "weekNumbers", "fixedWeeks", "outsideDays", "locale", "timeZone", "firstDayOfWeek", "calendar", "disabled", "readOnly", "invalid", "messages"], outputs: ["valueChange", "focusedDateChange", "viewChange", "previewChange"], exportAs: ["slCalendar"] }, { kind: "component", type: SlDateTimeField, selector: "[slDateTimeField]", inputs: ["value", "defaultValue", "min", "max", "minTime", "maxTime", "isDateUnavailable", "isTimeUnavailable", "locale", "timeZone", "hourCycle", "granularity", "calendar", "firstDayOfWeek", "yearPivot", "referenceDateTime", "size", "variant", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "messages", "name", "label"], outputs: ["valueChange"], exportAs: ["slDateTimeField"] }, { kind: "directive", type: SlDateTimeFieldEnd, selector: "[slDateTimeFieldEnd]", exportAs: ["slDateTimeFieldEnd"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: '[slDateTimePicker]', standalone: true, exportAs: 'slDateTimePicker', imports: [NgTemplateOutlet, SlCalendar, SlDateTimeField, SlDateTimeFieldEnd, SlGlyph, SlIcon], template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+      <div
+        slDateTimeField
+        #field="slDateTimeField"
+        [locale]="resolvedLocale()"
+        [timeZone]="resolvedTimeZone()"
+        [hourCycle]="resolvedHourCycle()"
+        [granularity]="resolvedGranularity()"
+        [calendar]="resolvedCalendar()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [referenceDateTime]="referenceDateTime()"
+        [size]="resolvedSize()"
+        [variant]="resolvedVariant()"
+        [min]="min()"
+        [max]="max()"
+        [minTime]="minTime()"
+        [maxTime]="maxTime()"
+        [isDateUnavailable]="isDateUnavailable()"
+        [isTimeUnavailable]="isTimeUnavailable()"
+        [clearable]="clearable()"
+        [relative]="relative()"
+        [name]="name()"
+        [disabled]="resolvedDisabled()"
+        [readOnly]="readOnly()"
+        [invalid]="invalid()"
+        [required]="required()"
+        [value]="held()"
+        (valueChange)="onFieldValue($event)"
+        (focusout)="onControlFocusOut($event)"
+      >
+        <span slDateTimeFieldEnd>
+          <button
+            #trigger
+            data-part="trigger"
+            type="button"
+            aria-haspopup="dialog"
+            [attr.aria-label]="triggerLabel()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="isOpen() ? contentId : null"
+            [disabled]="!editable()"
+            (click)="toggle($event)"
+            (keydown)="onTriggerKeyDown($event)"
+          >
+            <span slIcon><svg slGlyph name="calendar"></svg></span>
+          </button>
+        </span>
+      </div>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="datetime-picker"
+        data-part="positioner"
+        data-open
+        [attr.data-presentation]="sheet() ? 'sheet' : 'popover'"
+        [attr.data-positioned]="positioned() ? '' : null"
+      >
+        <div
+          data-part="content"
+          role="dialog"
+          [attr.id]="contentId"
+          [attr.aria-label]="triggerLabel()"
+          [attr.aria-description]="truncated() ? t('truncated') : null"
+          [attr.data-granularity]="resolvedGranularity()"
+          [attr.data-open-to]="resolvedOpenTo()"
+          (keydown)="onContentKeyDown($event)"
+        >
+          <div data-part="head">
+            <span data-part="head-value">
+              @if (held() !== null) {
+                {{ headValue() }}
+              } @else {
+                {{ headDate() }},
+                @if (headTime(); as time) {
+                  {{ time }}
+                } @else {
+                  <span data-placeholder>{{ headPlaceholder() }}</span>
+                }
+              }
+            </span>
+            <ng-content select="[slDateTimePickerPresets]" />
+            <button data-part="now" type="button" (click)="chooseNow($event)">
+              <span slIcon size="sm"><svg slGlyph name="clock"></svg></span>
+              {{ t('now') }}
+            </button>
+          </div>
+
+          <div data-part="panels">
+            <div #datePanel data-part="date-panel">
+              <div
+                slCalendar
+                #calendar="slCalendar"
+                selectionMode="single"
+                [locale]="resolvedLocale()"
+                [timeZone]="resolvedTimeZone()"
+                [firstDayOfWeek]="firstDayOfWeek()"
+                [months]="months()"
+                [weekNumbers]="weekNumbers()"
+                [readOnly]="readOnly()"
+                [min]="dateMin()"
+                [max]="dateMax()"
+                [isDateUnavailable]="isDateUnavailable()"
+                [value]="dateValue()"
+                [focusedDate]="highlight().date"
+                [view]="view()"
+                (valueChange)="onCalendarValue($event)"
+                (focusedDateChange)="onFocusedDate($event)"
+                (viewChange)="view.set($event)"
+              ></div>
+            </div>
+
+            <div data-part="time-panel">
+              @if (list().length === 0) {
+                <div data-part="empty">{{ t('empty') }}</div>
+              } @else {
+                <div
+                  #rows
+                  data-part="list"
+                  role="listbox"
+                  [attr.aria-label]="listLabel()"
+                  [attr.data-truncated]="truncated() ? '' : null"
+                  (keydown)="onListKeyDown($event)"
+                >
+                  @for (option of list(); track $index) {
+                    <div
+                      data-part="option"
+                      role="option"
+                      [attr.aria-selected]="isSelected(option)"
+                      [attr.aria-disabled]="option.unavailable ? 'true' : null"
+                      [attr.data-disabled]="option.unavailable ? '' : null"
+                      [attr.data-selected]="isSelected(option) ? '' : null"
+                      [attr.data-current]="$index === highlightIndex() ? '' : null"
+                      [tabindex]="$index === highlightIndex() ? 0 : -1"
+                      (click)="selectTime(option, $event)"
+                    >
+                      @if (optionTemplate) {
+                        <ng-container
+                          [ngTemplateOutlet]="optionTemplate"
+                          [ngTemplateOutletContext]="contextFor(option, $index)"
+                        />
+                      } @else {
+                        {{ labelFor(option) }}
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+
+          <ng-content select="[slDateTimePickerFooter]" />
+        </div>
+      </div>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDateTimePicker), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimePicker), multi: true },
+                    ], host: {
+                        'data-ui': 'datetime-picker',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-granularity]': 'resolvedGranularity()',
+                        '[attr.data-open]': "isOpen() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
+                        '[attr.data-required]': "resolvedRequired() === true ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=datetime-picker][data-part=root]{display:block;inline-size:100%}[data-ui=datetime-picker] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui=datetime-picker][data-part=root][data-size=sm] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui=datetime-picker][data-part=root][data-size=lg] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui=datetime-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-datetime-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-datetime-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-datetime-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=datetime-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=datetime-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-picker] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=datetime-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-picker][data-part=positioner]{position:absolute;inset-block-start:0;box-sizing:border-box;isolation:isolate;pointer-events:none;z-index:calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));--_enter-distance: var(--slotted-space-2, .25rem);opacity:0;translate:0 calc(-1 * var(--_enter-distance));transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),translate var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=datetime-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=datetime-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=datetime-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-datetime-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-datetime-picker-enter-up}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-datetime-picker-fade}@keyframes slotted-datetime-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-datetime-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-datetime-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=datetime-picker][data-part=positioner],[data-ui=datetime-picker][data-part=positioner][data-side=top],[data-ui=datetime-picker][data-part=positioner][data-side=left],[data-ui=datetime-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned],[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=datetime-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-datetime-picker-fade}}[data-ui=datetime-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=datetime-picker] [data-part=content]{background-color:var(--slotted-datetime-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );border-radius:var(--slotted-datetime-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-datetime-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-datetime-picker-content-color, var(--slotted-text, CanvasText));--_row: max(var(--slotted-target-min, 24px), var(--slotted-control-height-sm, 30px));--_row-pitch: calc(var(--_row) + var(--slotted-space-1, .125rem));display:grid;gap:var(--slotted-space-2, .25rem);grid-template-areas:\"head\" \"panels\" \"footer\";grid-template-columns:minmax(0,1fr);inline-size:auto;max-inline-size:min(34rem,var(--slotted-positioner-available-width, 34rem));padding:var(--slotted-datetime-picker-content-padding, var(--slotted-space-3, .375rem));pointer-events:auto}[data-ui=datetime-picker] [data-part=head]{box-sizing:border-box;inline-size:0;min-inline-size:100%;align-items:center;border-block-end:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );column-gap:var(--slotted-space-4, .5rem);display:flex;flex-wrap:wrap;grid-area:head;justify-content:space-between;padding-block-end:var(--slotted-space-3, .375rem);row-gap:var(--slotted-space-2, .25rem)}[data-ui=datetime-picker] [data-part=head-value]{color:var(--slotted-datetime-picker-content-color, var(--slotted-text, CanvasText));font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0;unicode-bidi:plaintext}[data-ui=datetime-picker] [data-part=head-value] [data-placeholder]{color:var(--slotted-datetime-picker-label-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-picker] [data-part=now]{align-items:center;appearance:none;background-color:var(--slotted-datetime-picker-now-background, transparent);border:var(--slotted-control-border-width, 1px) solid var( --slotted-datetime-picker-now-border-color, var(--slotted-control-border-color, ButtonBorder) );border-radius:var(--slotted-datetime-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-picker-now-color, var(--slotted-text, CanvasText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-size:var(--slotted-control-font-size-sm, 12px);gap:var(--slotted-space-2, .25rem);justify-content:center;min-block-size:var(--slotted-control-height-sm, 30px);padding-block:0;padding-inline:var(--slotted-control-padding-inline-sm, 10px);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=datetime-picker] [data-part=now]>[data-ui=icon]{color:var(--slotted-datetime-picker-now-icon-color, var(--slotted-text-muted))}[data-ui=datetime-picker] [data-part=now]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-now-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:var( --slotted-datetime-picker-now-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-picker] [data-part=now]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-picker-now-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-picker] [data-part=now]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-picker] [data-part=presets]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--slotted-space-2, .25rem)}[data-ui=datetime-picker] [data-part=panels]{column-gap:var(--slotted-space-6, 1rem);display:flex;flex-wrap:wrap;grid-area:panels;min-inline-size:0;row-gap:var(--slotted-space-4, .5rem)}[data-ui=datetime-picker] [data-part=date-panel]{flex:0 0 auto}[data-ui=datetime-picker] [data-part=time-panel]{display:flex;flex:1 1 var(--slotted-datetime-picker-time-panel-inline-size, 7rem);flex-direction:column;gap:var(--slotted-space-2, .25rem);min-inline-size:var(--slotted-datetime-picker-time-panel-inline-size, 7rem)}[data-ui=datetime-picker] [data-part=list]{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem);max-block-size:var(--slotted-datetime-picker-list-block-size, calc(var(--_row-pitch) * 7.5));min-block-size:0;min-inline-size:0;overflow-y:auto;scroll-padding-block:var(--slotted-space-2, .25rem)}[data-ui=datetime-picker] [data-part=option]{align-items:center;background-color:transparent;border-radius:var(--slotted-datetime-picker-option-radius, var(--slotted-radius-sm, 4px));color:inherit;cursor:pointer;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);min-block-size:var(--_row);padding-inline:var(--slotted-space-3, .375rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=datetime-picker] [data-part=option]:hover:not([data-disabled]):not([data-selected]):not([data-current]){background-color:var( --slotted-datetime-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-picker] [data-part=option][data-current]:not([data-selected]){background-color:var( --slotted-datetime-picker-option-current-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-picker] [data-part=option]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-picker] [data-part=option][data-selected]{background-color:var( --slotted-datetime-picker-option-selected-background, var(--slotted-tone-accent-solid) );color:var( --slotted-datetime-picker-option-selected-color, var(--slotted-tone-accent-on-solid) )}[data-ui=datetime-picker] [data-part=option][data-selected]:hover:not([data-disabled]){background-color:var( --slotted-datetime-picker-option-selected-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=datetime-picker] [data-part=option][data-disabled]{background-color:transparent;color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-picker] [data-part=empty]{align-items:center;color:var(--slotted-datetime-picker-label-color, var(--slotted-text-muted, GrayText));display:flex;flex:1 1 auto;justify-content:center;min-block-size:calc(var(--_row) * 2);padding:var(--slotted-space-4, .5rem);text-align:center;text-wrap:balance}[data-ui=datetime-picker] [data-part=footer]{box-sizing:border-box;inline-size:0;min-inline-size:100%;align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-3, .375rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet] [data-part=content]{border-end-end-radius:0;border-end-start-radius:0;border-inline:0;border-block-end:0;inline-size:var(--slotted-datetime-picker-sheet-inline-size, 100%);max-inline-size:none;max-block-size:85vh;overflow-y:auto}[data-ui=datetime-picker][data-part=positioner][data-presentation=sheet] [data-part=list]{max-block-size:calc(var(--_row-pitch) * 5.5)}}@media(forced-colors:active){[data-ui=datetime-picker] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=datetime-picker] [data-part=option][data-current]:not([data-selected]){outline:var(--slotted-focus-ring-width, 2px) solid Highlight;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], defaultHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultHighlighted", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", required: false }] }], isTimeUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTimeUnavailable", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOptions", required: false }] }], unavailableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableOptions", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], referenceDateTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceDateTime", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], openTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "openTo", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], relative: [{ type: i0.Input, args: [{ isSignal: true, alias: "relative", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], highlightedChange: [{ type: i0.Output, args: ["highlightedChange"] }], optionTemplate: [{
+                type: ContentChild,
+                args: [SlDateTimePickerOption, { read: TemplateRef }]
+            }], layer: [{
+                type: ViewChild,
+                args: ['layer']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], listRef: [{
+                type: ViewChild,
+                args: ['rows']
+            }], datePanelRef: [{
+                type: ViewChild,
+                args: ['datePanel']
+            }], field: [{
+                type: ViewChild,
+                args: ['field']
+            }], calendarRef: [{
+                type: ViewChild,
+                args: ['calendar']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATE_TIME_PICKER_DEFAULTS, DATE_TIME_PICKER_MAX_OPTIONS, SlDateTimePicker, SlDateTimePickerFooter, SlDateTimePickerOption, SlDateTimePickerPresets, injectDateTimePickerDefaults, provideDateTimePickerDefaults };
+//# sourceMappingURL=slotted-angular-datetime-picker.mjs.map