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

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

@@ -0,0 +1,1058 @@
+import { EMPTY_SEGMENTS, createDateTimeFormat, dateTimeOf, incompleteHalf, toISODateTime, parseDuration, DATE_TIME_UNITS, resolveRelativeDateTime, isSameDateTime, segmentsOfDateTime, nowDateTimeIn, isDateTimeInRange, dayWindow, isTimeInRange, isRelativeKey, clearSegment, boundSegment, stepSegment, typeDayPeriod, typeDigit, commitTyping, halfOfField, fieldRange } from '@slotted/core/date';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, output, ElementRef, HostAttributeToken, signal, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } 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 { datetimeFieldMessages } from '@slotted/core/i18n';
+import { SlField } from '@slotted/angular/field';
+
+const FALLBACK = {
+    calendar: 'gregory',
+    firstDayOfWeek: undefined,
+    granularity: 'minute',
+    hourCycle: undefined,
+    relative: true,
+    size: 'md',
+    timeZone: undefined,
+    variant: 'outline',
+    yearPivot: undefined,
+};
+const DATE_TIME_FIELD_DEFAULTS = new InjectionToken('slotted datetime field defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once what its datetimes look like, which clock they
+ * run on and which zone answers "now", rather than repeating the same inputs on
+ * every control in a form. A control that states any of them itself still
+ * wins. The locale that writes them, and the words the controls announce, come
+ * from the language in force (`provideSlotted`).
+ */
+function provideDateTimeFieldDefaults(defaults) {
+    return {
+        provide: DATE_TIME_FIELD_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a datetime field renders as here, before it states anything itself. */
+function injectDateTimeFieldDefaults() {
+    return inject(DATE_TIME_FIELD_DEFAULTS);
+}
+
+/**
+ * How far `PageUp` and `PageDown` move each field.
+ *
+ * Each half pages the way its own family already pages: year 10, month 5 and
+ * day 5 from `date-field`, hour 3, minute 15, second 15 and day period 1 from
+ * `time-field`. Two fields drawing the same segment and paging it differently
+ * would be one behaviour with two answers.
+ */
+const PAGE_STEP = {
+    year: 10,
+    month: 5,
+    day: 5,
+    hour: 3,
+    minute: 15,
+    second: 15,
+    dayPeriod: 1,
+};
+/**
+ * The hidden element carrying the whole value needs an identifier the group can
+ * point `aria-labelledby` at, and Angular has no `useId`. A module counter is
+ * what the framework leaves: stable for a given render order, which is what
+ * hydration needs, and never on the public surface.
+ */
+let sequence = 0;
+/**
+ * A segmented datetime control: one spin button per field, in the order the
+ * locale writes them, with all seven fields in one row.
+ *
+ * **It is not a `slDateField` beside a `slTimeField`.** Two nested family roots
+ * would be two groups, two values and two `SegmentState`s. The order of the
+ * halves and the literal between them come from one combined
+ * `Intl.DateTimeFormat` that neither of them can see, and a digit that fills
+ * the last date segment advances across the boundary into the first time
+ * segment — which two roots cannot do.
+ *
+ * **Angular is a component with a template and a `ControlValueAccessor`**,
+ * because a datetime belongs in a Reactive Form and Angular has the integration
+ * point for it. It also implements `Validator`, and it reports five rules where
+ * Kendo — the only surveyed implementation that validates at all — reports
+ * three: `dateTimeParse`, `dateTimeIncomplete`, `dateTimeMin`, `dateTimeMax`
+ * and `dateTimeUnavailable`.
+ *
+ * **The missing half is said out loud**, on the root, on the request and in the
+ * validator. Every surveyed implementation reports an empty control and loses
+ * what was written.
+ */
+class SlDateTimeField {
+    /** Present means the consumer owns the value. */
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The value the control starts from when nobody else writes one. */
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** The earliest whole value: where the range starts. Also a form rule. */
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** The latest whole value: where the range ends. Also a form rule. */
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /**
+     * The earliest time of **every** day inside the range.
+     *
+     * It applies beside `min` rather than instead of it, which MUI's own
+     * validation page records that it cannot do.
+     */
+    minTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
+    /** The latest time of every day inside the range, beside `max`. */
+    maxTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    /** Refuses particular days — a holiday, a closed shop, a booked room. */
+    isDateUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* istanbul ignore next */ []));
+    /**
+     * Refuses particular times on a particular day. Two predicates rather than
+     * one, because a day-level answer cannot be derived from a datetime-level
+     * predicate without probing every step of that day.
+     */
+    isTimeUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTimeUnavailable" }] : /* istanbul ignore next */ []));
+    /**
+     * BCP 47. Decides the field order, the separators and the placeholder.
+     * Unset, the language in force decides.
+     */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Which zone answers "what is the time now", and nothing else. */
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    hourCycle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    granularity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    calendar = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    yearPivot = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearPivot" }] : /* istanbul ignore next */ []));
+    /**
+     * What an empty segment steps from, and what a duration resolves against.
+     * Unset, both are the current datetime in `timeZone`.
+     */
+    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 */ []));
+    /** Unstated rather than `false`, so the control defers to the field. */
+    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 a button that empties both halves and returns focus to the control. */
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether `+`, `-` and `=` open the duration 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
+     * clear button's name and the duration expression's name.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The name a plain form post carries the ISO string under. */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * One output for one transition, carrying the value, the value it replaces,
+     * the segments, the half that is still missing, the reason, the originating
+     * event and `cancel()`. There is no `[(value)]`, because a two-way binding
+     * has one slot and can carry none of those.
+     */
+    /**
+     * The accessible name, when it is bound rather than written: a static
+     * `aria-label` is read once from the host, and a family naming this field
+     * from its own input — `datetime-range-picker` names its two ends — has no
+     * static attribute to write.
+     */
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    element = inject(ElementRef).nativeElement;
+    defaults = injectDateTimeFieldDefaults();
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this field's `messages` laid over them. */
+    t = injectMessages(datetimeFieldMessages, this.messages);
+    field = inject(SlField, { optional: true });
+    /** Read before the host binding computes, so it never writes over it. */
+    writtenLabel = inject(new HostAttributeToken('aria-label'), {
+        optional: true,
+    });
+    writtenId = inject(new HostAttributeToken('id'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    writtenDescribedBy = inject(new HostAttributeToken('aria-describedby'), {
+        optional: true,
+    });
+    valueTextId = `sl-datetime-field-${String((sequence += 1))}`;
+    segments = signal(EMPTY_SEGMENTS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * What datetime it is, resolved after construction rather than during it, so
+     * a server and a browser never disagree about the markup. Nothing is drawn
+     * from it: it is the value an empty segment steps to and a duration resolves
+     * from.
+     */
+    clock = signal({
+        date: { year: 2000, month: 1, day: 1 },
+        time: { hour: 12, minute: 0, second: 0 },
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clock" }] : /* istanbul ignore next */ []));
+    activeField = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeField" }] : /* istanbul ignore next */ []));
+    /** The duration being written, or `null` while the segments are showing. */
+    expression = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expression" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    onTouchedFn = () => undefined;
+    onValidatorChangeFn = () => undefined;
+    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 */ []));
+    format = computed(() => {
+        const firstDayOfWeek = this.firstDayOfWeek() ?? this.defaults.firstDayOfWeek;
+        const yearPivot = this.yearPivot() ?? this.defaults.yearPivot;
+        return createDateTimeFormat({
+            granularity: this.resolvedGranularity(),
+            hourCycle: this.hourCycle() ?? this.defaults.hourCycle,
+            locale: this.locale() ?? this.appLocale(),
+            ...(firstDayOfWeek === undefined ? {} : { firstDayOfWeek }),
+            ...(yearPivot === undefined ? {} : { yearPivot }),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    dataCycle = computed(() => (this.format().usesDayPeriod ? '12' : '24'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataCycle" }] : /* istanbul ignore next */ []));
+    fields = computed(() => this.format()
+        .pattern.filter((part) => part.type !== 'literal')
+        .map((part) => part.type), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    /**
+     * One box per half, and the only place the row is allowed to break.
+     *
+     * Flexbox breaks a line between any two items and offers no way to forbid one
+     * place, so the boundary has to be a box rather than a rule.
+     */
+    halves = computed(() => {
+        const groups = [];
+        for (const part of this.format().pattern) {
+            const owner = part.half ?? 'date';
+            const last = groups[groups.length - 1];
+            if (last !== undefined && last.half === owner)
+                last.parts.push(part);
+            else
+                groups.push({ half: owner, parts: [part] });
+        }
+        return groups;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "halves" }] : /* istanbul ignore next */ []));
+    /** What an empty segment steps from, in the shape the engine reads. */
+    reference = computed(() => {
+        const anchor = this.anchor();
+        const shown = this.format().toDisplay(anchor.time.hour);
+        return {
+            ...anchor.date,
+            dayPeriod: shown.dayPeriod ?? 0,
+            hour: shown.hour,
+            hourCycle: this.format().hourCycle,
+            minute: anchor.time.minute,
+            second: anchor.time.second,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
+    anchor = computed(() => this.referenceDateTime() ?? this.clock(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    /** The value the segments make, or `null` while either half is unfinished. */
+    dateTime = computed(() => dateTimeOf(this.segments(), this.format()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTime" }] : /* istanbul ignore next */ []));
+    /** Which half is still missing, and `null` when none is. */
+    incomplete = computed(() => incompleteHalf(this.segments(), this.format()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "incomplete" }] : /* istanbul ignore next */ []));
+    iso = computed(() => {
+        const value = this.dateTime();
+        return value === null ? '' : toISODateTime(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iso" }] : /* istanbul ignore next */ []));
+    spokenValue = computed(() => {
+        const value = this.dateTime();
+        return value === null ? '' : this.format().describe(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spokenValue" }] : /* istanbul ignore next */ []));
+    /* ── The duration expression ─────────────────────────────────────────── */
+    resolved = computed(() => {
+        const written = this.expression();
+        if (written === null)
+            return null;
+        const seconds = parseDuration(written, { units: DATE_TIME_UNITS });
+        return seconds === null ? null : resolveRelativeDateTime(this.anchor(), seconds);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    /** Whether the expression landed on a different day from the anchor's. */
+    rollsDay = computed(() => {
+        const step = this.resolved();
+        if (step === null)
+            return false;
+        const from = this.anchor().date;
+        return (step.date.year !== from.year || step.date.month !== from.month || step.date.day !== from.day);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rollsDay" }] : /* istanbul ignore next */ []));
+    previewTime = computed(() => {
+        const step = this.resolved();
+        return step === null ? '' : this.format().time.format(step.time);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewTime" }] : /* istanbul ignore next */ []));
+    previewDate = computed(() => {
+        const step = this.resolved();
+        return step === null ? '' : this.format().describeDate(step.date, 'short');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewDate" }] : /* istanbul ignore next */ []));
+    /* ── What the field around it decides ────────────────────────────────── */
+    resolvedSize = computed(() => this.size() ?? this.field?.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 */ []));
+    resolvedDisabled = computed(() => this.disabled() ?? this.formDisabled() ?? this.field?.resolvedDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    resolvedReadOnly = computed(() => this.readOnly() ?? this.field?.resolvedReadOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []));
+    resolvedRequired = computed(() => this.required() ?? this.field?.required(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedRequired" }] : /* istanbul ignore next */ []));
+    /**
+     * Validity the family owns, beside the validity the consumer states.
+     *
+     * Both pairs of bounds apply at once — the whole-value one and the window
+     * that repeats on every day — which is the combination MUI's own validation
+     * page records that it cannot ship.
+     */
+    resolvedInvalid = computed(() => {
+        const value = this.dateTime();
+        if (value !== null && this.refuses(value))
+            return true;
+        return this.invalid() ?? this.field?.invalid();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    controlId = computed(() => this.writtenId ?? this.field?.ids().control ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => {
+        if (this.label() !== undefined || this.writtenLabel !== null)
+            return null;
+        const merged = [this.writtenLabelledBy ?? this.field?.ids().label, this.valueTextId].filter(Boolean);
+        return merged.length === 0 ? null : merged.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const merged = [this.writtenDescribedBy, this.field?.describedBy()].filter(Boolean);
+        return merged.length === 0 ? null : merged.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    ariaInvalid = computed(() => this.resolvedInvalid() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    ariaRequired = computed(() => this.resolvedRequired() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaRequired" }] : /* istanbul ignore next */ []));
+    ariaReadonly = computed(() => this.resolvedReadOnly() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaReadonly" }] : /* istanbul ignore next */ []));
+    ariaDisabled = computed(() => this.resolvedDisabled() === true ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
+    editable = computed(() => this.resolvedDisabled() !== true && this.resolvedReadOnly() !== true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => {
+        if (!this.clearable() || !this.editable() || this.expression() !== null)
+            return false;
+        const held = this.segments();
+        return this.fields().some((name) => held[name] !== null);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /**
+         * A consumer's own value writes the segments, and only when it names a
+         * different value: written on every change detection it would throw away a
+         * half-typed value on the keystroke that completes a different one.
+         */
+        effect(() => {
+            const next = this.value();
+            if (next === undefined)
+                return;
+            const segments = this.segments();
+            /* A run of digits still being typed is not a value the consumer refused:
+               with a controlled `null`, the first minute digit after a whole hour
+               read as a time the consumer had not written back, and the segments
+               were reset under the reader's fingers. Found by `time-range-picker`,
+               which binds the field to its work. */
+            if (segments.typing !== null)
+                return;
+            if (isSameDateTime(dateTimeOf(segments, this.format()), next))
+                return;
+            this.segments.set(segmentsOfDateTime(next, this.format()));
+        });
+        /* The expression region is focused the moment it replaces the segments,
+           with the caret after the character that opened it. */
+        effect(() => {
+            if (this.expression() === null)
+                return;
+            queueMicrotask(() => {
+                const input = this.element.querySelector('[data-part="duration"]');
+                if (input === null)
+                    return;
+                input.focus();
+                input.setSelectionRange(input.value.length, input.value.length);
+            });
+        });
+    }
+    ngOnInit() {
+        this.segments.set(segmentsOfDateTime(this.value() ?? this.defaultValue() ?? null, this.format()));
+        this.clock.set(nowDateTimeIn(this.timeZone() ?? this.defaults.timeZone));
+    }
+    /* ── The value ───────────────────────────────────────────────────────── */
+    writeValue(value) {
+        this.segments.set(segmentsOfDateTime(value ?? null, this.format()));
+    }
+    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, and one no surveyed implementation
+     * reports at all.
+     *
+     * `dateTimeIncomplete` is that one: a reader who wrote a day and left is not
+     * an empty control, and a form that says "required" there is answering a
+     * different question. `required` itself is left to Angular's own, because a
+     * form already has a word for it and two would disagree.
+     */
+    validate(control) {
+        const value = control.value;
+        if (value === null || value === undefined) {
+            const half = this.incomplete();
+            return half === null ? null : { slottedDateTimeIncomplete: { missing: half } };
+        }
+        const min = this.min();
+        const max = this.max();
+        if (!isDateTimeInRange(value, min, max)) {
+            return { slottedDateTimeRange: { min, max, actual: value } };
+        }
+        const window = dayWindow(value.date, {
+            max,
+            maxTime: this.maxTime(),
+            min,
+            minTime: this.minTime(),
+        });
+        if (window === null || !isTimeInRange(value.time, window.earliest, window.latest)) {
+            return { slottedDateTimeWindow: { actual: value } };
+        }
+        if (this.isDateUnavailable()?.(value.date) === true ||
+            this.isTimeUnavailable()?.(value.time, value.date) === true) {
+            return { slottedDateTimeUnavailable: { actual: value } };
+        }
+        return null;
+    }
+    /** Puts focus on the first segment, which is where typing starts. */
+    focus() {
+        const first = this.fields()[0];
+        if (first !== undefined)
+            this.focusField(first);
+    }
+    /**
+     * Where a press on the frame puts the reader: the first field still waiting
+     * for a value, and the first field of the value when none is.
+     */
+    focusEntry() {
+        const held = this.segments();
+        const empty = this.fields().find((name) => held[name] === null);
+        const target = empty ?? this.fields()[0];
+        if (target !== undefined)
+            this.focusField(target);
+    }
+    onRootMouseDown(event) {
+        const target = event.target;
+        if (target?.closest('[data-part="segment"], button, a, input, select, textarea') != null) {
+            return;
+        }
+        event.preventDefault();
+        if (this.expression() === null)
+            this.focusEntry();
+    }
+    /**
+     * Safari does not focus a `div` on a press even when it carries a
+     * `tabindex`, so the press says so itself rather than relying on it.
+     */
+    onSegmentMouseDown(event) {
+        event.preventDefault();
+        event.currentTarget.focus();
+    }
+    /** Empties both halves at once, with the `clear` reason. */
+    clear(source) {
+        this.commit(EMPTY_SEGMENTS, 'clear', source);
+        this.focus();
+    }
+    /* ── The keyboard ────────────────────────────────────────────────────── */
+    /**
+     * A key the field acted on is the field's, and nothing above it sees it. A
+     * `div` with `role="spinbutton"` is invisible to every "is the target
+     * editable" guard an application writes, and `preventDefault` alone does not
+     * help: a shortcut handler reads the key, not the default.
+     */
+    consume(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * The keys are handled on the host rather than on each segment, so a
+     * consumer's own `(keydown)` on the same element still runs before the family
+     * stops the event — which is the composition React gets by calling the
+     * consumer's handler first.
+     */
+    onKeyDown(event) {
+        const segment = event.target?.closest('[data-part="segment"]');
+        const name = segment?.dataset['field'];
+        if (name === undefined)
+            return;
+        /* An inline direction is a physical pair of keys and a logical order, so
+           the arrow that walks forward is the one pointing along the writing
+           direction rather than the one pointing right. It walks the whole row,
+           across the boundary between the halves. */
+        const rtl = getComputedStyle(this.element).direction === 'rtl';
+        const forward = rtl ? 'ArrowLeft' : 'ArrowRight';
+        const backward = rtl ? 'ArrowRight' : 'ArrowLeft';
+        if (event.key === forward) {
+            this.consume(event);
+            this.moveBy(name, 1);
+            return;
+        }
+        if (event.key === backward) {
+            this.consume(event);
+            this.moveBy(name, -1);
+            return;
+        }
+        if (!this.editable())
+            return;
+        /**
+         * `Alt` with an arrow is not this control's chord. `datetime-picker` opens
+         * its panel with `Alt`+`ArrowDown`, and a segment that stepped on it would
+         * eat the only shortcut the surface has.
+         */
+        if (event.altKey)
+            return;
+        if ((this.relative() ?? this.defaults.relative) && isRelativeKey(event.key)) {
+            this.consume(event);
+            this.expression.set(event.key);
+            return;
+        }
+        const held = this.segments();
+        const reference = this.reference();
+        switch (event.key) {
+            case 'ArrowUp':
+                this.consume(event);
+                this.commit(stepSegment(held, name, 1, reference), 'keyboard', event);
+                return;
+            case 'ArrowDown':
+                this.consume(event);
+                this.commit(stepSegment(held, name, -1, reference), 'keyboard', event);
+                return;
+            case 'PageUp':
+                this.consume(event);
+                this.commit(stepSegment(held, name, PAGE_STEP[name], reference), 'keyboard', event);
+                return;
+            case 'PageDown':
+                this.consume(event);
+                this.commit(stepSegment(held, name, -PAGE_STEP[name], reference), 'keyboard', event);
+                return;
+            case 'Home':
+                this.consume(event);
+                this.commit(boundSegment(held, name, 'min', reference), 'keyboard', event);
+                return;
+            case 'End':
+                this.consume(event);
+                this.commit(boundSegment(held, name, 'max', reference), 'keyboard', event);
+                return;
+            case 'Backspace':
+            case 'Delete':
+                this.consume(event);
+                this.commit(clearSegment(held, name), 'clear', event);
+                return;
+            default:
+                break;
+        }
+        /* The day period holds two words rather than digits, and the platform's own
+           control takes it by the first letter of either. */
+        if (name === 'dayPeriod' && /^\p{L}$/u.test(event.key)) {
+            const typed = typeDayPeriod(held, event.key, this.format().time);
+            if (typed === null)
+                return;
+            this.consume(event);
+            this.commit(typed.segments, 'keyboard', event);
+            if (typed.advance)
+                this.moveBy(name, 1);
+            return;
+        }
+        if (/^\d$/.test(event.key)) {
+            this.consume(event);
+            const typed = typeDigit(held, name, Number(event.key), this.format().time, reference);
+            this.commit(typed.segments, 'keyboard', event);
+            if (typed.advance)
+                this.moveBy(name, 1);
+        }
+    }
+    onExpressionInput(event) {
+        this.expression.set(event.target.value);
+    }
+    onExpressionKeyDown(event) {
+        if (event.key === 'Enter') {
+            /* An expression inside a form must not submit it: `Enter` is this
+               control's commit and nothing above it needs to hear the key. */
+            this.consume(event);
+            this.commitExpression(event);
+            this.focus();
+            return;
+        }
+        if (event.key === 'Escape') {
+            /* Abandoned whole, and the segments come back exactly as they were. The
+               key is stopped so an overlay above does not close on the same press —
+               the field takes it first while an expression is open, which is the
+               staging `datetime-picker` depends on. */
+            this.consume(event);
+            this.expression.set(null);
+            this.focus();
+        }
+    }
+    /** Commits the expression when it resolves, and abandons it when it does not. */
+    commitExpression(source) {
+        const step = this.resolved();
+        if (step === null) {
+            this.expression.set(null);
+            return;
+        }
+        this.commit(segmentsOfDateTime(step, this.format()), 'keyboard', source);
+        this.expression.set(null);
+    }
+    /**
+     * A whole value, pasted. The locale's shape is read first and ISO 8601 after
+     * it; text that is neither but reads as a duration opens the expression, so
+     * pasting `+2d` does what typing it does.
+     */
+    onPaste(event) {
+        if (!this.editable())
+            return;
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        const parsed = this.format().parse(text);
+        if (parsed !== null) {
+            event.preventDefault();
+            this.commit(segmentsOfDateTime(parsed, this.format()), 'keyboard', event);
+            return;
+        }
+        if ((this.relative() ?? this.defaults.relative) &&
+            parseDuration(text, { units: DATE_TIME_UNITS }) !== null) {
+            event.preventDefault();
+            this.expression.set(text.trim());
+        }
+    }
+    /** A run of typed digits ends when focus leaves. */
+    onBlur() {
+        this.activeField.set(undefined);
+        this.onTouchedFn();
+        const held = this.segments();
+        if (held.typing === null)
+            return;
+        this.commit(commitTyping(held, this.format().time, this.reference()), 'blur', undefined);
+    }
+    /* ── What the template reads ─────────────────────────────────────────── */
+    halfOf(field) {
+        return halfOfField(field);
+    }
+    valueOf(field) {
+        return this.segments()[field];
+    }
+    /**
+     * The day's own maximum is the month's, which is why the range is asked with
+     * the year and the month rather than assumed to be 31.
+     */
+    rangeOf(field) {
+        const held = this.segments();
+        return fieldRange(field, {
+            hourCycle: this.format().hourCycle,
+            ...(held.month === null ? {} : { month: held.month }),
+            ...(held.year === null ? {} : { year: held.year }),
+        });
+    }
+    /**
+     * What a reader hears instead of the number. The day period is why it is not
+     * optional: `aria-valuenow` there is `0` or `1`, which is not a name in any
+     * language — and a month reads better as its own name than as a number.
+     */
+    spokenOf(field) {
+        const raw = this.segments()[field];
+        if (raw === null)
+            return null;
+        if (field === 'dayPeriod')
+            return this.format().dayPeriodNames()[raw === 1 ? 1 : 0];
+        if (field === 'month')
+            return this.format().date.monthNames('long')[raw - 1] ?? String(raw);
+        return String(raw);
+    }
+    /**
+     * What one field shows. A finished value is padded to the field's width so
+     * the columns hold their place; a value still being typed is not, because a
+     * padded run shows numbers nobody typed.
+     */
+    textOf(field) {
+        const held = this.segments();
+        const raw = held[field];
+        if (raw === null) {
+            return this.format().pattern.find((part) => part.type === field)?.value ?? '';
+        }
+        const typing = held.typing;
+        if (typing !== null && typing.field === field) {
+            return String(raw).padStart(typing.digits, '0');
+        }
+        return this.format().formatValue(raw, field);
+    }
+    /** Exactly one segment is in the tab sequence, which is the roving model. */
+    tabIndexOf(field) {
+        if (this.resolvedDisabled() === true)
+            return -1;
+        return field === (this.activeField() ?? this.fields()[0]) ? 0 : -1;
+    }
+    /* ── The machinery ───────────────────────────────────────────────────── */
+    /** Whether both pairs of bounds, or either predicate, refuse a whole value. */
+    refuses(value) {
+        const min = this.min();
+        const max = this.max();
+        if (!isDateTimeInRange(value, min, max))
+            return true;
+        const window = dayWindow(value.date, {
+            max,
+            maxTime: this.maxTime(),
+            min,
+            minTime: this.minTime(),
+        });
+        if (window === null || !isTimeInRange(value.time, window.earliest, window.latest))
+            return true;
+        return (this.isDateUnavailable()?.(value.date) === true ||
+            this.isTimeUnavailable()?.(value.time, value.date) === true);
+    }
+    focusField(name) {
+        this.activeField.set(name);
+        this.element.querySelector(`[data-part="segment"][data-field="${name}"]`)?.focus();
+    }
+    moveBy(name, step) {
+        const next = this.fields()[this.fields().indexOf(name) + step];
+        if (next !== undefined)
+            this.focusField(next);
+    }
+    /**
+     * Moves the segments, and asks before the derived value moves with them.
+     *
+     * A run of typed digits moves the display and not the value: typing `23` into
+     * an hour passes through `2` on the way, and `2` is a time the arithmetic
+     * accepts and nobody meant. The request is emitted when the run ends.
+     */
+    commit(next, reason, source) {
+        const previous = this.dateTime();
+        this.segments.set(next);
+        if (next.typing !== null)
+            return;
+        const nextValue = dateTimeOf(next, this.format());
+        let cancelled = false;
+        const state = createControllable({
+            controlled: undefined,
+            initial: previous,
+            equals: isSameDateTime,
+            onRequest: (request) => {
+                this.valueChange.emit({
+                    ...request,
+                    incomplete: incompleteHalf(next, this.format()),
+                    segments: next,
+                });
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(nextValue, reason, source);
+        if (cancelled)
+            return;
+        this.onChangeFn(nextValue);
+        this.onValidatorChangeFn();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDateTimeField, isStandalone: true, selector: "[slDateTimeField]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", 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 }, 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 }, 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "data-ui": "datetime-field", "data-part": "root" }, listeners: { "mousedown": "onRootMouseDown($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-calendar": "resolvedCalendar()", "attr.data-cycle": "dataCycle()", "attr.data-granularity": "resolvedGranularity()", "attr.data-incomplete": "incomplete()", "attr.data-relative": "expression() === null ? 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(() => SlDateTimeField), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimeField), multi: true },
+        ], exportAs: ["slDateTimeField"], ngImport: i0, template: `<ng-content select="[slDateTimeFieldStart]" />
+    @if (expression() !== null) {
+      <input
+        #duration
+        data-part="duration"
+        type="text"
+        placeholder="+40m, 1h30, +2d"
+        [attr.aria-label]="t('duration')"
+        [attr.aria-describedby]="describedBy()"
+        [value]="expression()"
+        (input)="onExpressionInput($event)"
+        (keydown)="onExpressionKeyDown($event)"
+        (blur)="commitExpression()"
+      />
+      <span
+        data-part="preview"
+        role="status"
+        aria-live="polite"
+        [attr.data-resolved]="resolved() === null ? null : ''"
+        [attr.data-rolls-day]="rollsDay() ? '' : null"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+        @if (rollsDay()) {
+          <span data-part="preview-date">{{ previewDate() }}</span
+          >, {{ previewTime() }}
+        } @else {
+          {{ previewTime() }}
+        }
+      </span>
+    } @else {
+      <div
+        data-part="segments"
+        role="group"
+        [attr.id]="controlId()"
+        [attr.aria-label]="label() ?? writtenLabel"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-invalid]="ariaInvalid()"
+        [attr.aria-required]="ariaRequired()"
+        [attr.aria-readonly]="ariaReadonly()"
+        [attr.aria-disabled]="ariaDisabled()"
+        (paste)="onPaste($event)"
+      >
+        @for (group of halves(); track group.half) {
+          <span data-part="half" [attr.data-half]="group.half">
+            @for (part of group.parts; track $index) {
+              @if (part.type === 'literal') {
+                @if (part.boundary !== true || part.drawn !== false) {
+                  <span
+                    data-part="literal"
+                    aria-hidden="true"
+                    [attr.data-boundary]="part.boundary === true ? '' : null"
+                    >{{ part.value }}</span
+                  >
+                }
+              } @else {
+                <div
+                  data-part="segment"
+                  role="spinbutton"
+                  [attr.data-field]="part.type"
+                  [attr.data-half]="halfOf(part.type)"
+                  [attr.data-placeholder]="valueOf(part.type) === null ? '' : null"
+                  [attr.aria-label]="part.value"
+                  [attr.aria-valuenow]="valueOf(part.type)"
+                  [attr.aria-valuemin]="rangeOf(part.type).min"
+                  [attr.aria-valuemax]="rangeOf(part.type).max"
+                  [attr.aria-valuetext]="spokenOf(part.type)"
+                  [attr.aria-disabled]="ariaDisabled()"
+                  [attr.aria-readonly]="ariaReadonly()"
+                  [tabindex]="tabIndexOf(part.type)"
+                  (mousedown)="onSegmentMouseDown($event)"
+                  (focus)="activeField.set(part.type)"
+                  (blur)="onBlur()"
+                >
+                  {{ textOf(part.type) }}
+                </div>
+              }
+            }
+          </span>
+        }
+      </div>
+    }
+    <span data-part="value-text" hidden [attr.id]="valueTextId">{{ spokenValue() }}</span>
+    @if (showClear()) {
+      <button
+        data-part="clear"
+        type="button"
+        [attr.aria-label]="t('clear')"
+        (click)="clear($event)"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    }
+    <ng-content select="[slDateTimeFieldEnd]" />
+    <input data-part="hidden-input" type="hidden" readonly [attr.name]="name()" [value]="iso()" />`, isInline: true, styles: ["@layer slotted.components{[data-ui=datetime-field][data-part=root]{--_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-floor: var(--slotted-datetime-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_half-gap: var(--slotted-datetime-field-half-gap, var(--slotted-space-3, .375rem));--_action-size: var( --slotted-datetime-field-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );align-items:center;background-color:var( --slotted-datetime-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-datetime-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);padding-block:var(--slotted-datetime-field-padding-block, var(--slotted-space-1, .125rem));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-field][data-part=root]:has(>[data-part=clear]:last-child){padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2))}[data-ui=datetime-field] [data-part=segments]{align-items:center;column-gap:var(--_half-gap);cursor:text;display:flex;flex:1 1 auto;min-inline-size:0;overflow:hidden}[data-ui=datetime-field] [data-part=half]{align-items:center;direction:ltr;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=segments]:dir(rtl){justify-content:flex-end}[data-ui=datetime-field] [data-part=segment]{--_digits: 2;background-color:transparent;border-radius:var(--slotted-datetime-field-segment-radius, var(--slotted-radius-xs, 2px));box-sizing:content-box;caret-color:transparent;color:inherit;cursor:text;font:inherit;flex:0 0 auto;min-inline-size:var( --slotted-datetime-field-segment-min-inline-size, calc(var(--_digits) * 1ch) );padding-inline:var( --slotted-datetime-field-segment-padding-inline, var(--slotted-space-1, .125rem) );text-align:center;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-field] [data-part=segment][data-field=year]{--_digits: 4}[data-ui=datetime-field] [data-part=segment][data-field=dayPeriod]{font-variant-numeric:normal;min-inline-size:var(--slotted-datetime-field-period-min-inline-size, 2ch);text-transform:none;white-space:nowrap}[data-ui=datetime-field] [data-part=segment][data-placeholder]{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=literal]{color:var(--slotted-datetime-field-literal-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;unicode-bidi:plaintext;-webkit-user-select:none;user-select:none}[data-ui=datetime-field] [data-part=literal][data-boundary]{margin-inline-end:0}[data-ui=datetime-field] [data-part=duration]{appearance:none;background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;min-inline-size:0;outline:none;padding:0;direction:ltr;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=duration]:dir(rtl){text-align:right}[data-ui=datetime-field] [data-part=duration]::placeholder{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=preview]{--_mark: 1cap;color:var(--slotted-datetime-field-preview-color, var(--slotted-tone-accent-text));display:block;flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:plaintext}[data-ui=datetime-field] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: var(--_mark);margin-inline:var(--slotted-space-1, .125rem);vertical-align:calc((((1cap + 1ex) / 2) - var(--_mark)) / 2)}[data-ui=datetime-field] [data-part=preview][data-rolls-day]>[data-part=preview-date]{color:var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=datetime-field][data-part=root][data-relative]{border-color:var( --slotted-datetime-field-relative-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui=datetime-field][data-part=root][data-size=md]{--_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: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px))}[data-ui=datetime-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui=datetime-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-datetime-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=datetime-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui=datetime-field]>[data-part=start],[data-ui=datetime-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-datetime-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=datetime-field]>[data-part=start]>svg,[data-ui=datetime-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-field]>[data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-field]>[data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=datetime-field]>[data-part=end]+[data-part=clear]:after{inset-inline-start:0}}[data-ui=datetime-field]>[data-part=clear]{--slotted-icon-size: var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field]>[data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-field]>[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-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-incomplete]){border-color:var( --slotted-datetime-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=datetime-field][data-part=root][data-incomplete]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:focus-within){border-color:var( --slotted-datetime-field-incomplete-border-color, var(--slotted-tone-warning-border) )}[data-ui=datetime-field][data-part=root]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root]:has([data-part=duration]:focus){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-field][data-part=root][data-variant=plain]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain]:has([data-part=duration]:focus){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-field] [data-part=segment]:focus{background-color:var( --slotted-datetime-field-segment-focus-background, var(--slotted-tone-accent-solid) );color:var(--slotted-datetime-field-segment-focus-color, var(--slotted-tone-accent-on-solid));outline:none}[data-ui=datetime-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-field-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-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){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-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){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-field][data-part=root][data-readonly],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segments],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segment]{cursor:default}[data-ui=datetime-field][data-part=root][data-readonly]{background-color:var( --slotted-datetime-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-disabled]{background-color:var( --slotted-datetime-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segments],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment]{cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=start],[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=end],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=literal],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment][data-placeholder]{color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}[data-ui=datetime-field][data-part=root][data-relative]{border-color:Highlight}}}\n"], dependencies: [{ 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: SlDateTimeField, decorators: [{
+            type: Component,
+            args: [{ selector: '[slDateTimeField]', standalone: true, exportAs: 'slDateTimeField', imports: [SlGlyph, SlIcon], template: `<ng-content select="[slDateTimeFieldStart]" />
+    @if (expression() !== null) {
+      <input
+        #duration
+        data-part="duration"
+        type="text"
+        placeholder="+40m, 1h30, +2d"
+        [attr.aria-label]="t('duration')"
+        [attr.aria-describedby]="describedBy()"
+        [value]="expression()"
+        (input)="onExpressionInput($event)"
+        (keydown)="onExpressionKeyDown($event)"
+        (blur)="commitExpression()"
+      />
+      <span
+        data-part="preview"
+        role="status"
+        aria-live="polite"
+        [attr.data-resolved]="resolved() === null ? null : ''"
+        [attr.data-rolls-day]="rollsDay() ? '' : null"
+      >
+        <span slIcon directional><svg slGlyph name="chevron-right"></svg></span>
+        @if (rollsDay()) {
+          <span data-part="preview-date">{{ previewDate() }}</span
+          >, {{ previewTime() }}
+        } @else {
+          {{ previewTime() }}
+        }
+      </span>
+    } @else {
+      <div
+        data-part="segments"
+        role="group"
+        [attr.id]="controlId()"
+        [attr.aria-label]="label() ?? writtenLabel"
+        [attr.aria-labelledby]="labelledBy()"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-invalid]="ariaInvalid()"
+        [attr.aria-required]="ariaRequired()"
+        [attr.aria-readonly]="ariaReadonly()"
+        [attr.aria-disabled]="ariaDisabled()"
+        (paste)="onPaste($event)"
+      >
+        @for (group of halves(); track group.half) {
+          <span data-part="half" [attr.data-half]="group.half">
+            @for (part of group.parts; track $index) {
+              @if (part.type === 'literal') {
+                @if (part.boundary !== true || part.drawn !== false) {
+                  <span
+                    data-part="literal"
+                    aria-hidden="true"
+                    [attr.data-boundary]="part.boundary === true ? '' : null"
+                    >{{ part.value }}</span
+                  >
+                }
+              } @else {
+                <div
+                  data-part="segment"
+                  role="spinbutton"
+                  [attr.data-field]="part.type"
+                  [attr.data-half]="halfOf(part.type)"
+                  [attr.data-placeholder]="valueOf(part.type) === null ? '' : null"
+                  [attr.aria-label]="part.value"
+                  [attr.aria-valuenow]="valueOf(part.type)"
+                  [attr.aria-valuemin]="rangeOf(part.type).min"
+                  [attr.aria-valuemax]="rangeOf(part.type).max"
+                  [attr.aria-valuetext]="spokenOf(part.type)"
+                  [attr.aria-disabled]="ariaDisabled()"
+                  [attr.aria-readonly]="ariaReadonly()"
+                  [tabindex]="tabIndexOf(part.type)"
+                  (mousedown)="onSegmentMouseDown($event)"
+                  (focus)="activeField.set(part.type)"
+                  (blur)="onBlur()"
+                >
+                  {{ textOf(part.type) }}
+                </div>
+              }
+            }
+          </span>
+        }
+      </div>
+    }
+    <span data-part="value-text" hidden [attr.id]="valueTextId">{{ spokenValue() }}</span>
+    @if (showClear()) {
+      <button
+        data-part="clear"
+        type="button"
+        [attr.aria-label]="t('clear')"
+        (click)="clear($event)"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    }
+    <ng-content select="[slDateTimeFieldEnd]" />
+    <input data-part="hidden-input" type="hidden" readonly [attr.name]="name()" [value]="iso()" />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDateTimeField), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateTimeField), multi: true },
+                    ], host: {
+                        'data-ui': 'datetime-field',
+                        'data-part': 'root',
+                        '(mousedown)': 'onRootMouseDown($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-calendar]': 'resolvedCalendar()',
+                        '[attr.data-cycle]': 'dataCycle()',
+                        '[attr.data-granularity]': 'resolvedGranularity()',
+                        '[attr.data-incomplete]': 'incomplete()',
+                        '[attr.data-relative]': "expression() === null ? 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-field][data-part=root]{--_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-floor: var(--slotted-datetime-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_half-gap: var(--slotted-datetime-field-half-gap, var(--slotted-space-3, .375rem));--_action-size: var( --slotted-datetime-field-action-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );align-items:center;background-color:var( --slotted-datetime-field-background, var(--slotted-control-surface, Field) );border:var(--slotted-control-border-width, 1px) solid var(--slotted-datetime-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-datetime-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-datetime-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);padding-block:var(--slotted-datetime-field-padding-block, var(--slotted-space-1, .125rem));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-field][data-part=root]:has(>[data-part=clear]:last-child){padding-inline-end:max(0px,calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2))}[data-ui=datetime-field] [data-part=segments]{align-items:center;column-gap:var(--_half-gap);cursor:text;display:flex;flex:1 1 auto;min-inline-size:0;overflow:hidden}[data-ui=datetime-field] [data-part=half]{align-items:center;direction:ltr;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=segments]:dir(rtl){justify-content:flex-end}[data-ui=datetime-field] [data-part=segment]{--_digits: 2;background-color:transparent;border-radius:var(--slotted-datetime-field-segment-radius, var(--slotted-radius-xs, 2px));box-sizing:content-box;caret-color:transparent;color:inherit;cursor:text;font:inherit;flex:0 0 auto;min-inline-size:var( --slotted-datetime-field-segment-min-inline-size, calc(var(--_digits) * 1ch) );padding-inline:var( --slotted-datetime-field-segment-padding-inline, var(--slotted-space-1, .125rem) );text-align:center;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-field] [data-part=segment][data-field=year]{--_digits: 4}[data-ui=datetime-field] [data-part=segment][data-field=dayPeriod]{font-variant-numeric:normal;min-inline-size:var(--slotted-datetime-field-period-min-inline-size, 2ch);text-transform:none;white-space:nowrap}[data-ui=datetime-field] [data-part=segment][data-placeholder]{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=literal]{color:var(--slotted-datetime-field-literal-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;unicode-bidi:plaintext;-webkit-user-select:none;user-select:none}[data-ui=datetime-field] [data-part=literal][data-boundary]{margin-inline-end:0}[data-ui=datetime-field] [data-part=duration]{appearance:none;background-color:transparent;border:0;color:inherit;flex:1 1 auto;font:inherit;font-variant-numeric:tabular-nums;min-inline-size:0;outline:none;padding:0;direction:ltr;unicode-bidi:isolate}[data-ui=datetime-field] [data-part=duration]:dir(rtl){text-align:right}[data-ui=datetime-field] [data-part=duration]::placeholder{color:var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText))}[data-ui=datetime-field] [data-part=preview]{--_mark: 1cap;color:var(--slotted-datetime-field-preview-color, var(--slotted-tone-accent-text));display:block;flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap;unicode-bidi:plaintext}[data-ui=datetime-field] [data-part=preview]>[data-ui=icon]{--slotted-icon-size: var(--_mark);margin-inline:var(--slotted-space-1, .125rem);vertical-align:calc((((1cap + 1ex) / 2) - var(--_mark)) / 2)}[data-ui=datetime-field] [data-part=preview][data-rolls-day]>[data-part=preview-date]{color:var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-semibold, 600)}[data-ui=datetime-field][data-part=root][data-relative]{border-color:var( --slotted-datetime-field-relative-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px))}[data-ui=datetime-field][data-part=root][data-size=md]{--_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: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px))}[data-ui=datetime-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px))}[data-ui=datetime-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-datetime-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-datetime-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=datetime-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}[data-ui=datetime-field]>[data-part=start],[data-ui=datetime-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-datetime-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=datetime-field]>[data-part=start]>svg,[data-ui=datetime-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--slotted-datetime-field-radius, var(--slotted-control-radius, 4px));color:var(--slotted-datetime-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var(--_action-size);justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=datetime-field]>[data-part=clear]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=datetime-field]>[data-part=clear]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=datetime-field]>[data-part=end]+[data-part=clear]:after{inset-inline-start:0}}[data-ui=datetime-field]>[data-part=clear]{--slotted-icon-size: var(--_icon-size)}[data-ui=datetime-field]>[data-part=clear]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field]>[data-part=clear]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-datetime-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=datetime-field]>[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-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-incomplete]){border-color:var( --slotted-datetime-field-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=datetime-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-datetime-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=datetime-field][data-part=root][data-incomplete]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:focus-within){border-color:var( --slotted-datetime-field-incomplete-border-color, var(--slotted-tone-warning-border) )}[data-ui=datetime-field][data-part=root]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root]:has([data-part=duration]:focus){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-field][data-part=root][data-variant=plain]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain]:has([data-part=duration]:focus){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=datetime-field] [data-part=segment]:focus{background-color:var( --slotted-datetime-field-segment-focus-background, var(--slotted-tone-accent-solid) );color:var(--slotted-datetime-field-segment-focus-color, var(--slotted-tone-accent-on-solid));outline:none}[data-ui=datetime-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-datetime-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-datetime-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-datetime-field-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-field-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-invalid]:has([data-part=duration]:focus){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-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=segment]:focus),[data-ui=datetime-field][data-part=root][data-variant=plain][data-invalid]:has([data-part=duration]:focus){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-field][data-part=root][data-readonly],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segments],[data-ui=datetime-field][data-part=root][data-readonly] [data-part=segment]{cursor:default}[data-ui=datetime-field][data-part=root][data-readonly]{background-color:var( --slotted-datetime-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=datetime-field][data-part=root][data-disabled]{background-color:var( --slotted-datetime-field-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-datetime-field-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-datetime-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segments],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment]{cursor:not-allowed}[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=start],[data-ui=datetime-field][data-part=root][data-disabled]>[data-part=end],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=literal],[data-ui=datetime-field][data-part=root][data-disabled] [data-part=segment][data-placeholder]{color:var(--slotted-disabled-foreground)}@media(forced-colors:active){[data-ui=datetime-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}[data-ui=datetime-field][data-part=root][data-relative]{border-color:Highlight}}}\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 }] }], 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 }] }], 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 }] }], 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * An adornment before the value in the reading direction: a calendar mark, a
+ * label, a zone name. Named for the direction rather than for a side, so the
+ * same markup puts the mark before the value in both directions.
+ *
+ * It is a directive on the consumer's own element, so an `icon`, a `kbd` or a
+ * `span` all work and none of them loses its own semantics. The stylesheet
+ * sizes any icon inside it from the control's own glyph scale.
+ */
+class SlDateTimeFieldStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeFieldStart, isStandalone: true, selector: "[slDateTimeFieldStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slDateTimeFieldStart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimeFieldStart]',
+                    standalone: true,
+                    exportAs: 'slDateTimeFieldStart',
+                    host: { 'data-part': 'start' },
+                }]
+        }] });
+/** An adornment after the value in the reading direction. */
+class SlDateTimeFieldEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateTimeFieldEnd, isStandalone: true, selector: "[slDateTimeFieldEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slDateTimeFieldEnd"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateTimeFieldEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateTimeFieldEnd]',
+                    standalone: true,
+                    exportAs: 'slDateTimeFieldEnd',
+                    host: { 'data-part': 'end' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATE_TIME_FIELD_DEFAULTS, SlDateTimeField, SlDateTimeFieldEnd, SlDateTimeFieldStart, injectDateTimeFieldDefaults, provideDateTimeFieldDefaults };
+//# sourceMappingURL=slotted-angular-datetime-field.mjs.map