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

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

@@ -0,0 +1,1872 @@
+import { durationLabel, compareDateTime, toISODateTime, createDateTimeFormat, createTimeFormat, dateTimeRangeProblems, blockedAround, dayWindow, isDateRefusedInRun, isTruncated, timeList, isSameDate, firstUnavailableIndex, nearestIndex, dateTimeRangeSeconds, runRefusal, isSameTime, orderedRun, nowDateTimeIn, openingIndex, hourJump } from '@slotted/core/date';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createPositioner } from '@slotted/core/positioner';
+import { datetimeRangePickerMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import { isPrintable, createTypeahead } from '@slotted/core/typeahead';
+import { NgTemplateOutlet } from '@angular/common';
+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 { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlCalendar } from '@slotted/angular/calendar';
+import { SlDateTimeField } from '@slotted/angular/datetime-field';
+import { SlField } from '@slotted/angular/field';
+
+/** A quarter of an hour, the step every surveyed panel defaults to within a factor of two. */
+const DATETIME_RANGE_PICKER_STEP = 900;
+/** A whole day at a one-minute step: the finest whole-day list any surveyed implementation offers. */
+const DATETIME_RANGE_PICKER_MAX_OPTIONS = 1440;
+/** One month: two lists stand beside the grid, and two months beside two lists do not fit in 720 pixels. */
+const DATETIME_RANGE_PICKER_MONTHS = 1;
+/** "3 days 21 hr": the duration the band and the rows say, in the family's locale. */
+function dateTimeRangePickerLengthLabel(seconds, locale) {
+    return durationLabel(seconds, locale);
+}
+const FALLBACK = {
+    calendar: 'gregory',
+    closeOnSelect: 'auto',
+    firstDayOfWeek: undefined,
+    granularity: 'minute',
+    hourCycle: undefined,
+    lengthLabel: dateTimeRangePickerLengthLabel,
+    maxOptions: DATETIME_RANGE_PICKER_MAX_OPTIONS,
+    months: DATETIME_RANGE_PICKER_MONTHS,
+    placement: 'bottom-start',
+    size: 'md',
+    step: DATETIME_RANGE_PICKER_STEP,
+    timeZone: undefined,
+    unavailableOptions: 'disable',
+    variant: 'outline',
+};
+const DATETIME_RANGE_PICKER_DEFAULTS = new InjectionToken('slotted datetime range picker defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once what its times look like, what step its lists
+ * offer and how a duration is written — rather than repeating the same inputs
+ * on every picker in a form. The locale and the words come from the language
+ * in force (`provideSlotted`).
+ */
+function provideDateTimeRangePickerDefaults(defaults) {
+    return {
+        provide: DATETIME_RANGE_PICKER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a datetime range picker renders as here, before it states anything of its own. */
+function injectDateTimeRangePickerDefaults() {
+    return inject(DATETIME_RANGE_PICKER_DEFAULTS);
+}
+
+/**
+ * The consumer's own shortcuts, beside the grid and the two lists where there is room
+ * and above them where there is not. Each one is a `slDateTimeRangePickerPreset` button.
+ */
+class SlDateTimeRangePickerPresets {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerPresets, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeRangePickerPresets, isStandalone: true, selector: "[slDateTimeRangePickerPresets]", host: { attributes: { "data-part": "presets" } }, exportAs: ["slDateTimeRangePickerPresets"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerPresets, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimeRangePickerPresets]',
+                    standalone: true,
+                    exportAs: 'slDateTimeRangePickerPresets',
+                    host: { 'data-part': 'presets' },
+                }]
+        }] });
+/** The consumer's own actions, under the grid and the two lists. */
+class SlDateTimeRangePickerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeRangePickerFooter, isStandalone: true, selector: "[slDateTimeRangePickerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDateTimeRangePickerFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimeRangePickerFooter]',
+                    standalone: true,
+                    exportAs: 'slDateTimeRangePickerFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+/**
+ * What one row of a 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. The
+ * context carries the time as `$implicit`, plus `position`, `date`, `label`,
+ * `duration`, `selected`, `current` and `unavailable`.
+ */
+class SlDateTimeRangePickerOption {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeRangePickerOption, isStandalone: true, selector: "[slDateTimeRangePickerOption]", exportAs: ["slDateTimeRangePickerOption"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimeRangePickerOption]',
+                    standalone: true,
+                    exportAs: 'slDateTimeRangePickerOption',
+                }]
+        }] });
+
+/**
+ * Below this width, on a finger, the surface is a sheet rather than a popover.
+ * The query is here as well as in the stylesheet because the DOM has to say
+ * which presentation it is in, and a media query cannot write an attribute.
+ */
+const SHEET_QUERY = '(max-width: 480px) and (pointer: coarse)';
+/** The surface needs an identifier the trigger can point `aria-controls` at. */
+let sequence = 0;
+const NO_HALF = { date: null, time: null };
+const EMPTY = { start: NO_HALF, end: NO_HALF };
+const MIDNIGHT = { hour: 0, minute: 0, second: 0 };
+/** How far `contiguous` looks for an unavailable day when no `maxLength` bounds it. */
+const CONTIGUOUS_SEARCH = 366;
+const NO_HIGHLIGHT = { start: null, end: null };
+/** The one word for nothing: a value whose both ends are `null` is `null`. */
+function normalize(range) {
+    return range === null || range === undefined || (range.start === null && range.end === null)
+        ? null
+        : range;
+}
+function isSameDateTime(a, b) {
+    if (a === null || b === null)
+        return a === b;
+    return compareDateTime(a, b) === 0;
+}
+function isSameDateTimeRange(a, b) {
+    if (a === null || b === null)
+        return a === b;
+    return isSameDateTime(a.start, b.start) && isSameDateTime(a.end, b.end);
+}
+/**
+ * Scrolls the list alone. `scrollIntoView` would scroll every ancestor too,
+ * and a page with an open surface must not jump when a list opens on its
+ * highlight. Centred when the list opens, and by the least that lands the row
+ * whole when a key moves the highlight. jsdom measures nothing, so it is a
+ * no-op there rather than a throw.
+ */
+function revealRow(list, row, centre) {
+    const box = list.getBoundingClientRect();
+    const cell = row.getBoundingClientRect();
+    if (box.height === 0 || cell.height === 0)
+        return;
+    const above = cell.top - box.top;
+    if (centre)
+        list.scrollTop += above - (box.height - cell.height) / 2;
+    else if (above < 0)
+        list.scrollTop += above;
+    else if (cell.bottom > box.bottom)
+        list.scrollTop += cell.bottom - box.bottom;
+}
+function other(position) {
+    return position === 'start' ? 'end' : 'start';
+}
+function halfOf(value) {
+    return value === null ? NO_HALF : { date: value.date, time: value.time };
+}
+function wholeOf(half) {
+    return half.date === null || half.time === null ? null : { date: half.date, time: half.time };
+}
+function workOf(range) {
+    return range === null ? EMPTY : { start: halfOf(range.start), end: halfOf(range.end) };
+}
+function rangeOf(work) {
+    return normalize({ start: wholeOf(work.start), end: wholeOf(work.end) });
+}
+/**
+ * A one-line frame — the value in words, a clear and the trigger — and behind
+ * it one end at a time: two tabs, the field of the current end, a hint, the
+ * range calendar and the list of that end.
+ *
+ * **The frame is one line at any width**, for the reason `time-range-picker`
+ * records. The field lives in the panel's band, where the reader types.
+ *
+ * **One calendar for the two dates, and the list of the current end.** The
+ * grid draws the run and its pending band the way `date-range-picker` does;
+ * the list runs on the day of the current end — or on the grid's focused day
+ * while the end has none — and says the duration beside each row while the
+ * two ends are on the same day.
+ *
+ * **The press that leaves the work incomplete carries focus to the half that
+ * is missing; the press that completes it closes the panel.** The rule
+ * `datetime-picker` wrote, once per end.
+ */
+class SlDateTimeRangePicker {
+    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 });
+    /** Present means the consumer owns which end is being edited. */
+    position = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    defaultPosition = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultPosition" }] : /* istanbul ignore next */ []));
+    /** Where the reader is in each list. 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 */ []));
+    /** The whole-value bounds: where the range starts and ends. */
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** The bounds of every day inside the range, applied together with the two above. */
+    minTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    maxTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /** Answers a whole day and feeds the grid. */
+    isDateUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* istanbul ignore next */ []));
+    /** Answers one time on one day and feeds the lists. */
+    isTimeUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTimeUnavailable" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a run may cross an unavailable day. On, and with a start chosen,
+     * the days beyond the first unavailable one are refused in the grid, and on
+     * the same day the times beyond the first unavailable one in the end list.
+     */
+    contiguous = input(true, { ...(ngDevMode ? { debugName: "contiguous" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The shortest and longest run allowed, in seconds. */
+    minLength = input(undefined, { ...(ngDevMode ? { debugName: "minLength" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    lengthLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lengthLabel" }] : /* 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; the same list for both ends. */
+    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 */ []));
+    months = input(undefined, { ...(ngDevMode ? { debugName: "months" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    weekNumbers = input(undefined, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** Six rows whatever the month needs, so a press of "next" moves no target. */
+    fixedWeeks = input(true, { ...(ngDevMode ? { debugName: "fixedWeeks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** BCP 47. Unset, the language in force (`provideSlotted`) 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, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    yearPivot = input(undefined, { ...(ngDevMode ? { debugName: "yearPivot" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    /** What "now" is, for a story or a test; the clock otherwise. */
+    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 */ []));
+    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)) });
+    /** Draws one clear on the frame, which empties both ends. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the two fields in the band take the relative expression. */
+    relative = input(undefined, { ...(ngDevMode ? { debugName: "relative" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * trigger's names, the two ends, the hint, the limit, and what a panel says
+     * when it is empty or cut short.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The names of the two hidden inputs a plain form post reads. */
+    startName = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startName" }] : /* istanbul ignore next */ []));
+    endName = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endName" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    openChange = output();
+    positionChange = output();
+    highlightedChange = output();
+    /** What one row draws; a template, because it is re-rendered once per option. */
+    optionTemplate;
+    layer;
+    /** Whether the lists were scrolled to their highlight since the surface opened. */
+    revealed = false;
+    triggerRef;
+    field;
+    fieldBox;
+    calendarRef;
+    element = inject(ElementRef).nativeElement;
+    defaults = injectDateTimeRangePickerDefaults();
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this picker's `messages` laid over them. */
+    t = injectMessages(datetimeRangePickerMessages, this.messages);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    enclosing = inject(SlField, { optional: true });
+    contentId = `sl-datetime-range-picker-${String((sequence += 1))}`;
+    positions = ['start', 'end'];
+    ownOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownOpen" }] : /* istanbul ignore next */ []));
+    ownValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownValue" }] : /* istanbul ignore next */ []));
+    ownPosition = signal('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownPosition" }] : /* istanbul ignore next */ []));
+    ownHighlight = signal(NO_HIGHLIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownHighlight" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    clock = signal({
+        date: { year: 2026, 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 */ []));
+    /** The pending end the calendar reports, or `null` while no run is open. */
+    preview = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    /**
+     * The day the grid has focused. The family holds it — rather than the
+     * calendar alone — because a list of an end with no date runs on it.
+     */
+    focusedDate = signal({ year: 2026, month: 1, day: 1 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* 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 */ []));
+    /**
+     * The work: the two ends as the reader left them while the panel is open. A
+     * press in a list writes it; the value is asked for when it is whole. Closed
+     * by anything, it is rebuilt from the value on the next open.
+     */
+    work = signal(EMPTY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "work" }] : /* istanbul ignore next */ []));
+    workStart = computed(() => wholeOf(this.work().start), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workStart" }] : /* istanbul ignore next */ []));
+    workEnd = computed(() => wholeOf(this.work().end), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workEnd" }] : /* istanbul ignore next */ []));
+    /** The option under the pointer, which enters the duration and nothing else. */
+    hovered = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    /** Which list holds focus, so its highlight is the pending end. */
+    listFocused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listFocused" }] : /* istanbul ignore next */ []));
+    /** A pointer press before focus names the reason a field became current. */
+    /** Where focus lands once the surface is drawn. */
+    focusOnOpen = null;
+    positioner = null;
+    dismissable = null;
+    typeaheads = {
+        start: null,
+        end: null,
+    };
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    onValidatorChangeFn = () => undefined;
+    isOpen = computed(() => this.open() ?? this.ownOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    held = computed(() => {
+        const value = this.value();
+        return value === undefined ? this.ownValue() : normalize(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    /** The range the picker holds. Public, so a preset can compare itself to it. */
+    selection = computed(() => this.held(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    currentPosition = computed(() => this.position() ?? this.ownPosition(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPosition" }] : /* istanbul ignore next */ []));
+    highlight = computed(() => this.highlighted() ?? this.ownHighlight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+    start = computed(() => this.held()?.start ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "start" }] : /* istanbul ignore next */ []));
+    end = computed(() => this.held()?.end ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
+    startIso = computed(() => {
+        const start = this.start();
+        return start === null ? '' : toISODateTime(start);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startIso" }] : /* istanbul ignore next */ []));
+    endIso = computed(() => {
+        const end = this.end();
+        return end === null ? '' : toISODateTime(end);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endIso" }] : /* 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 */ []));
+    resolvedFirstDayOfWeek = computed(() => this.firstDayOfWeek() ?? this.defaults.firstDayOfWeek, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedFirstDayOfWeek" }] : /* istanbul ignore next */ []));
+    resolvedMonths = computed(() => this.months() ?? this.defaults.months, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMonths" }] : /* 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 */ []));
+    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(() => createDateTimeFormat({
+        granularity: this.resolvedGranularity(),
+        hourCycle: this.resolvedHourCycle(),
+        locale: this.resolvedLocale(),
+        ...(this.resolvedFirstDayOfWeek() === undefined
+            ? {}
+            : { firstDayOfWeek: this.resolvedFirstDayOfWeek() }),
+        ...(this.yearPivot() === undefined ? {} : { yearPivot: this.yearPivot() }),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /* A time alone in a tab — the reader chose an hour before a day. */
+    timeFormat = computed(() => createTimeFormat({
+        granularity: this.resolvedGranularity(),
+        hourCycle: this.resolvedHourCycle(),
+        locale: this.resolvedLocale(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* 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 */ []));
+    lengthOf = computed(() => {
+        const label = this.lengthLabel() ?? this.defaults.lengthLabel;
+        const locale = this.resolvedLocale();
+        return (seconds) => label(seconds, locale);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lengthOf" }] : /* istanbul ignore next */ []));
+    /**
+     * Validity the family owns, beside the validity the consumer states: the
+     * bounds, the predicate, the order of the two ends and the duration.
+     */
+    problems = computed(() => dateTimeRangeProblems(this.held(), {
+        contiguous: this.contiguous(),
+        max: this.max(),
+        maxLength: this.maxLength(),
+        maxTime: this.maxTime(),
+        min: this.min(),
+        minLength: this.minLength(),
+        minTime: this.minTime(),
+        unavailableDay: this.isDateUnavailable(),
+        unavailableTime: this.isTimeUnavailable(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "problems" }] : /* istanbul ignore next */ []));
+    reversed = computed(() => this.problems().includes('order'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reversed" }] : /* istanbul ignore next */ []));
+    resolvedInvalid = computed(() => {
+        if (this.invalid() !== undefined)
+            return this.invalid();
+        if (this.problems().length > 0)
+            return true;
+        return this.enclosing?.invalid();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    /* Crossed bounds, while the order holds. Reversed, each field keeps the
+       outer bounds and the end field alone says the order is wrong. */
+    workOrdered = computed(() => {
+        const start = this.workStart();
+        const end = this.workEnd();
+        return start !== null && end !== null && compareDateTime(start, end) <= 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workOrdered" }] : /* istanbul ignore next */ []));
+    startMax = computed(() => {
+        const end = this.workEnd();
+        const max = this.max();
+        if (!this.workOrdered() || end === null)
+            return max;
+        return max === undefined || compareDateTime(end, max) < 0 ? end : max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startMax" }] : /* istanbul ignore next */ []));
+    endMin = computed(() => {
+        const start = this.workStart();
+        const min = this.min();
+        if (!this.workOrdered() || start === null)
+            return min;
+        return min === undefined || compareDateTime(start, min) > 0 ? start : min;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endMin" }] : /* istanbul ignore next */ []));
+    /* ── The grid ──────────────────────────────────────────────────────── */
+    /**
+     * What the calendar is shown: the two dates of the work, with the end
+     * withheld while the end is the current position so the next press writes
+     * it instead of restarting the run — `date-range-picker`'s rule.
+     */
+    calendarValue = computed(() => {
+        const { start, end } = this.work();
+        if (start.date === null)
+            return null;
+        if (this.currentPosition() === 'end' && end.date !== null) {
+            return { start: start.date, end: null };
+        }
+        return { start: start.date, end: end.date };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarValue" }] : /* istanbul ignore next */ []));
+    openStart = computed(() => {
+        const value = this.calendarValue();
+        if (value === null || Array.isArray(value) || !('start' in value))
+            return null;
+        return value.end === null ? value.start : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openStart" }] : /* istanbul ignore next */ []));
+    blocked = computed(() => {
+        const openStart = this.openStart();
+        if (openStart === null || !this.contiguous())
+            return { before: null, after: null };
+        const maxLength = this.maxLength();
+        return blockedAround(openStart, this.isDateUnavailable() ?? (() => false), maxLength === undefined ? CONTIGUOUS_SEARCH : Math.ceil(maxLength / 86_400) + 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []));
+    gridUnavailable = computed(() => {
+        const bounds = this.bounds();
+        const openStart = this.openStart();
+        const unavailable = this.isDateUnavailable();
+        const rules = { contiguous: this.contiguous(), count: 'days', unavailable };
+        const blocked = this.blocked();
+        return (date) => {
+            if (dayWindow(date, bounds) === null)
+                return true;
+            if (openStart === null)
+                return unavailable?.(date) === true;
+            return isDateRefusedInRun(openStart, date, rules, blocked);
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridUnavailable" }] : /* istanbul ignore next */ []));
+    /** The day each list serves: the date of its end, or the grid's focused day. */
+    dayFor(position) {
+        return this.work()[position].date ?? this.focusedDate();
+    }
+    isEmptyHalf(position) {
+        const half = this.work()[position];
+        return half.date === null && half.time === null;
+    }
+    /** The end written short in the tab — a whole, a day alone, a time alone — or a dash. */
+    tabValue(position) {
+        const half = this.work()[position];
+        const whole = wholeOf(half);
+        if (whole !== null)
+            return this.writeShort(whole);
+        if (half.date !== null)
+            return this.format().describeDate(half.date, 'short');
+        if (half.time !== null)
+            return this.timeFormat().format(half.time);
+        return '—';
+    }
+    /** The problems of the work as it stands, once it is whole. */
+    workProblems = computed(() => {
+        const whole = rangeOf(this.work());
+        if (whole?.start == null || whole.end === null)
+            return [];
+        return dateTimeRangeProblems(whole, {
+            contiguous: this.contiguous(),
+            max: this.max(),
+            maxLength: this.maxLength(),
+            maxTime: this.maxTime(),
+            min: this.min(),
+            minLength: this.minLength(),
+            minTime: this.minTime(),
+            unavailableDay: this.isDateUnavailable(),
+            unavailableTime: this.isTimeUnavailable(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workProblems" }] : /* istanbul ignore next */ []));
+    workReversed = computed(() => this.workProblems().includes('order'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "workReversed" }] : /* istanbul ignore next */ []));
+    hintProblem = computed(() => this.workProblems()[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintProblem" }] : /* istanbul ignore next */ []));
+    /**
+     * What the next press should be, or what is wrong: the difference between a
+     * panel that refuses and a panel that explains. Empty while the work is
+     * whole and valid, when the length says the duration.
+     */
+    hint = computed(() => {
+        const position = this.currentPosition();
+        const half = this.work()[position];
+        if (half.date === null)
+            return this.t('chooseDay', { end: this.labelFor(position) });
+        if (half.time === null) {
+            return this.t('chooseTime', {
+                end: this.labelFor(position),
+                day: this.format().describeDate(half.date, 'short'),
+            });
+        }
+        const problem = this.hintProblem();
+        if (problem === undefined)
+            return '';
+        return this.t(problem === 'min' || problem === 'max' ? 'bounds' : problem);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /* ── The two lists ─────────────────────────────────────────────────── */
+    truncated = computed(() => isTruncated({
+        maxOptions: this.maxOptions() ?? this.defaults.maxOptions,
+        options: this.options(),
+        step: this.step() ?? this.defaults.step,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "truncated" }] : /* istanbul ignore next */ []));
+    /**
+     * The list of one end: the day's window from both pairs of bounds, the
+     * predicate on that day, and — on the same day as the other end — what the
+     * other end of the work refuses. The duration limits apply across days.
+     */
+    lists = computed(() => ({
+        start: this.listFor('start'),
+        end: this.listFor('end'),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lists" }] : /* istanbul ignore next */ []));
+    labels = computed(() => {
+        const format = this.format().time;
+        const lists = this.lists();
+        return {
+            start: lists.start.map((option) => format.format(option.time)),
+            end: lists.end.map((option) => format.format(option.time)),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    listFor(position) {
+        const day = this.dayFor(position);
+        const window = dayWindow(day, this.bounds());
+        if (window === null || this.isDateUnavailable()?.(day) === true)
+            return [];
+        const isTimeUnavailable = this.isTimeUnavailable();
+        const base = timeList({
+            isTimeUnavailable: isTimeUnavailable === undefined ? undefined : (time) => isTimeUnavailable(time, day),
+            max: window.latest,
+            maxOptions: this.maxOptions() ?? this.defaults.maxOptions,
+            min: window.earliest,
+            options: this.options(),
+            step: this.step() ?? this.defaults.step,
+        });
+        const otherEnd = wholeOf(this.work()[other(position)]);
+        let refused = () => false;
+        if (otherEnd !== null) {
+            const direction = position === 'end' ? 1 : -1;
+            const sameDay = isSameDate(day, otherEnd.date);
+            const wall = sameDay && this.contiguous()
+                ? firstUnavailableIndex(base, nearestIndex(base, otherEnd.time), direction)
+                : -1;
+            const rules = { maxLength: this.maxLength(), minLength: this.minLength() };
+            refused = (option, index) => {
+                const candidate = { date: day, time: option.time };
+                const seconds = position === 'end'
+                    ? dateTimeRangeSeconds(otherEnd, candidate)
+                    : dateTimeRangeSeconds(candidate, otherEnd);
+                if (runRefusal(0, seconds, 1, rules))
+                    return true;
+                return sameDay && wall >= 0 && (direction === 1 ? index >= wall : index <= wall);
+            };
+        }
+        const marked = base.map((option, index) => option.unavailable || !refused(option, index) ? option : { ...option, unavailable: true });
+        const hide = (this.unavailableOptions() ?? this.defaults.unavailableOptions) === 'hide';
+        return hide ? marked.filter((option) => !option.unavailable) : marked;
+    }
+    highlightIndex(position) {
+        const time = this.highlight()[position];
+        if (time === null)
+            return -1;
+        return this.lists()[position].findIndex((option) => isSameTime(option.time, time));
+    }
+    isSelected(position, option) {
+        return isSameTime(option.time, this.work()[position].time);
+    }
+    /** The name of one end: the field's, its tab's and the hint's `{end}`. */
+    labelFor(position) {
+        return this.t(position);
+    }
+    /** The duration a row would make with the other end, on the same day only. */
+    durationOf(position, option) {
+        const otherEnd = wholeOf(this.work()[other(position)]);
+        const day = this.dayFor(position);
+        if (otherEnd === null || option.unavailable || !isSameDate(day, otherEnd.date))
+            return null;
+        const candidate = { date: day, time: option.time };
+        const seconds = position === 'end'
+            ? dateTimeRangeSeconds(otherEnd, candidate)
+            : dateTimeRangeSeconds(candidate, otherEnd);
+        return this.lengthOf()(seconds);
+    }
+    contextFor(position, option, index) {
+        return {
+            $implicit: option.time,
+            current: index === this.highlightIndex(position),
+            date: this.dayFor(position),
+            duration: this.durationOf(position, option),
+            label: this.labels()[position][index] ?? '',
+            position,
+            selected: this.isSelected(position, option),
+            unavailable: option.unavailable,
+        };
+    }
+    /* ── What is said ──────────────────────────────────────────────────── */
+    /**
+     * The pending end: the option under the pointer, or the highlighted option
+     * of the list that has focus.
+     */
+    pendingTime = computed(() => {
+        const hovered = this.hovered();
+        if (hovered !== null)
+            return hovered;
+        if (!this.listFocused())
+            return null;
+        const position = this.currentPosition();
+        const time = this.highlight()[position];
+        return time === null ? null : { position, time };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingTime" }] : /* istanbul ignore next */ []));
+    /** The pending run: a time under the pointer or highlighted, or the grid's pending day. */
+    pending = computed(() => {
+        const time = this.pendingTime();
+        const work = this.work();
+        if (time !== null) {
+            return { ...work, [time.position]: { date: this.dayFor(time.position), time: time.time } };
+        }
+        const openStart = this.openStart();
+        const preview = this.preview();
+        if (openStart === null || preview === null)
+            return null;
+        /* A pending day enters with the time that end already holds, or midnight. */
+        const run = orderedRun(openStart, preview);
+        return {
+            start: { date: run.start, time: work.start.time ?? MIDNIGHT },
+            end: { date: run.end, time: work.end.time ?? MIDNIGHT },
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    spokenLength = computed(() => {
+        const run = this.pending() ?? this.work();
+        const start = wholeOf(run.start);
+        const end = wholeOf(run.end);
+        if (start === null || end === null || compareDateTime(start, end) > 0)
+            return '';
+        return this.lengthOf()(dateTimeRangeSeconds(start, end));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spokenLength" }] : /* istanbul ignore next */ []));
+    limitText = computed(() => {
+        const min = this.minLength();
+        const max = this.maxLength();
+        const length = this.lengthOf();
+        if (min !== undefined && max !== undefined) {
+            return this.t('limit.between', { min: length(min), max: length(max) });
+        }
+        if (min !== undefined)
+            return this.t('limit.atLeast', { min: length(min) });
+        if (max !== undefined)
+            return this.t('limit.atMost', { max: length(max) });
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "limitText" }] : /* istanbul ignore next */ []));
+    /** The trigger's accessible name: focus returns here when the surface closes. */
+    triggerLabel = computed(() => {
+        const start = this.start();
+        const end = this.end();
+        if (start === null || end === null)
+            return this.t('choose');
+        const format = this.format();
+        const ends = { start: format.describe(start), end: format.describe(end) };
+        return compareDateTime(start, end) <= 0
+            ? this.t('change', { ...ends, length: this.lengthOf()(dateTimeRangeSeconds(start, end)) })
+            : this.t('changeReversed', ends);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    /* The frame writes each end short — "12 Sep, 14:00" — because the whole
+       value in words is the trigger's. */
+    short = computed(() => new Intl.DateTimeFormat(this.resolvedLocale(), {
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        month: 'short',
+        timeZone: 'UTC',
+        ...(this.resolvedHourCycle() === undefined
+            ? {}
+            : { hour12: this.resolvedHourCycle() === 12 }),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "short" }] : /* istanbul ignore next */ []));
+    writeShort(item) {
+        return this.short().format(Date.UTC(item.date.year, item.date.month - 1, item.date.day, item.time.hour, item.time.minute));
+    }
+    /** The value in words, one line; `null` while nothing is chosen. */
+    summary = computed(() => {
+        if (this.held() === null)
+            return null;
+        const start = this.start();
+        const end = this.end();
+        return `${start === null ? '' : this.writeShort(start)} – ${end === null ? '' : this.writeShort(end)}`.trim();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* 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. The work starts from the value
+           every time the panel opens. */
+        effect(() => {
+            const open = this.isOpen();
+            if (!open) {
+                this.release();
+                return;
+            }
+            /* Read untracked: the work is rebuilt when the panel opens, and not
+               again when the value or the position moves while it is open. */
+            untracked(() => {
+                const held = this.held();
+                this.work.set(workOf(held));
+                this.hovered.set(null);
+                this.preview.set(null);
+                const missing = held?.start == null ? 'start' : held.end === null ? 'end' : null;
+                if (missing !== null && missing !== this.currentPosition()) {
+                    this.setPosition(missing, 'programmatic', undefined);
+                }
+                const position = this.currentPosition();
+                this.focusedDate.set((position === 'end' ? held?.end?.date : held?.start?.date) ?? this.anchor().date);
+            });
+            afterNextRender(() => this.attach(), { injector: this.injector });
+        });
+        /* The highlight of each list lands where the list opens, and follows the
+           lists under it. */
+        effect(() => {
+            if (!this.isOpen())
+                return;
+            const lists = this.lists();
+            const current = this.highlight();
+            const next = { ...current };
+            for (const position of this.positions) {
+                const index = this.openingIndex(position);
+                next[position] = index < 0 ? null : (lists[position][index]?.time ?? null);
+            }
+            if (!isSameTime(next.start, current.start) || !isSameTime(next.end, current.end)) {
+                this.setHighlight(next, 'programmatic', undefined);
+            }
+        });
+        /* The lists open on their highlight once the layer is rendered, and follow
+           it while the lists under it change. */
+        effect(() => {
+            if (!this.isOpen()) {
+                this.revealed = false;
+                return;
+            }
+            this.highlight();
+            this.lists();
+            this.currentPosition();
+            afterNextRender(() => {
+                this.revealHighlights(!this.revealed);
+                this.revealed = true;
+            }, { injector: this.injector });
+        });
+        /* A rule that changed is a validity that changed, and the form is told. */
+        effect(() => {
+            this.problems();
+            this.onValidatorChangeFn();
+        });
+        this.destroyRef.onDestroy(() => this.release());
+    }
+    ngOnInit() {
+        this.ownOpen.set(this.defaultOpen());
+        this.ownValue.set(normalize(this.defaultValue()));
+        this.ownPosition.set(this.defaultPosition());
+        this.ownHighlight.set(this.defaultHighlighted() ?? NO_HIGHLIGHT);
+        this.clock.set(nowDateTimeIn(this.resolvedTimeZone()));
+        this.focusedDate.set(this.clock().date);
+        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));
+    }
+    /* ── Forms ─────────────────────────────────────────────────────────── */
+    writeValue(value) {
+        this.ownValue.set(normalize(value));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChangeFn = fn;
+    }
+    /**
+     * The rules no other validator can see: the bounds, the predicate, the
+     * order of the two ends and the duration. `required` is left to Angular's
+     * own, because a form already has a word for it.
+     */
+    validate(control) {
+        const value = normalize(control.value);
+        if (value === null)
+            return null;
+        const problems = dateTimeRangeProblems(value, {
+            contiguous: this.contiguous(),
+            max: this.max(),
+            maxLength: this.maxLength(),
+            maxTime: this.maxTime(),
+            min: this.min(),
+            minLength: this.minLength(),
+            minTime: this.minTime(),
+            unavailableDay: this.isDateUnavailable(),
+            unavailableTime: this.isTimeUnavailable(),
+        });
+        if (problems.length === 0)
+            return null;
+        const errors = {};
+        if (problems.includes('order'))
+            errors['slottedDateTimeRangeOrder'] = { actual: value };
+        if (problems.includes('min'))
+            errors['slottedDateTimeRangeMin'] = { min: this.min(), actual: value };
+        if (problems.includes('max'))
+            errors['slottedDateTimeRangeMax'] = { max: this.max(), actual: value };
+        if (problems.includes('unavailable'))
+            errors['slottedDateTimeRangeUnavailable'] = { actual: value };
+        if (problems.includes('length')) {
+            errors['slottedDateTimeRangeLength'] = {
+                minLength: this.minLength(),
+                maxLength: this.maxLength(),
+                actual: value,
+            };
+        }
+        return errors;
+    }
+    /* ── Imperative ────────────────────────────────────────────────────── */
+    /** Puts focus on the trigger, which is the frame. */
+    focus() {
+        this.triggerRef?.nativeElement.focus();
+    }
+    openSurface(source) {
+        this.setOpen(true, 'programmatic', source);
+    }
+    closeSurface(source) {
+        this.setOpen(false, 'programmatic', source);
+    }
+    /** A preset writes its range through here, with the `select` reason. */
+    choose(range, source) {
+        this.work.set(workOf(range));
+        this.commit(range, 'select', source);
+        this.setPosition('start', 'select', source);
+        this.closeAfter(true, source);
+    }
+    /* ── Handlers ──────────────────────────────────────────────────────── */
+    toggle(source) {
+        this.focusOnOpen = 'field';
+        this.setOpen(!this.isOpen(), 'pointer', source);
+    }
+    clear(source) {
+        this.work.set(EMPTY);
+        this.commit(null, 'clear', source);
+        this.setPosition('start', 'clear', source);
+        this.focus();
+    }
+    onTriggerKeyDown(event) {
+        if (!this.editable())
+            return;
+        /* ChromeOS turns the chord into PageDown before the browser sees it, which
+           is why the trigger is the guaranteed way in and the chord a shortcut. */
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.focusOnOpen = 'grid';
+            if (!this.isOpen())
+                this.setOpen(true, 'keyboard', event);
+            else
+                this.enterGrid(this.work()[this.currentPosition()].date ?? this.anchor().date);
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.focusOnOpen = 'field';
+            this.setOpen(!this.isOpen(), 'keyboard', event);
+        }
+    }
+    selectTab(position, source) {
+        if (position !== this.currentPosition())
+            this.setPosition(position, 'pointer', source);
+    }
+    /** Automatic activation: the arrow moves the position with it. */
+    onTabKeyDown(event) {
+        const next = event.key === 'ArrowRight' || event.key === 'End'
+            ? 'end'
+            : event.key === 'ArrowLeft' || event.key === 'Home'
+                ? 'start'
+                : null;
+        if (next === null)
+            return;
+        event.preventDefault();
+        if (next !== this.currentPosition())
+            this.setPosition(next, 'keyboard', event);
+        this.layer?.nativeElement
+            .querySelector(`[data-part="tab"][data-position="${next}"]`)
+            ?.focus({ preventScroll: true });
+    }
+    /**
+     * The way out of a sheet that fills the screen, and of an edit left half
+     * way: a whole work is the value; a half alone stays as it is.
+     */
+    done(source) {
+        const whole = rangeOf(this.work());
+        if (whole?.start != null && whole.end !== null && !isSameDateTimeRange(whole, this.held())) {
+            this.commit(whole, 'select', source);
+        }
+        this.setOpen(false, 'pointer', source);
+        this.triggerRef?.nativeElement.focus({ preventScroll: true });
+    }
+    onControlFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.element.contains(next))
+            return;
+        this.onTouchedFn();
+    }
+    onListFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && event.currentTarget.contains(next))
+            return;
+        this.listFocused.set(false);
+    }
+    hover(position, option) {
+        this.hovered.set(option.unavailable ? null : { position, time: option.time });
+    }
+    /**
+     * A field in the band writes its end to the work at every request it emits,
+     * with the field's own reason, and an open end is a value on its own.
+     */
+    onFieldValue(request) {
+        const next = { ...this.work(), [this.currentPosition()]: halfOf(request.value) };
+        this.work.set(next);
+        this.commit({ start: wholeOf(next.start), end: wholeOf(next.end) }, request.reason, request.source);
+    }
+    chooseNow(source) {
+        if (!this.editable())
+            return;
+        const before = this.work();
+        const position = this.currentPosition();
+        this.settle({ ...before, [position]: halfOf(this.anchor()) }, before, position, source);
+    }
+    select(position, option, source) {
+        if (option.unavailable || !this.editable())
+            return;
+        const before = this.work();
+        const half = { date: before[position].date ?? this.dayFor(position), time: option.time };
+        this.setHighlight({ ...this.highlight(), [position]: option.time }, 'pointer', source);
+        this.settle({ ...before, [position]: half }, before, position, source);
+    }
+    onCalendarValue(request) {
+        const next = request.value;
+        if (next === null || Array.isArray(next) || !('start' in next))
+            return;
+        const before = this.work();
+        if (next.end === null) {
+            /* The first press: the run restarts on this start; the end's date is
+               withheld and its time kept. */
+            this.settle({ start: { ...before.start, date: next.start }, end: { ...before.end, date: null } }, before, 'start', request.source);
+            return;
+        }
+        /* The second press: the grid ordered the two dates; the times stay with
+           the end they were on. */
+        this.settle({ start: { ...before.start, date: next.start }, end: { ...before.end, date: next.end } }, before, 'end', request.source);
+    }
+    /**
+     * After a press wrote a half: whole, the work is the value and the panel
+     * closes when the press completed it; incomplete, focus carries to the half
+     * that is missing — this end's first, then the other end's.
+     */
+    settle(next, before, pressed, source) {
+        const wasWhole = wholeOf(before.start) !== null && wholeOf(before.end) !== null;
+        this.work.set(next);
+        if (wholeOf(next.start) !== null && wholeOf(next.end) !== null) {
+            this.commit(rangeOf(next), 'select', source);
+            this.setPosition(pressed, 'select', source);
+            this.closeAfter(!wasWhole, source);
+            return;
+        }
+        for (const position of [pressed, other(pressed)]) {
+            const half = next[position];
+            if (half.date !== null && half.time !== null)
+                continue;
+            if (half.date === null) {
+                this.setPosition(position, 'select', source);
+                this.enterGrid(next[other(position)].date);
+            }
+            else {
+                this.enterList(position, source);
+            }
+            return;
+        }
+    }
+    enterGrid(date) {
+        afterNextRender(() => {
+            if (date !== null)
+                this.calendarRef?.focusDate(date);
+            this.calendarRef?.focus();
+        }, { injector: this.injector });
+    }
+    closeAfter(completed, source) {
+        const axis = this.closeOnSelect() ?? this.defaults.closeOnSelect;
+        if (!(axis === 'always' || (axis === 'auto' && completed)))
+            return;
+        this.setOpen(false, 'select', source);
+        this.triggerRef?.nativeElement.focus({ preventScroll: true });
+    }
+    /** Where a list opens: on its end, on the nearest step to now, or on the first available option. */
+    openingIndex(position) {
+        const work = this.work();
+        const across = work[other(position)];
+        const otherEnd = across.date !== null && across.time !== null && isSameDate(across.date, this.dayFor(position))
+            ? across.time
+            : null;
+        return openingIndex(this.lists()[position], work[position].time ?? otherEnd ?? this.anchor().time, otherEnd, position);
+    }
+    /**
+     * Into the list of one end: the tab moves there when it is not the current
+     * one, and focus lands on its highlight after the render that drew it.
+     */
+    enterList(position, source) {
+        if (position !== this.currentPosition())
+            this.setPosition(position, 'select', source);
+        afterNextRender(() => {
+            const at = this.highlightIndex(position);
+            const index = at >= 0 ? at : this.openingIndex(position);
+            if (index < 0) {
+                this.field?.focus();
+                return;
+            }
+            const option = this.lists()[position][index];
+            if (option !== undefined) {
+                this.setHighlight({ ...this.highlight(), [position]: option.time }, 'keyboard', undefined);
+            }
+            this.focusOption(position, index);
+        }, { injector: this.injector });
+    }
+    focusOption(position, index) {
+        const rows = this.layer?.nativeElement.querySelectorAll(`[data-part="panel"][data-position="${position}"] [data-part="option"]`);
+        const row = rows?.[index];
+        row?.focus();
+        const list = row?.closest('[data-part="list"]');
+        if (row !== undefined && list)
+            revealRow(list, row, false);
+    }
+    /** The list scrolled to its highlight: centred as the surface opens, by the least after. */
+    revealHighlights(centre) {
+        const index = this.highlightIndex(this.currentPosition());
+        if (index < 0)
+            return;
+        const list = this.layer?.nativeElement.querySelector('[data-part="list"]');
+        const row = list?.querySelectorAll('[data-part="option"]')[index];
+        if (list && row !== undefined)
+            revealRow(list, row, centre);
+    }
+    /** The field, or the grid where the field is not drawn (a coarse pointer). */
+    focusField() {
+        const box = this.fieldBox?.nativeElement;
+        if (box !== undefined && getComputedStyle(box).display === 'none') {
+            this.enterGrid(this.work()[this.currentPosition()].date ?? this.anchor().date);
+            return;
+        }
+        this.field?.focus();
+    }
+    /* ── The keyboard ──────────────────────────────────────────────────── */
+    onListKeyDown(position, event) {
+        const list = this.lists()[position];
+        const found = this.highlightIndex(position);
+        const at = found >= 0 ? found : 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({ ...this.highlight(), [position]: option.time }, 'keyboard', event);
+            this.focusOption(position, 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.select(position, option, event);
+                return;
+            }
+            default:
+                break;
+        }
+        const typeahead = this.typeaheads[position];
+        if (typeahead === null)
+            return;
+        if (!isPrintable(event.key, typeahead.query.length > 0))
+            return;
+        const found2 = typeahead.match(event.key, this.labels()[position], at);
+        if (found2 < 0)
+            return;
+        move(found2);
+    }
+    /* ── The machinery ─────────────────────────────────────────────────── */
+    commit(next, reason, source) {
+        const normalized = normalize(next);
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.value() === undefined ? undefined : this.held(),
+            initial: this.held(),
+            equals: isSameDateTimeRange,
+            onRequest: (request) => {
+                this.valueChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        if (!state.request(normalized, reason, source) || cancelled)
+            return;
+        if (this.value() === undefined)
+            this.ownValue.set(normalized);
+        this.onChangeFn(normalized);
+    }
+    setPosition(next, reason, source) {
+        const state = createControllable({
+            controlled: this.position(),
+            initial: this.currentPosition(),
+            onRequest: (request) => this.positionChange.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.ownPosition.set(next);
+    }
+    setHighlight(next, reason, source) {
+        const state = createControllable({
+            controlled: this.highlighted(),
+            initial: this.highlight(),
+            equals: (a, b) => isSameTime(a.start, b.start) && isSameTime(a.end, b.end),
+            onRequest: (request) => this.highlightedChange.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.ownHighlight.set(next);
+    }
+    setOpen(next, reason, source) {
+        const state = createControllable({
+            controlled: this.open(),
+            initial: this.isOpen(),
+            onRequest: (request) => this.openChange.emit(request),
+        });
+        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));
+        }
+        const trigger = this.triggerRef?.nativeElement;
+        this.dismissable = createDismissableLayer(layer, {
+            branches: trigger === undefined ? [] : [trigger],
+            escape: true,
+            focusOutside: false,
+            modal: false,
+            outsidePress: true,
+            scrollLock: false,
+            onDismiss: (request) => {
+                /* A field with an expression open takes Escape first: the layer asks
+                   in the capture phase, so the field's own attribute is what says so. */
+                if (request.reason === 'escape') {
+                    if (layer.querySelector('[data-ui="datetime-field"][data-relative]') !== null)
+                        return;
+                    if (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 });
+                }
+            },
+        });
+        for (const position of this.positions) {
+            this.typeaheads[position] = createTypeahead({ locale: () => this.resolvedLocale() });
+        }
+        /* Opened by Enter, Space or a press, focus lands on the first segment of
+           the current end's field; by an arrow, in that end's list. */
+        const where = this.focusOnOpen;
+        this.focusOnOpen = null;
+        if (where === 'grid') {
+            this.enterGrid(this.work()[this.currentPosition()].date ?? this.anchor().date);
+        }
+        else if (where === 'field') {
+            this.focusField();
+        }
+    }
+    release() {
+        this.positioner?.destroy();
+        this.positioner = null;
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        for (const position of this.positions) {
+            this.typeaheads[position]?.destroy();
+            this.typeaheads[position] = null;
+        }
+        this.positioned.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDateTimeRangePicker, isStandalone: true, selector: "[slDateTimeRangePicker]", 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 }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", 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 }, contiguous: { classPropertyName: "contiguous", publicName: "contiguous", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, lengthLabel: { classPropertyName: "lengthLabel", publicName: "lengthLabel", 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 }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekNumbers: { classPropertyName: "weekNumbers", publicName: "weekNumbers", isSignal: true, isRequired: false, transformFunction: null }, fixedWeeks: { classPropertyName: "fixedWeeks", publicName: "fixedWeeks", 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 }, yearPivot: { classPropertyName: "yearPivot", publicName: "yearPivot", 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 }, 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 }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, startName: { classPropertyName: "startName", publicName: "startName", isSignal: true, isRequired: false, transformFunction: null }, endName: { classPropertyName: "endName", publicName: "endName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange", positionChange: "positionChange", highlightedChange: "highlightedChange" }, host: { attributes: { "data-ui": "datetime-range-picker", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-granularity": "resolvedGranularity()", "attr.data-calendar": "resolvedCalendar()", "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(() => SlDateTimeRangePicker),
+                multi: true,
+            },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimeRangePicker), multi: true },
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: SlDateTimeRangePickerOption, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true }, { propertyName: "fieldBox", first: true, predicate: ["fieldBox"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }], exportAs: ["slDateTimeRangePicker"], ngImport: i0, template: `<div data-part="control" (focusout)="onControlFocusOut($event)">
+      <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 data-part="summary" [attr.data-placeholder]="summary() === null ? '' : null">{{
+          summary() ?? t('choose')
+        }}</span>
+        <span slIcon><svg slGlyph name="calendar"></svg></span>
+      </button>
+      @if (clearable() && held() !== null) {
+        <button
+          data-part="clear"
+          type="button"
+          [attr.aria-label]="t('clear')"
+          [disabled]="!editable()"
+          (click)="clear($event)"
+        >
+          <span slIcon><svg slGlyph name="x"></svg></span>
+        </button>
+      }
+      <input
+        data-part="hidden-input"
+        type="hidden"
+        [attr.name]="startName()"
+        [value]="startIso()"
+      />
+      <input data-part="hidden-input" type="hidden" [attr.name]="endName()" [value]="endIso()" />
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="datetime-range-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()"
+        >
+          <div data-part="head">
+            <div data-part="tabs" role="tablist">
+              @for (position of positions; track position) {
+                <button
+                  data-part="tab"
+                  role="tab"
+                  type="button"
+                  [attr.id]="contentId + '-tab-' + position"
+                  [attr.data-position]="position"
+                  [attr.aria-selected]="currentPosition() === position"
+                  [attr.aria-controls]="contentId + '-panel'"
+                  [attr.data-current]="currentPosition() === position ? '' : null"
+                  [attr.data-placeholder]="isEmptyHalf(position) ? '' : null"
+                  [tabindex]="currentPosition() === position ? 0 : -1"
+                  [disabled]="!editable()"
+                  (click)="selectTab(position, $event)"
+                  (keydown)="onTabKeyDown($event)"
+                >
+                  <span data-part="tab-label">{{ labelFor(position) }}</span>
+                  <span data-part="tab-value">{{ tabValue(position) }}</span>
+                </button>
+              }
+            </div>
+            <div #fieldBox data-part="field" [attr.data-position]="currentPosition()">
+              <div
+                slDateTimeField
+                #field="slDateTimeField"
+                variant="plain"
+                size="sm"
+                [label]="labelFor(currentPosition())"
+                [locale]="resolvedLocale()"
+                [timeZone]="resolvedTimeZone()"
+                [hourCycle]="resolvedHourCycle()"
+                [granularity]="resolvedGranularity()"
+                [calendar]="resolvedCalendar()"
+                [firstDayOfWeek]="resolvedFirstDayOfWeek()"
+                [yearPivot]="yearPivot()"
+                [referenceDateTime]="referenceDateTime()"
+                [relative]="relative()"
+                [min]="currentPosition() === 'end' ? endMin() : min()"
+                [max]="currentPosition() === 'start' ? startMax() : max()"
+                [minTime]="minTime()"
+                [maxTime]="maxTime()"
+                [isDateUnavailable]="isDateUnavailable()"
+                [isTimeUnavailable]="isTimeUnavailable()"
+                [invalid]="currentPosition() === 'end' && workReversed() ? true : undefined"
+                [disabled]="resolvedDisabled()"
+                [readOnly]="resolvedReadOnly()"
+                [required]="resolvedRequired()"
+                [value]="currentPosition() === 'start' ? workStart() : workEnd()"
+                (valueChange)="onFieldValue($event)"
+              ></div>
+            </div>
+            <button
+              data-part="now"
+              type="button"
+              [disabled]="!editable()"
+              (click)="chooseNow($event)"
+            >
+              {{ t('now') }}
+            </button>
+            <span
+              data-part="hint"
+              [attr.id]="contentId + '-hint'"
+              [attr.data-invalid]="hintProblem() === undefined ? null : ''"
+              >{{ hint() }}</span
+            >
+            <span
+              data-part="length"
+              aria-live="polite"
+              [attr.data-pending]="pending() === null ? null : ''"
+              >{{ spokenLength() }}</span
+            >
+            @if (limitText() !== null) {
+              <span data-part="limit">{{ limitText() }}</span>
+            }
+          </div>
+          <ng-content select="[slDateTimeRangePickerPresets]" />
+          @if (currentPosition(); as position) {
+            <div data-part="panel" [attr.id]="contentId + '-panel'" [attr.data-position]="position">
+              <div data-part="date-panel">
+                <div
+                  slCalendar
+                  #calendar="slCalendar"
+                  selectionMode="range"
+                  [locale]="resolvedLocale()"
+                  [timeZone]="resolvedTimeZone()"
+                  [firstDayOfWeek]="resolvedFirstDayOfWeek()"
+                  [min]="min()?.date"
+                  [max]="max()?.date"
+                  [isDateUnavailable]="gridUnavailable()"
+                  [months]="resolvedMonths()"
+                  [weekNumbers]="weekNumbers()"
+                  [fixedWeeks]="fixedWeeks()"
+                  [readOnly]="resolvedReadOnly()"
+                  [focusedDate]="focusedDate()"
+                  [value]="calendarValue()"
+                  [view]="view()"
+                  (viewChange)="view.set($event)"
+                  (focusedDateChange)="focusedDate.set($event.value)"
+                  (previewChange)="preview.set($event)"
+                  (valueChange)="onCalendarValue($event)"
+                ></div>
+              </div>
+              @if (lists()[position].length === 0) {
+                <div data-part="empty">{{ t('empty') }}</div>
+              } @else {
+                <div
+                  data-part="list"
+                  role="listbox"
+                  [attr.aria-labelledby]="contentId + '-tab-' + position"
+                  [attr.aria-describedby]="hint() === '' ? null : contentId + '-hint'"
+                  [attr.aria-description]="truncated() ? t('truncated') : null"
+                  [attr.data-truncated]="truncated() ? '' : null"
+                  (keydown)="onListKeyDown(position, $event)"
+                  (focusin)="listFocused.set(true)"
+                  (focusout)="onListFocusOut($event)"
+                  (pointerleave)="hovered.set(null)"
+                >
+                  @for (option of lists()[position]; track $index) {
+                    <div
+                      data-part="option"
+                      role="option"
+                      [attr.aria-selected]="isSelected(position, option)"
+                      [attr.aria-disabled]="option.unavailable ? 'true' : null"
+                      [attr.data-disabled]="option.unavailable ? '' : null"
+                      [attr.data-selected]="isSelected(position, option) ? '' : null"
+                      [attr.data-current]="$index === highlightIndex(position) ? '' : null"
+                      [tabindex]="$index === highlightIndex(position) ? 0 : -1"
+                      (click)="select(position, option, $event)"
+                      (pointerenter)="hover(position, option)"
+                    >
+                      @if (optionTemplate) {
+                        <ng-container
+                          [ngTemplateOutlet]="optionTemplate"
+                          [ngTemplateOutletContext]="contextFor(position, option, $index)"
+                        />
+                      } @else {
+                        {{ labels()[position][$index] }}
+                        @if (durationOf(position, option); as duration) {
+                          <span data-part="option-duration">{{ duration }}</span>
+                        }
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+          <div data-part="footer">
+            <ng-content select="[slDateTimeRangePickerFooter]" />
+            <button data-part="done" type="button" (click)="done($event)">
+              {{ t('done') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=datetime-range-picker][data-part=root]{display:block;inline-size:100%}[data-ui=datetime-range-picker] [data-part=control]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_border-width: var(--slotted-control-border-width, 1px);--_action-size: var( --slotted-datetime-range-picker-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc(var(--_height) - var(--_border-width) * 2 - var(--slotted-space-2, .25rem)) ) );--_action-inset: max( 0px, calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2) );background-color:var( --slotted-datetime-range-picker-background, var(--slotted-control-surface, Field) );block-size:var(--_height);border:var(--_border-width) solid var( --slotted-datetime-range-picker-border-color, var(--slotted-control-border-color, ButtonBorder) );border-radius:var(--slotted-datetime-range-picker-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-range-picker-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-range-picker-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);inline-size:100%;min-inline-size:0;position:relative;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-range-picker][data-part=root][data-size=sm] [data-part=control]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 11px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=datetime-range-picker][data-part=root][data-size=lg] [data-part=control]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 15px);--_gap: var(--slotted-control-gap-lg, 10px);--_icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=datetime-range-picker][data-part=root][data-variant=subtle] [data-part=control]{background-color:var( --slotted-datetime-range-picker-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-range-picker-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=datetime-range-picker][data-part=root][data-variant=plain] [data-part=control]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui=datetime-range-picker] [data-part=trigger]{align-items:center;appearance:none;background-color:transparent;border:0;border-radius:inherit;color:inherit;cursor:pointer;display:flex;flex:1 1 auto;font:inherit;gap:var(--_gap);min-inline-size:0;padding-block:0;padding-inline-start:var(--_padding-inline);padding-inline-end:calc(var(--_action-inset) + var(--_action-size) * var(--_actions, 1) + var(--slotted-space-1, .125rem) * (var(--_actions, 1) - 1) + var(--slotted-space-2, .25rem));text-align:start;touch-action:manipulation;-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=control]:has(>[data-part=clear]){--_actions: 2}[data-ui=datetime-range-picker] [data-part=summary]{flex:1 1 auto;font-variant-numeric:tabular-nums;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=summary][data-placeholder]{color:var( --slotted-datetime-range-picker-placeholder-color, var(--slotted-text-muted, GrayText) )}[data-ui=datetime-range-picker] [data-part=trigger]:focus-visible{outline:none}[data-ui=datetime-range-picker] [data-part=trigger]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:var(--slotted-datetime-range-picker-action-color, var(--slotted-text-muted));inset-block-start:50%;inset-inline-end:calc(var(--_action-inset) + (var(--_action-size) - var(--_icon-size)) / 2);position:absolute;translate:0 -50%}[data-ui=datetime-range-picker] [data-part=trigger]:disabled{cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=clear]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-range-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-range-picker-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);inset-block-start:calc((var(--_height) - var(--_border-width) * 2 - var(--_action-size)) / 2);inset-inline-end:calc(var(--_action-inset) + var(--_action-size) + var(--slotted-space-1, .125rem));justify-content:center;padding:0;position:absolute;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-range-picker] [data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-range-picker] [data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));inset-inline-end:0}}[data-ui=datetime-range-picker] [data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-range-picker-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-range-picker-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-range-picker] [data-part=clear]: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-range-picker] [data-part=clear]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker][data-part=root]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{border-color:var( --slotted-datetime-range-picker-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-range-picker][data-part=root][data-variant=subtle]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{background-color:var( --slotted-datetime-range-picker-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker][data-part=root][data-variant=plain]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{background-color:var( --slotted-datetime-range-picker-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=datetime-range-picker] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-range-picker][data-part=root][data-variant=plain] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-range-picker][data-part=root][data-invalid] [data-part=control]{--slotted-focus-ring-color: var( --slotted-datetime-range-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-range-picker-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-range-picker-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-datetime-range-picker-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=datetime-range-picker][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=datetime-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--_border-width) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=datetime-range-picker][data-part=root][data-invalid] [data-part=control]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=datetime-range-picker][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=datetime-range-picker][data-part=root][data-readonly] [data-part=control]{background-color:var( --slotted-datetime-range-picker-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=datetime-range-picker][data-part=root][data-disabled] [data-part=control]{background-color:var( --slotted-datetime-range-picker-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-range-picker-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-range-picker-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=datetime-range-picker][data-part=root][data-disabled] [data-part=trigger]>[data-ui=icon]{color:var(--slotted-disabled-foreground)}[data-ui=datetime-range-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-range-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=datetime-range-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=datetime-range-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-datetime-range-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-datetime-range-picker-enter-up}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-datetime-range-picker-fade}@keyframes slotted-datetime-range-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-datetime-range-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-datetime-range-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=datetime-range-picker][data-part=positioner],[data-ui=datetime-range-picker][data-part=positioner][data-side=top],[data-ui=datetime-range-picker][data-part=positioner][data-side=left],[data-ui=datetime-range-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned],[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-datetime-range-picker-fade}}[data-ui=datetime-range-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=datetime-range-picker] [data-part=content]{background-color:var( --slotted-datetime-range-picker-surface, var(--slotted-surface-raised, Canvas) );border:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );border-radius:var( --slotted-datetime-range-picker-content-radius, var(--slotted-radius-lg, 8px) );box-shadow:var(--slotted-datetime-range-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-datetime-range-picker-content-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);--_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-5, .75rem);grid-template-areas:\"head\" \"presets\" \"panel\" \"footer\";grid-template-columns:minmax(0,1fr);max-inline-size:min(var(--slotted-positioner-available-width, 100vw),var(--slotted-datetime-range-picker-content-max-inline-size, 30rem));padding:var(--slotted-datetime-range-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=datetime-range-picker] [data-part=head]{box-sizing:border-box;inline-size:0;min-inline-size:100%;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-area:head;grid-template-areas:\"tabs tabs\" \"field now\" \"hint length\" \"limit limit\";grid-template-columns:minmax(0,1fr) auto;row-gap:var(--slotted-space-2, .25rem)}[data-ui=datetime-range-picker] [data-part=tabs]{grid-area:tabs}[data-ui=datetime-range-picker] [data-part=field]{grid-area:field}[data-ui=datetime-range-picker] [data-part=head]>[data-part=now]{align-self:center;grid-area:now}[data-ui=datetime-range-picker] [data-part=hint]{align-self:center;grid-area:hint}[data-ui=datetime-range-picker] [data-part=length]{align-self:center;grid-area:length}[data-ui=datetime-range-picker] [data-part=limit]{grid-area:limit}[data-ui=datetime-range-picker] [data-part=tabs]{border-block-end:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );display:grid;gap:var(--slotted-space-2, .25rem);grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=datetime-range-picker] [data-part=tab]{appearance:none;background-color:transparent;border:0;border-start-end-radius:var( --slotted-datetime-range-picker-option-radius, var(--slotted-radius-sm, 4px) );border-start-start-radius:var( --slotted-datetime-range-picker-option-radius, var(--slotted-radius-sm, 4px) );color:var(--slotted-datetime-range-picker-content-color, var(--slotted-text, CanvasText));cursor:pointer;display:flex;flex-direction:column;font:inherit;gap:var(--slotted-space-1, .125rem);min-block-size:var(--slotted-datetime-range-picker-tab-block-size, calc(var(--_row) * 1.5));min-inline-size:0;padding-block:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-3, .375rem);position:relative;text-align:start;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=tab]:after{background-color:var( --slotted-datetime-range-picker-current-color, var(--slotted-tone-accent-solid) );block-size:var(--slotted-datetime-range-picker-current-size, 2px);border-start-end-radius:var(--slotted-radius-xs, 2px);border-start-start-radius:var(--slotted-radius-xs, 2px);content:\"\";inset-block-end:calc(-1 * var(--slotted-border-width-thin, 1px));inset-inline:0;opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-range-picker] [data-part=tab][data-current]:after{opacity:1}[data-ui=datetime-range-picker] [data-part=tab]:hover:not(:disabled):not([data-current]){background-color:var( --slotted-datetime-range-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=tab]: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-range-picker] [data-part=tab]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=tab-label]{color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, 11px);font-weight:var(--slotted-font-weight-medium, 500);letter-spacing:var(--slotted-letter-spacing-wide, .02em);text-transform:uppercase;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=tab-value]{font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=tab][data-placeholder] [data-part=tab-value]{color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=datetime-range-picker] [data-part=field]{--slotted-control-border-width: 0px;--slotted-control-padding-inline-sm: var(--slotted-space-2, .25rem);--slotted-control-padding-inline-md: var(--slotted-space-2, .25rem);--slotted-control-padding-inline-lg: var(--slotted-space-2, .25rem);--slotted-datetime-field-plain-hover-background: transparent;--slotted-datetime-field-invalid-border-color: transparent;--slotted-datetime-field-shadow: none;--slotted-control-shadow-focus-geometry: 0 0 0 0;display:flex;flex:0 1 auto;min-inline-size:0}[data-ui=datetime-range-picker] [data-part=hint]{color:var(--slotted-datetime-range-picker-hint-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-sm, 13px);min-inline-size:0;padding-inline-start:var(--slotted-space-2, .25rem);text-wrap:balance;unicode-bidi:plaintext}[data-ui=datetime-range-picker] [data-part=hint][data-invalid]{color:var(--slotted-datetime-range-picker-invalid-color, var(--slotted-tone-danger-text))}[data-ui=datetime-range-picker] [data-part=length]{color:var(--slotted-datetime-range-picker-length-color, var(--slotted-tone-accent-text));font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);padding-inline:var(--slotted-space-4, .5rem) var(--slotted-space-2, .25rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=length][data-pending]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=datetime-range-picker] [data-part=length]:empty:before{content:\"\\200b\"}[data-ui=datetime-range-picker] [data-part=limit]{color:var(--slotted-datetime-range-picker-limit-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, 11px);padding-inline-start:var(--slotted-space-2, .25rem);unicode-bidi:plaintext}[data-ui=datetime-range-picker] [data-part=panel]{--_panel-gap: calc(var(--slotted-space-4, .5rem) / 2);align-items:stretch;display:flex;flex-wrap:wrap;grid-area:panel;margin:calc(-1 * var(--_panel-gap));min-inline-size:0}[data-ui=datetime-range-picker] [data-part=panel]>*{margin:var(--_panel-gap)}[data-ui=datetime-range-picker] [data-part=date-panel]{flex:0 1 auto;min-inline-size:0}[data-ui=datetime-range-picker] [data-part=panel]>[data-part=list],[data-ui=datetime-range-picker] [data-part=panel]>[data-part=empty]{flex:1 1 var(--slotted-datetime-range-picker-list-min-inline-size, 9rem);min-inline-size:var(--slotted-datetime-range-picker-list-min-inline-size, 9rem)}[data-ui=datetime-range-picker] [data-part=date-panel]+[data-part=list],[data-ui=datetime-range-picker] [data-part=date-panel]+[data-part=empty]{border-inline-start:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );padding-inline-start:var(--slotted-space-4, .5rem)}[data-ui=datetime-range-picker] [data-part=now]{appearance:none;background-color:transparent;border:0;border-radius:var( --slotted-datetime-range-picker-option-radius, var(--slotted-radius-sm, 4px) );color:var(--slotted-datetime-range-picker-now-color, var(--slotted-tone-accent-text));cursor:pointer;flex:0 0 auto;font:inherit;font-size:var(--slotted-font-size-sm, 13px);min-block-size:var(--_row);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-range-picker] [data-part=now]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-range-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-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-range-picker] [data-part=now]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=presets]{display:flex;flex-wrap:wrap;gap:var(--slotted-space-2, .25rem);grid-area:presets;min-inline-size:0}[data-ui=datetime-range-picker] [data-part=preset]{appearance:none;background-color:var( --slotted-datetime-range-picker-preset-background, var(--slotted-tone-secondary-subtle) );border:0;border-radius:var( --slotted-datetime-range-picker-preset-radius, var(--slotted-radius-pill, 999px) );color:var(--slotted-datetime-range-picker-content-color, var(--slotted-text, CanvasText));cursor:pointer;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-font-size-sm, 13px);line-height:var(--slotted-line-height-sm, 1.4);min-block-size:var(--_row);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-4, .5rem);text-align:start;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);white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=preset]:hover:not(:disabled):not([data-selected]){background-color:var( --slotted-datetime-range-picker-preset-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=preset]:active:not(:disabled):not([data-selected]){background-color:var( --slotted-datetime-range-picker-preset-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-range-picker] [data-part=preset][data-selected]{background-color:var( --slotted-datetime-range-picker-preset-selected-background, var(--slotted-tone-accent-subtle-hover) );color:var( --slotted-datetime-range-picker-preset-selected-color, var(--slotted-tone-accent-text) );font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=datetime-range-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-range-picker] [data-part=preset]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=list]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);max-block-size:var( --slotted-datetime-range-picker-list-block-size, calc(var(--_row-pitch) * 8.5) );min-inline-size:0;overflow-y:auto;scroll-padding-block:var(--slotted-space-2, .25rem)}[data-ui=datetime-range-picker] [data-part=option]{align-items:baseline;background-color:transparent;border-radius:var( --slotted-datetime-range-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-3, .375rem);justify-content:space-between;line-height:var(--_row);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-range-picker] [data-part=option-duration]{color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));flex:0 1 auto;font-size:var(--slotted-font-size-xs, 11px);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=option][data-selected] [data-part=option-duration],[data-ui=datetime-range-picker] [data-part=option][data-disabled] [data-part=option-duration]{color:inherit}[data-ui=datetime-range-picker] [data-part=option]:hover:not([data-disabled]):not([data-selected]):not([data-current]){background-color:var( --slotted-datetime-range-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=option][data-current]:not([data-selected]){background-color:var( --slotted-datetime-range-picker-option-current-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-range-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-range-picker] [data-part=option][data-selected]{background-color:var( --slotted-datetime-range-picker-option-selected-background, var(--slotted-tone-accent-solid) );color:var( --slotted-datetime-range-picker-option-selected-color, var(--slotted-tone-accent-on-solid) )}[data-ui=datetime-range-picker] [data-part=option][data-selected]:hover:not([data-disabled]){background-color:var( --slotted-datetime-range-picker-option-selected-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=datetime-range-picker] [data-part=option][data-disabled]{background-color:transparent;color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=empty]{align-items:center;color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));display:flex;font-size:var(--slotted-font-size-sm, 13px);justify-content:center;min-block-size:calc(var(--_row) * 2);padding:var(--slotted-space-4, .5rem);text-align:center;text-wrap:balance;unicode-bidi:plaintext}[data-ui=datetime-range-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-range-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)}[data-ui=datetime-range-picker] [data-part=done]{appearance:none;background-color:var( --slotted-datetime-range-picker-done-background, var(--slotted-tone-accent-solid) );border:0;border-radius:var(--slotted-datetime-range-picker-radius, var(--slotted-control-radius, 4px));color:var( --slotted-datetime-range-picker-done-color, var(--slotted-tone-accent-on-solid, Canvas) );cursor:pointer;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-font-size-sm, 13px);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-sm, 1.4);margin-inline-start:auto;min-block-size:var(--_row);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-5, .75rem);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=done]:hover:not(:disabled){background-color:var( --slotted-datetime-range-picker-done-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=datetime-range-picker] [data-part=done]:active:not(:disabled){background-color:var( --slotted-datetime-range-picker-done-active-background, var(--slotted-tone-accent-solid-active) )}[data-ui=datetime-range-picker] [data-part=done]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@media(pointer:coarse){[data-ui=datetime-range-picker] [data-part=field]{display:none}}@media(max-width:480px)and (pointer:coarse){[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=datetime-range-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-range-picker-sheet-inline-size, 100%);max-inline-size:none;justify-content:center;max-block-size:100vh;max-block-size:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-block-end:max(var(--slotted-datetime-range-picker-content-padding, var(--slotted-space-5, .75rem)),env(safe-area-inset-bottom,0px))}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=list]{max-block-size:calc(var(--_row-pitch) * 4.5)}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=panel]>[data-part=list],[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=panel]>[data-part=empty]{flex-basis:100%}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=date-panel]+[data-part=list]{border-inline-start:0;padding-inline-start:0}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=tab]{min-block-size:var( --slotted-datetime-range-picker-tab-block-size, var(--slotted-target-comfortable, 44px) )}}@media(forced-colors:active){[data-ui=datetime-range-picker][data-part=root][data-variant=plain] [data-part=control]{border-color:ButtonBorder}[data-ui=datetime-range-picker] [data-part=tab]:after{forced-color-adjust:none}[data-ui=datetime-range-picker] [data-part=tab]:after{background-color:currentcolor}[data-ui=datetime-range-picker] [data-part=preset][data-selected],[data-ui=datetime-range-picker] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=datetime-range-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: "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: SlDateTimeRangePicker, decorators: [{
+            type: Component,
+            args: [{ selector: '[slDateTimeRangePicker]', standalone: true, exportAs: 'slDateTimeRangePicker', imports: [NgTemplateOutlet, SlCalendar, SlDateTimeField, SlGlyph, SlIcon], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SlDateTimeRangePicker),
+                            multi: true,
+                        },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimeRangePicker), multi: true },
+                    ], template: `<div data-part="control" (focusout)="onControlFocusOut($event)">
+      <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 data-part="summary" [attr.data-placeholder]="summary() === null ? '' : null">{{
+          summary() ?? t('choose')
+        }}</span>
+        <span slIcon><svg slGlyph name="calendar"></svg></span>
+      </button>
+      @if (clearable() && held() !== null) {
+        <button
+          data-part="clear"
+          type="button"
+          [attr.aria-label]="t('clear')"
+          [disabled]="!editable()"
+          (click)="clear($event)"
+        >
+          <span slIcon><svg slGlyph name="x"></svg></span>
+        </button>
+      }
+      <input
+        data-part="hidden-input"
+        type="hidden"
+        [attr.name]="startName()"
+        [value]="startIso()"
+      />
+      <input data-part="hidden-input" type="hidden" [attr.name]="endName()" [value]="endIso()" />
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="datetime-range-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()"
+        >
+          <div data-part="head">
+            <div data-part="tabs" role="tablist">
+              @for (position of positions; track position) {
+                <button
+                  data-part="tab"
+                  role="tab"
+                  type="button"
+                  [attr.id]="contentId + '-tab-' + position"
+                  [attr.data-position]="position"
+                  [attr.aria-selected]="currentPosition() === position"
+                  [attr.aria-controls]="contentId + '-panel'"
+                  [attr.data-current]="currentPosition() === position ? '' : null"
+                  [attr.data-placeholder]="isEmptyHalf(position) ? '' : null"
+                  [tabindex]="currentPosition() === position ? 0 : -1"
+                  [disabled]="!editable()"
+                  (click)="selectTab(position, $event)"
+                  (keydown)="onTabKeyDown($event)"
+                >
+                  <span data-part="tab-label">{{ labelFor(position) }}</span>
+                  <span data-part="tab-value">{{ tabValue(position) }}</span>
+                </button>
+              }
+            </div>
+            <div #fieldBox data-part="field" [attr.data-position]="currentPosition()">
+              <div
+                slDateTimeField
+                #field="slDateTimeField"
+                variant="plain"
+                size="sm"
+                [label]="labelFor(currentPosition())"
+                [locale]="resolvedLocale()"
+                [timeZone]="resolvedTimeZone()"
+                [hourCycle]="resolvedHourCycle()"
+                [granularity]="resolvedGranularity()"
+                [calendar]="resolvedCalendar()"
+                [firstDayOfWeek]="resolvedFirstDayOfWeek()"
+                [yearPivot]="yearPivot()"
+                [referenceDateTime]="referenceDateTime()"
+                [relative]="relative()"
+                [min]="currentPosition() === 'end' ? endMin() : min()"
+                [max]="currentPosition() === 'start' ? startMax() : max()"
+                [minTime]="minTime()"
+                [maxTime]="maxTime()"
+                [isDateUnavailable]="isDateUnavailable()"
+                [isTimeUnavailable]="isTimeUnavailable()"
+                [invalid]="currentPosition() === 'end' && workReversed() ? true : undefined"
+                [disabled]="resolvedDisabled()"
+                [readOnly]="resolvedReadOnly()"
+                [required]="resolvedRequired()"
+                [value]="currentPosition() === 'start' ? workStart() : workEnd()"
+                (valueChange)="onFieldValue($event)"
+              ></div>
+            </div>
+            <button
+              data-part="now"
+              type="button"
+              [disabled]="!editable()"
+              (click)="chooseNow($event)"
+            >
+              {{ t('now') }}
+            </button>
+            <span
+              data-part="hint"
+              [attr.id]="contentId + '-hint'"
+              [attr.data-invalid]="hintProblem() === undefined ? null : ''"
+              >{{ hint() }}</span
+            >
+            <span
+              data-part="length"
+              aria-live="polite"
+              [attr.data-pending]="pending() === null ? null : ''"
+              >{{ spokenLength() }}</span
+            >
+            @if (limitText() !== null) {
+              <span data-part="limit">{{ limitText() }}</span>
+            }
+          </div>
+          <ng-content select="[slDateTimeRangePickerPresets]" />
+          @if (currentPosition(); as position) {
+            <div data-part="panel" [attr.id]="contentId + '-panel'" [attr.data-position]="position">
+              <div data-part="date-panel">
+                <div
+                  slCalendar
+                  #calendar="slCalendar"
+                  selectionMode="range"
+                  [locale]="resolvedLocale()"
+                  [timeZone]="resolvedTimeZone()"
+                  [firstDayOfWeek]="resolvedFirstDayOfWeek()"
+                  [min]="min()?.date"
+                  [max]="max()?.date"
+                  [isDateUnavailable]="gridUnavailable()"
+                  [months]="resolvedMonths()"
+                  [weekNumbers]="weekNumbers()"
+                  [fixedWeeks]="fixedWeeks()"
+                  [readOnly]="resolvedReadOnly()"
+                  [focusedDate]="focusedDate()"
+                  [value]="calendarValue()"
+                  [view]="view()"
+                  (viewChange)="view.set($event)"
+                  (focusedDateChange)="focusedDate.set($event.value)"
+                  (previewChange)="preview.set($event)"
+                  (valueChange)="onCalendarValue($event)"
+                ></div>
+              </div>
+              @if (lists()[position].length === 0) {
+                <div data-part="empty">{{ t('empty') }}</div>
+              } @else {
+                <div
+                  data-part="list"
+                  role="listbox"
+                  [attr.aria-labelledby]="contentId + '-tab-' + position"
+                  [attr.aria-describedby]="hint() === '' ? null : contentId + '-hint'"
+                  [attr.aria-description]="truncated() ? t('truncated') : null"
+                  [attr.data-truncated]="truncated() ? '' : null"
+                  (keydown)="onListKeyDown(position, $event)"
+                  (focusin)="listFocused.set(true)"
+                  (focusout)="onListFocusOut($event)"
+                  (pointerleave)="hovered.set(null)"
+                >
+                  @for (option of lists()[position]; track $index) {
+                    <div
+                      data-part="option"
+                      role="option"
+                      [attr.aria-selected]="isSelected(position, option)"
+                      [attr.aria-disabled]="option.unavailable ? 'true' : null"
+                      [attr.data-disabled]="option.unavailable ? '' : null"
+                      [attr.data-selected]="isSelected(position, option) ? '' : null"
+                      [attr.data-current]="$index === highlightIndex(position) ? '' : null"
+                      [tabindex]="$index === highlightIndex(position) ? 0 : -1"
+                      (click)="select(position, option, $event)"
+                      (pointerenter)="hover(position, option)"
+                    >
+                      @if (optionTemplate) {
+                        <ng-container
+                          [ngTemplateOutlet]="optionTemplate"
+                          [ngTemplateOutletContext]="contextFor(position, option, $index)"
+                        />
+                      } @else {
+                        {{ labels()[position][$index] }}
+                        @if (durationOf(position, option); as duration) {
+                          <span data-part="option-duration">{{ duration }}</span>
+                        }
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+          <div data-part="footer">
+            <ng-content select="[slDateTimeRangePickerFooter]" />
+            <button data-part="done" type="button" (click)="done($event)">
+              {{ t('done') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'datetime-range-picker',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-granularity]': 'resolvedGranularity()',
+                        '[attr.data-calendar]': 'resolvedCalendar()',
+                        '[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-range-picker][data-part=root]{display:block;inline-size:100%}[data-ui=datetime-range-picker] [data-part=control]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_border-width: var(--slotted-control-border-width, 1px);--_action-size: var( --slotted-datetime-range-picker-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc(var(--_height) - var(--_border-width) * 2 - var(--slotted-space-2, .25rem)) ) );--_action-inset: max( 0px, calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2) );background-color:var( --slotted-datetime-range-picker-background, var(--slotted-control-surface, Field) );block-size:var(--_height);border:var(--_border-width) solid var( --slotted-datetime-range-picker-border-color, var(--slotted-control-border-color, ButtonBorder) );border-radius:var(--slotted-datetime-range-picker-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-range-picker-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-range-picker-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);inline-size:100%;min-inline-size:0;position:relative;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),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-range-picker][data-part=root][data-size=sm] [data-part=control]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 11px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=datetime-range-picker][data-part=root][data-size=lg] [data-part=control]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 15px);--_gap: var(--slotted-control-gap-lg, 10px);--_icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=datetime-range-picker][data-part=root][data-variant=subtle] [data-part=control]{background-color:var( --slotted-datetime-range-picker-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-range-picker-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=datetime-range-picker][data-part=root][data-variant=plain] [data-part=control]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui=datetime-range-picker] [data-part=trigger]{align-items:center;appearance:none;background-color:transparent;border:0;border-radius:inherit;color:inherit;cursor:pointer;display:flex;flex:1 1 auto;font:inherit;gap:var(--_gap);min-inline-size:0;padding-block:0;padding-inline-start:var(--_padding-inline);padding-inline-end:calc(var(--_action-inset) + var(--_action-size) * var(--_actions, 1) + var(--slotted-space-1, .125rem) * (var(--_actions, 1) - 1) + var(--slotted-space-2, .25rem));text-align:start;touch-action:manipulation;-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=control]:has(>[data-part=clear]){--_actions: 2}[data-ui=datetime-range-picker] [data-part=summary]{flex:1 1 auto;font-variant-numeric:tabular-nums;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=summary][data-placeholder]{color:var( --slotted-datetime-range-picker-placeholder-color, var(--slotted-text-muted, GrayText) )}[data-ui=datetime-range-picker] [data-part=trigger]:focus-visible{outline:none}[data-ui=datetime-range-picker] [data-part=trigger]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:var(--slotted-datetime-range-picker-action-color, var(--slotted-text-muted));inset-block-start:50%;inset-inline-end:calc(var(--_action-inset) + (var(--_action-size) - var(--_icon-size)) / 2);position:absolute;translate:0 -50%}[data-ui=datetime-range-picker] [data-part=trigger]:disabled{cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=clear]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-range-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-range-picker-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);inset-block-start:calc((var(--_height) - var(--_border-width) * 2 - var(--_action-size)) / 2);inset-inline-end:calc(var(--_action-inset) + var(--_action-size) + var(--slotted-space-1, .125rem));justify-content:center;padding:0;position:absolute;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-range-picker] [data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-range-picker] [data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));inset-inline-end:0}}[data-ui=datetime-range-picker] [data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-range-picker-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-range-picker-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-range-picker] [data-part=clear]: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-range-picker] [data-part=clear]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker][data-part=root]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{border-color:var( --slotted-datetime-range-picker-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-range-picker][data-part=root][data-variant=subtle]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{background-color:var( --slotted-datetime-range-picker-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker][data-part=root][data-variant=plain]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{background-color:var( --slotted-datetime-range-picker-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=datetime-range-picker] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-range-picker][data-part=root][data-variant=plain] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-range-picker][data-part=root][data-invalid] [data-part=control]{--slotted-focus-ring-color: var( --slotted-datetime-range-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-range-picker-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-range-picker-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var( --slotted-datetime-range-picker-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=datetime-range-picker][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=datetime-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--_border-width) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=datetime-range-picker][data-part=root][data-invalid] [data-part=control]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=datetime-range-picker][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:has(>[data-part=trigger]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=datetime-range-picker][data-part=root][data-readonly] [data-part=control]{background-color:var( --slotted-datetime-range-picker-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=datetime-range-picker][data-part=root][data-disabled] [data-part=control]{background-color:var( --slotted-datetime-range-picker-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-range-picker-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-range-picker-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=datetime-range-picker][data-part=root][data-disabled] [data-part=trigger]>[data-ui=icon]{color:var(--slotted-disabled-foreground)}[data-ui=datetime-range-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-range-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=datetime-range-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=datetime-range-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-datetime-range-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-datetime-range-picker-enter-up}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-datetime-range-picker-fade}@keyframes slotted-datetime-range-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-datetime-range-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-datetime-range-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=datetime-range-picker][data-part=positioner],[data-ui=datetime-range-picker][data-part=positioner][data-side=top],[data-ui=datetime-range-picker][data-part=positioner][data-side=left],[data-ui=datetime-range-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned],[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=datetime-range-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-datetime-range-picker-fade}}[data-ui=datetime-range-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=datetime-range-picker] [data-part=content]{background-color:var( --slotted-datetime-range-picker-surface, var(--slotted-surface-raised, Canvas) );border:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );border-radius:var( --slotted-datetime-range-picker-content-radius, var(--slotted-radius-lg, 8px) );box-shadow:var(--slotted-datetime-range-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-datetime-range-picker-content-color, var(--slotted-text, CanvasText));font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);--_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-5, .75rem);grid-template-areas:\"head\" \"presets\" \"panel\" \"footer\";grid-template-columns:minmax(0,1fr);max-inline-size:min(var(--slotted-positioner-available-width, 100vw),var(--slotted-datetime-range-picker-content-max-inline-size, 30rem));padding:var(--slotted-datetime-range-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=datetime-range-picker] [data-part=head]{box-sizing:border-box;inline-size:0;min-inline-size:100%;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-area:head;grid-template-areas:\"tabs tabs\" \"field now\" \"hint length\" \"limit limit\";grid-template-columns:minmax(0,1fr) auto;row-gap:var(--slotted-space-2, .25rem)}[data-ui=datetime-range-picker] [data-part=tabs]{grid-area:tabs}[data-ui=datetime-range-picker] [data-part=field]{grid-area:field}[data-ui=datetime-range-picker] [data-part=head]>[data-part=now]{align-self:center;grid-area:now}[data-ui=datetime-range-picker] [data-part=hint]{align-self:center;grid-area:hint}[data-ui=datetime-range-picker] [data-part=length]{align-self:center;grid-area:length}[data-ui=datetime-range-picker] [data-part=limit]{grid-area:limit}[data-ui=datetime-range-picker] [data-part=tabs]{border-block-end:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );display:grid;gap:var(--slotted-space-2, .25rem);grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=datetime-range-picker] [data-part=tab]{appearance:none;background-color:transparent;border:0;border-start-end-radius:var( --slotted-datetime-range-picker-option-radius, var(--slotted-radius-sm, 4px) );border-start-start-radius:var( --slotted-datetime-range-picker-option-radius, var(--slotted-radius-sm, 4px) );color:var(--slotted-datetime-range-picker-content-color, var(--slotted-text, CanvasText));cursor:pointer;display:flex;flex-direction:column;font:inherit;gap:var(--slotted-space-1, .125rem);min-block-size:var(--slotted-datetime-range-picker-tab-block-size, calc(var(--_row) * 1.5));min-inline-size:0;padding-block:var(--slotted-space-2, .25rem) var(--slotted-space-3, .375rem);padding-inline:var(--slotted-space-3, .375rem);position:relative;text-align:start;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=tab]:after{background-color:var( --slotted-datetime-range-picker-current-color, var(--slotted-tone-accent-solid) );block-size:var(--slotted-datetime-range-picker-current-size, 2px);border-start-end-radius:var(--slotted-radius-xs, 2px);border-start-start-radius:var(--slotted-radius-xs, 2px);content:\"\";inset-block-end:calc(-1 * var(--slotted-border-width-thin, 1px));inset-inline:0;opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-range-picker] [data-part=tab][data-current]:after{opacity:1}[data-ui=datetime-range-picker] [data-part=tab]:hover:not(:disabled):not([data-current]){background-color:var( --slotted-datetime-range-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=tab]: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-range-picker] [data-part=tab]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=tab-label]{color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, 11px);font-weight:var(--slotted-font-weight-medium, 500);letter-spacing:var(--slotted-letter-spacing-wide, .02em);text-transform:uppercase;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=tab-value]{font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=tab][data-placeholder] [data-part=tab-value]{color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=datetime-range-picker] [data-part=field]{--slotted-control-border-width: 0px;--slotted-control-padding-inline-sm: var(--slotted-space-2, .25rem);--slotted-control-padding-inline-md: var(--slotted-space-2, .25rem);--slotted-control-padding-inline-lg: var(--slotted-space-2, .25rem);--slotted-datetime-field-plain-hover-background: transparent;--slotted-datetime-field-invalid-border-color: transparent;--slotted-datetime-field-shadow: none;--slotted-control-shadow-focus-geometry: 0 0 0 0;display:flex;flex:0 1 auto;min-inline-size:0}[data-ui=datetime-range-picker] [data-part=hint]{color:var(--slotted-datetime-range-picker-hint-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-sm, 13px);min-inline-size:0;padding-inline-start:var(--slotted-space-2, .25rem);text-wrap:balance;unicode-bidi:plaintext}[data-ui=datetime-range-picker] [data-part=hint][data-invalid]{color:var(--slotted-datetime-range-picker-invalid-color, var(--slotted-tone-danger-text))}[data-ui=datetime-range-picker] [data-part=length]{color:var(--slotted-datetime-range-picker-length-color, var(--slotted-tone-accent-text));font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);padding-inline:var(--slotted-space-4, .5rem) var(--slotted-space-2, .25rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=length][data-pending]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=datetime-range-picker] [data-part=length]:empty:before{content:\"\\200b\"}[data-ui=datetime-range-picker] [data-part=limit]{color:var(--slotted-datetime-range-picker-limit-color, var(--slotted-text-muted, GrayText));font-size:var(--slotted-font-size-xs, 11px);padding-inline-start:var(--slotted-space-2, .25rem);unicode-bidi:plaintext}[data-ui=datetime-range-picker] [data-part=panel]{--_panel-gap: calc(var(--slotted-space-4, .5rem) / 2);align-items:stretch;display:flex;flex-wrap:wrap;grid-area:panel;margin:calc(-1 * var(--_panel-gap));min-inline-size:0}[data-ui=datetime-range-picker] [data-part=panel]>*{margin:var(--_panel-gap)}[data-ui=datetime-range-picker] [data-part=date-panel]{flex:0 1 auto;min-inline-size:0}[data-ui=datetime-range-picker] [data-part=panel]>[data-part=list],[data-ui=datetime-range-picker] [data-part=panel]>[data-part=empty]{flex:1 1 var(--slotted-datetime-range-picker-list-min-inline-size, 9rem);min-inline-size:var(--slotted-datetime-range-picker-list-min-inline-size, 9rem)}[data-ui=datetime-range-picker] [data-part=date-panel]+[data-part=list],[data-ui=datetime-range-picker] [data-part=date-panel]+[data-part=empty]{border-inline-start:var(--slotted-border-width-thin, 1px) solid var( --slotted-datetime-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );padding-inline-start:var(--slotted-space-4, .5rem)}[data-ui=datetime-range-picker] [data-part=now]{appearance:none;background-color:transparent;border:0;border-radius:var( --slotted-datetime-range-picker-option-radius, var(--slotted-radius-sm, 4px) );color:var(--slotted-datetime-range-picker-now-color, var(--slotted-tone-accent-text));cursor:pointer;flex:0 0 auto;font:inherit;font-size:var(--slotted-font-size-sm, 13px);min-block-size:var(--_row);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=datetime-range-picker] [data-part=now]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-range-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-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-range-picker] [data-part=now]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=presets]{display:flex;flex-wrap:wrap;gap:var(--slotted-space-2, .25rem);grid-area:presets;min-inline-size:0}[data-ui=datetime-range-picker] [data-part=preset]{appearance:none;background-color:var( --slotted-datetime-range-picker-preset-background, var(--slotted-tone-secondary-subtle) );border:0;border-radius:var( --slotted-datetime-range-picker-preset-radius, var(--slotted-radius-pill, 999px) );color:var(--slotted-datetime-range-picker-content-color, var(--slotted-text, CanvasText));cursor:pointer;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-font-size-sm, 13px);line-height:var(--slotted-line-height-sm, 1.4);min-block-size:var(--_row);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-4, .5rem);text-align:start;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);white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=preset]:hover:not(:disabled):not([data-selected]){background-color:var( --slotted-datetime-range-picker-preset-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=preset]:active:not(:disabled):not([data-selected]){background-color:var( --slotted-datetime-range-picker-preset-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-range-picker] [data-part=preset][data-selected]{background-color:var( --slotted-datetime-range-picker-preset-selected-background, var(--slotted-tone-accent-subtle-hover) );color:var( --slotted-datetime-range-picker-preset-selected-color, var(--slotted-tone-accent-text) );font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=datetime-range-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=datetime-range-picker] [data-part=preset]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=list]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);max-block-size:var( --slotted-datetime-range-picker-list-block-size, calc(var(--_row-pitch) * 8.5) );min-inline-size:0;overflow-y:auto;scroll-padding-block:var(--slotted-space-2, .25rem)}[data-ui=datetime-range-picker] [data-part=option]{align-items:baseline;background-color:transparent;border-radius:var( --slotted-datetime-range-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-3, .375rem);justify-content:space-between;line-height:var(--_row);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-range-picker] [data-part=option-duration]{color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));flex:0 1 auto;font-size:var(--slotted-font-size-xs, 11px);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;white-space:nowrap}[data-ui=datetime-range-picker] [data-part=option][data-selected] [data-part=option-duration],[data-ui=datetime-range-picker] [data-part=option][data-disabled] [data-part=option-duration]{color:inherit}[data-ui=datetime-range-picker] [data-part=option]:hover:not([data-disabled]):not([data-selected]):not([data-current]){background-color:var( --slotted-datetime-range-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-range-picker] [data-part=option][data-current]:not([data-selected]){background-color:var( --slotted-datetime-range-picker-option-current-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-range-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-range-picker] [data-part=option][data-selected]{background-color:var( --slotted-datetime-range-picker-option-selected-background, var(--slotted-tone-accent-solid) );color:var( --slotted-datetime-range-picker-option-selected-color, var(--slotted-tone-accent-on-solid) )}[data-ui=datetime-range-picker] [data-part=option][data-selected]:hover:not([data-disabled]){background-color:var( --slotted-datetime-range-picker-option-selected-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=datetime-range-picker] [data-part=option][data-disabled]{background-color:transparent;color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=datetime-range-picker] [data-part=empty]{align-items:center;color:var(--slotted-datetime-range-picker-label-color, var(--slotted-text-muted, GrayText));display:flex;font-size:var(--slotted-font-size-sm, 13px);justify-content:center;min-block-size:calc(var(--_row) * 2);padding:var(--slotted-space-4, .5rem);text-align:center;text-wrap:balance;unicode-bidi:plaintext}[data-ui=datetime-range-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-range-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)}[data-ui=datetime-range-picker] [data-part=done]{appearance:none;background-color:var( --slotted-datetime-range-picker-done-background, var(--slotted-tone-accent-solid) );border:0;border-radius:var(--slotted-datetime-range-picker-radius, var(--slotted-control-radius, 4px));color:var( --slotted-datetime-range-picker-done-color, var(--slotted-tone-accent-on-solid, Canvas) );cursor:pointer;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-font-size-sm, 13px);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-sm, 1.4);margin-inline-start:auto;min-block-size:var(--_row);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-5, .75rem);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-range-picker] [data-part=done]:hover:not(:disabled){background-color:var( --slotted-datetime-range-picker-done-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=datetime-range-picker] [data-part=done]:active:not(:disabled){background-color:var( --slotted-datetime-range-picker-done-active-background, var(--slotted-tone-accent-solid-active) )}[data-ui=datetime-range-picker] [data-part=done]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@media(pointer:coarse){[data-ui=datetime-range-picker] [data-part=field]{display:none}}@media(max-width:480px)and (pointer:coarse){[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=datetime-range-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-range-picker-sheet-inline-size, 100%);max-inline-size:none;justify-content:center;max-block-size:100vh;max-block-size:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-block-end:max(var(--slotted-datetime-range-picker-content-padding, var(--slotted-space-5, .75rem)),env(safe-area-inset-bottom,0px))}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=list]{max-block-size:calc(var(--_row-pitch) * 4.5)}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=panel]>[data-part=list],[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=panel]>[data-part=empty]{flex-basis:100%}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=date-panel]+[data-part=list]{border-inline-start:0;padding-inline-start:0}[data-ui=datetime-range-picker][data-part=positioner][data-presentation=sheet] [data-part=tab]{min-block-size:var( --slotted-datetime-range-picker-tab-block-size, var(--slotted-target-comfortable, 44px) )}}@media(forced-colors:active){[data-ui=datetime-range-picker][data-part=root][data-variant=plain] [data-part=control]{border-color:ButtonBorder}[data-ui=datetime-range-picker] [data-part=tab]:after{forced-color-adjust:none}[data-ui=datetime-range-picker] [data-part=tab]:after{background-color:currentcolor}[data-ui=datetime-range-picker] [data-part=preset][data-selected],[data-ui=datetime-range-picker] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=datetime-range-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 }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", 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 }] }], contiguous: [{ type: i0.Input, args: [{ isSignal: true, alias: "contiguous", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], lengthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthLabel", 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 }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumbers", required: false }] }], fixedWeeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedWeeks", 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 }] }], yearPivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPivot", 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 }] }], 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 }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], startName: [{ type: i0.Input, args: [{ isSignal: true, alias: "startName", required: false }] }], endName: [{ type: i0.Input, args: [{ isSignal: true, alias: "endName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], positionChange: [{ type: i0.Output, args: ["positionChange"] }], highlightedChange: [{ type: i0.Output, args: ["highlightedChange"] }], optionTemplate: [{
+                type: ContentChild,
+                args: [SlDateTimeRangePickerOption, { read: TemplateRef }]
+            }], layer: [{
+                type: ViewChild,
+                args: ['layer']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], field: [{
+                type: ViewChild,
+                args: ['field']
+            }], fieldBox: [{
+                type: ViewChild,
+                args: ['fieldBox']
+            }], calendarRef: [{
+                type: ViewChild,
+                args: ['calendar']
+            }] } });
+/**
+ * One shortcut. It writes its range with the `select` reason and carries
+ * `data-selected` while the value equals it. The list is the product's — "the
+ * morning shift" is a business clock — and the family ships the button, not
+ * the list.
+ */
+class SlDateTimeRangePickerPreset {
+    /** The range the press writes, or a function resolving it at the press. */
+    range = input.required({ ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), alias: 'slDateTimeRangePickerPreset' });
+    picker = inject(SlDateTimeRangePicker);
+    selected = computed(() => {
+        const range = this.range();
+        return isSameDateTimeRange(this.picker.selection(), typeof range === 'function' ? range() : range);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    choose(event) {
+        if (event.defaultPrevented)
+            return;
+        const range = this.range();
+        this.picker.choose(typeof range === 'function' ? range() : range, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerPreset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDateTimeRangePickerPreset, isStandalone: true, selector: "button[slDateTimeRangePickerPreset]", inputs: { range: { classPropertyName: "range", publicName: "slDateTimeRangePickerPreset", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-part": "preset", "type": "button" }, listeners: { "click": "choose($event)" }, properties: { "attr.data-selected": "selected() ? '' : null" } }, exportAs: ["slDateTimeRangePickerPreset"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeRangePickerPreset, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slDateTimeRangePickerPreset]',
+                    standalone: true,
+                    exportAs: 'slDateTimeRangePickerPreset',
+                    host: {
+                        'data-part': 'preset',
+                        type: 'button',
+                        '[attr.data-selected]': "selected() ? '' : null",
+                        '(click)': 'choose($event)',
+                    },
+                }]
+        }], propDecorators: { range: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDateTimeRangePickerPreset", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATETIME_RANGE_PICKER_DEFAULTS, DATETIME_RANGE_PICKER_MAX_OPTIONS, DATETIME_RANGE_PICKER_MONTHS, DATETIME_RANGE_PICKER_STEP, SlDateTimeRangePicker, SlDateTimeRangePickerFooter, SlDateTimeRangePickerOption, SlDateTimeRangePickerPreset, SlDateTimeRangePickerPresets, dateTimeRangePickerLengthLabel, injectDateTimeRangePickerDefaults, isSameDateTimeRange, provideDateTimeRangePickerDefaults };
+//# sourceMappingURL=slotted-angular-datetime-range-picker.mjs.map