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

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

@@ -0,0 +1,1150 @@
+import { compareDate, rangeProblems, blockedAround, isDateRefusedInRun, orderedRun, isSameDate, rangeLength, createDateFormat } from '@slotted/core/date';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { tabbables } from '@slotted/core/focus';
+import { createPositioner } from '@slotted/core/positioner';
+import { createControllable } from '@slotted/core/state';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, numberAttribute, output, ElementRef, Injector, DestroyRef, signal, computed, effect, afterNextRender, forwardRef, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { dateRangePickerMessages } from '@slotted/core/i18n';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { isSameValue, SlCalendar } from '@slotted/angular/calendar';
+import { SlDateField } from '@slotted/angular/date-field';
+import { SlField } from '@slotted/angular/field';
+
+const FALLBACK = {
+    calendar: 'gregory',
+    closeOnSelect: 'auto',
+    count: 'days',
+    months: 2,
+    placement: 'bottom-start',
+    size: 'md',
+    timeZone: undefined,
+    variant: 'outline',
+};
+const DATE_RANGE_PICKER_DEFAULTS = new InjectionToken('slotted date range picker defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once what a run counts, which zone answers "today"
+ * and how many months it shows — rather than repeating the same inputs on every
+ * picker in a form. The locale that writes its dates and every word it says
+ * come from the language in force (`provideSlotted`).
+ */
+function provideDateRangePickerDefaults(defaults) {
+    return {
+        provide: DATE_RANGE_PICKER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a range picker renders as here, before it states anything of its own. */
+function injectDateRangePickerDefaults() {
+    return inject(DATE_RANGE_PICKER_DEFAULTS);
+}
+
+/**
+ * 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)';
+/** How far `contiguous` looks for an unavailable day when no `maxLength` bounds it. */
+const CONTIGUOUS_SEARCH = 366;
+/** The surface needs an identifier the trigger can point `aria-controls` at. */
+let sequence = 0;
+/** 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;
+}
+/**
+ * Two date fields in one frame, a trigger, and `calendar` in range mode behind
+ * them.
+ *
+ * **It composes the three and redraws none of them.** The two fields keep their
+ * `data-ui` and so does the calendar; this family owns the frame, the trigger,
+ * the layer, and the band that says what the reader has so far.
+ *
+ * **The band says how long the run is while it is being drawn.** The calendar
+ * reports the pending end — the day under the pointer, or the focused day —
+ * and `length` says "4 nights" for it, in a live region.
+ *
+ * **A press that leaves the run with one end is a draft, not the value.** The
+ * second press emits the whole run; `Escape`, an outside press and the trigger
+ * abandon the draft and the previous value stands.
+ */
+class SlDateRangePicker {
+    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 */ []));
+    min = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    isDateUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateUnavailable" }] : /* 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 unavailable too, and a typed
+     * run that crosses one is invalid; off, the run may jump over it and only
+     * its two ends are checked.
+     */
+    contiguous = input(true, { ...(ngDevMode ? { debugName: "contiguous" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The shortest and longest run allowed, in the unit `count` names. */
+    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) });
+    count = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* 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. Writes both fields, the grid and the trigger's dates. Unset, the language in force decides. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    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) });
+    calendar = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendar" }] : /* 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 });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * trigger's two names, the clear, the names of the two ends, and the
+     * phrases that count the run (`days.length`, `nights.between`, …).
+     */
+    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();
+    layer;
+    triggerRef;
+    startField;
+    endField;
+    calendarRef;
+    element = inject(ElementRef).nativeElement;
+    defaults = injectDateRangePickerDefaults();
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this picker's `messages` laid over them. */
+    t = injectMessages(dateRangePickerMessages, this.messages);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    /**
+     * The field around it. Inside one, the frame takes the field's control
+     * identifier and its label, and the two ends inside it keep their own
+     * names: two date fields each taking the field's identifier wrote it twice
+     * and left the label naming neither.
+     */
+    enclosing = inject(SlField, { optional: true });
+    contentId = `sl-date-range-picker-${String((sequence += 1))}`;
+    ownOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownOpen" }] : /* istanbul ignore next */ []));
+    ownValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownValue" }] : /* istanbul ignore next */ []));
+    ownPosition = signal('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownPosition" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    view = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    positioned = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
+    sheet = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
+    /**
+     * The start the reader pressed in the grid while the run is still open. It
+     * is not the value: a half-drawn run never reaches a form without the reader
+     * having seen it in the field.
+     */
+    draft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* 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 */ []));
+    /** A pointer press before focus names the reason a field became current. */
+    pointerFocus = false;
+    /**
+     * Whether the next opening moves focus into the calendar. Set by the trigger
+     * and by `openSurface()`; the chord leaves focus in the field so typing keeps
+     * working, and a first render that starts open leaves focus where the page
+     * put it.
+     */
+    focusOnOpen = false;
+    positioner = null;
+    dismissable = null;
+    onChangeFn = () => undefined;
+    /** Whether a form model holds the value, and answers a reset through `writeValue`. */
+    formBound = false;
+    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 */ []));
+    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 */ []));
+    ordered = computed(() => {
+        const start = this.start();
+        const end = this.end();
+        return start !== null && end !== null && compareDate(start, end) <= 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ordered" }] : /* istanbul ignore next */ []));
+    reversed = computed(() => this.problems().includes('order'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reversed" }] : /* 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 */ []));
+    resolvedCalendar = computed(() => this.calendar() ?? this.defaults.calendar, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCalendar" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.enclosing?.resolvedSize() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedPlacement = computed(() => this.placement() ?? this.defaults.placement, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : /* istanbul ignore next */ []));
+    resolvedCount = computed(() => this.count() ?? this.defaults.count, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCount" }] : /* istanbul ignore next */ []));
+    resolvedMonths = computed(() => this.months() ?? this.defaults.months, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMonths" }] : /* 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 */ []));
+    /**
+     * Validity the family owns, beside the validity the consumer states: the
+     * bounds, the predicate over every day of the run, the order of the two
+     * ends and the length.
+     */
+    problems = computed(() => rangeProblems(this.held(), {
+        contiguous: this.contiguous(),
+        count: this.resolvedCount(),
+        max: this.max(),
+        maxLength: this.maxLength(),
+        min: this.min(),
+        minLength: this.minLength(),
+        unavailable: this.isDateUnavailable(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "problems" }] : /* 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: the start cannot step past the
+       end nor the end before the start. Reversed, each field keeps the outer
+       bounds and the end field alone says the order is wrong. */
+    startMax = computed(() => {
+        const end = this.end();
+        const max = this.max();
+        if (!this.ordered() || end === null)
+            return max;
+        return max === undefined || compareDate(end, max) < 0 ? end : max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startMax" }] : /* istanbul ignore next */ []));
+    endMin = computed(() => {
+        const start = this.start();
+        const min = this.min();
+        if (!this.ordered() || start === null)
+            return min;
+        return min === undefined || compareDate(start, min) > 0 ? start : min;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endMin" }] : /* istanbul ignore next */ []));
+    /**
+     * What the calendar is shown. A pressed start replaces the value while the
+     * run is open; with the end as the current position, the end is withheld so
+     * the next press writes it instead of restarting the run.
+     */
+    calendarValue = computed(() => {
+        const draft = this.draft();
+        if (draft !== null)
+            return { start: draft, end: null };
+        const start = this.start();
+        if (this.currentPosition() === 'end' && start !== null)
+            return { start, end: null };
+        return this.held();
+    }, /* @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 */ []));
+    /** The block on either side of the chosen start, found once per start. */
+    blocked = computed(() => {
+        const openStart = this.openStart();
+        if (openStart === null || !this.contiguous())
+            return { before: null, after: null };
+        return blockedAround(openStart, this.isDateUnavailable() ?? (() => false), this.maxLength() ?? CONTIGUOUS_SEARCH);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blocked" }] : /* istanbul ignore next */ []));
+    gridUnavailable = computed(() => {
+        const openStart = this.openStart();
+        const unavailable = this.isDateUnavailable();
+        if (openStart === null)
+            return unavailable;
+        const rules = {
+            contiguous: this.contiguous(),
+            count: this.resolvedCount(),
+            maxLength: this.maxLength(),
+            minLength: this.minLength(),
+            unavailable,
+        };
+        const blocked = this.blocked();
+        return (date) => isDateRefusedInRun(openStart, date, rules, blocked);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridUnavailable" }] : /* istanbul ignore next */ []));
+    /** The run as it would close on the pending end. */
+    pendingRun = computed(() => {
+        const openStart = this.openStart();
+        const preview = this.preview();
+        return openStart !== null && preview !== null ? orderedRun(openStart, preview) : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingRun" }] : /* istanbul ignore next */ []));
+    shownStart = computed(() => this.pendingRun()?.start ?? this.draft() ?? this.start(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownStart" }] : /* istanbul ignore next */ []));
+    shownEnd = computed(() => this.pendingRun()?.end ?? (this.draft() !== null ? null : this.end()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownEnd" }] : /* istanbul ignore next */ []));
+    startPending = computed(() => {
+        const pending = this.pendingRun();
+        return pending !== null && !isSameDate(pending.start, this.openStart());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startPending" }] : /* istanbul ignore next */ []));
+    endPending = computed(() => this.pendingRun() !== null && !this.startPending(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endPending" }] : /* istanbul ignore next */ []));
+    /** "4 nights": the run's length, in the unit `count` names. */
+    spokenLength = computed(() => {
+        const count = this.resolvedCount();
+        const length = (days) => this.t(`${count}.length`, { count: days });
+        const pending = this.pendingRun();
+        if (pending !== null)
+            return length(rangeLength(pending.start, pending.end, count));
+        const start = this.start();
+        const end = this.end();
+        if (this.ordered() && start !== null && end !== null) {
+            return length(rangeLength(start, end, count));
+        }
+        return '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spokenLength" }] : /* istanbul ignore next */ []));
+    /** "2 to 7 nights", "at least 2 nights", "at most 7 nights". */
+    limitText = computed(() => {
+        const min = this.minLength();
+        const max = this.maxLength();
+        const count = this.resolvedCount();
+        if (min !== undefined && max !== undefined) {
+            return this.t(`${count}.between`, { min, max });
+        }
+        if (min !== undefined)
+            return this.t(`${count}.atLeast`, { min });
+        if (max !== undefined)
+            return this.t(`${count}.atMost`, { 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 (!this.ordered() || start === null || end === null) {
+            return this.t('choose');
+        }
+        const format = createDateFormat({ locale: this.resolvedLocale() });
+        return this.t('change', {
+            start: format.describe(start),
+            end: format.describe(end),
+            length: this.spokenLength(),
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    /* The band writes each end short — "12 Sep" — because the whole date in
+       words is the trigger's, and a band that repeats it twice runs past the
+       panel at 240 pixels. */
+    short = computed(() => new Intl.DateTimeFormat(this.resolvedLocale(), {
+        day: 'numeric',
+        month: 'short',
+        timeZone: 'UTC',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "short" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* The layer is created and torn down with the surface, not with the
+           component: a layer that outlived its content would hold a place in the
+           single stack that nothing occupies. */
+        effect(() => {
+            const open = this.isOpen();
+            if (!open) {
+                this.release();
+                this.draft.set(null);
+                return;
+            }
+            afterNextRender(() => this.attach(), { 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());
+        /* A native reset restores the hidden inputs and tells nothing, so the
+           picker would keep the last run chosen in a form that had been reset. The
+           value returns to `defaultValue` through `valueChange`, reason
+           `programmatic`, and a start pressed in the grid without its end is
+           dropped with it. A picker bound to a form model takes the model's reset
+           value through `writeValue` instead. */
+        const form = this.element.closest('form');
+        if (form !== null) {
+            const onReset = (event) => {
+                if (this.formBound)
+                    return;
+                this.draft.set(null);
+                this.commit(this.defaultValue() ?? null, 'programmatic', event);
+            };
+            form.addEventListener('reset', onReset);
+            this.destroyRef.onDestroy(() => form.removeEventListener('reset', onReset));
+        }
+        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;
+        this.formBound = true;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChangeFn = fn;
+    }
+    /**
+     * The rules no other validator can see: the bounds, the predicate over the
+     * run, the order of the two ends and the length. `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 = rangeProblems(value, {
+            contiguous: this.contiguous(),
+            count: this.resolvedCount(),
+            max: this.max(),
+            maxLength: this.maxLength(),
+            min: this.min(),
+            minLength: this.minLength(),
+            unavailable: this.isDateUnavailable(),
+        });
+        if (problems.length === 0)
+            return null;
+        const errors = {};
+        if (problems.includes('order'))
+            errors['slottedDateRangeOrder'] = { actual: value };
+        if (problems.includes('min'))
+            errors['slottedDateRangeMin'] = { min: this.min(), actual: value };
+        if (problems.includes('max'))
+            errors['slottedDateRangeMax'] = { max: this.max(), actual: value };
+        if (problems.includes('unavailable'))
+            errors['slottedDateRangeUnavailable'] = { actual: value };
+        if (problems.includes('length')) {
+            errors['slottedDateRangeLength'] = {
+                minLength: this.minLength(),
+                maxLength: this.maxLength(),
+                actual: value,
+            };
+        }
+        return errors;
+    }
+    /* ── Imperative ────────────────────────────────────────────────────── */
+    /** Puts focus on the first segment of one end; the current end by default. */
+    focus(position = this.currentPosition()) {
+        (position === 'end' ? this.endField : this.startField)?.focus();
+    }
+    openSurface(source) {
+        this.setOpen(true, 'keyboard', source, true);
+    }
+    closeSurface(source) {
+        this.setOpen(false, 'keyboard', source);
+    }
+    /** A preset writes its range through here, with the `select` reason. */
+    choose(range, source) {
+        this.draft.set(null);
+        this.commit(range, 'select', source);
+        this.setPosition('start', 'select', source);
+        this.closeAfter(true, source);
+    }
+    /* ── Handlers ──────────────────────────────────────────────────────── */
+    writeShort(date) {
+        return this.short().format(Date.UTC(date.year, date.month - 1, date.day));
+    }
+    toggle(source) {
+        this.setOpen(!this.isOpen(), 'pointer', source, true);
+    }
+    /** Tab and Shift+Tab wrap inside the surface while it is open. */
+    onContentKeyDown(event) {
+        if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const content = event.currentTarget;
+        const items = tabbables(content);
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (first === undefined || last === undefined)
+            return;
+        const current = content.ownerDocument.activeElement;
+        if (event.shiftKey && current === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && current === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    clear(source) {
+        this.commit(null, 'clear', source);
+        this.setPosition('start', 'clear', source);
+        this.focus('start');
+    }
+    onControlKeyDown(event) {
+        if (!this.editable())
+            return;
+        /* ChromeOS turns the chord into PageDown before the browser sees it, which
+           is why the trigger button is always drawn and this is only a shortcut. */
+        if (event.altKey && event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.setOpen(true, 'keyboard', event);
+        }
+    }
+    onFieldFocus(which, source) {
+        const reason = this.pointerFocus ? 'pointer' : 'keyboard';
+        this.pointerFocus = false;
+        if (which !== this.currentPosition())
+            this.setPosition(which, reason, source);
+    }
+    onControlFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.element.contains(next))
+            return;
+        this.onTouchedFn();
+    }
+    onFieldValue(which, request) {
+        const next = which === 'start'
+            ? { start: request.value, end: this.end() }
+            : { start: this.start(), end: request.value };
+        this.commit(next, request.reason, request.source);
+    }
+    onCalendarValue(request) {
+        const next = request.value;
+        if (next === null || Array.isArray(next) || !('start' in next))
+            return;
+        if (next.end === null) {
+            /* The first press: a draft, and the next press writes the end. */
+            this.draft.set(next.start);
+            this.setPosition('end', 'select', request.source);
+            this.closeAfter(false, request.source);
+            return;
+        }
+        this.draft.set(null);
+        this.commit(next, 'select', request.source);
+        this.setPosition('start', 'select', request.source);
+        this.closeAfter(true, request.source);
+    }
+    closeAfter(whole, source) {
+        const axis = this.closeOnSelect() ?? this.defaults.closeOnSelect;
+        if (!(axis === 'always' || (axis === 'auto' && whole)))
+            return;
+        this.setOpen(false, 'select', source);
+        this.triggerRef?.nativeElement.focus({ preventScroll: true });
+    }
+    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: (a, b) => isSameValue(a, b),
+            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);
+    }
+    setOpen(next, reason, source, moveFocus = false) {
+        const state = createControllable({
+            controlled: this.open(),
+            initial: this.isOpen(),
+            onRequest: (request) => {
+                this.openChange.emit(request);
+                this.focusOnOpen = moveFocus && request.value && !request.cancelled;
+            },
+        });
+        if (state.request(next, reason, source))
+            this.ownOpen.set(next);
+    }
+    /** Places the layer and puts it in the single stack. */
+    attach() {
+        const layer = this.layer?.nativeElement;
+        if (layer === undefined)
+            return;
+        this.release();
+        if (!this.sheet()) {
+            const anchor = this.element.querySelector('[data-part="control"]') ?? this.element;
+            const [side, align] = this.resolvedPlacement().split('-');
+            this.positioner = createPositioner(anchor, layer, { align: align ?? 'center', side });
+            void this.positioner.update().then(() => this.positioned.set(true));
+        }
+        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) => {
+                /* The view first, the surface second: the layer asks in the capture
+                   phase, so the decision is taken here and the layer simply not asked. */
+                if (request.reason === 'escape' && this.view() !== 'day') {
+                    this.view.set(this.view() === 'year' ? 'month' : 'day');
+                    return;
+                }
+                this.setOpen(false, request.reason === 'escape' ? 'escape' : 'outsidePress', request.source);
+                if (request.reason === 'escape') {
+                    this.triggerRef?.nativeElement.focus({ preventScroll: true });
+                }
+            },
+        });
+        /* Opened from the trigger or the handle, focus lands on the cell of the
+           current end, or on today when it is empty — the APG's rule for its
+           "Choose Date" button. The grid pages to that cell first, and focus waits
+           for the render that draws it. Opened with the chord, focus stays in the
+           field so typing keeps working. */
+        if (this.focusOnOpen) {
+            this.focusOnOpen = false;
+            const target = this.currentPosition() === 'end' ? this.end() : this.start();
+            if (target !== null)
+                this.calendarRef?.focusDate(target);
+            afterNextRender(() => layer
+                .querySelector('[data-part="day"][tabindex="0"]')
+                ?.focus({ preventScroll: true }), { injector: this.injector });
+        }
+    }
+    release() {
+        this.positioner?.destroy();
+        this.positioner = null;
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        this.positioned.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDateRangePicker, isStandalone: true, selector: "[slDateRangePicker]", 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 }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", 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 }, count: { classPropertyName: "count", publicName: "count", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, yearPivot: { classPropertyName: "yearPivot", publicName: "yearPivot", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", 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 }, 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" }, host: { attributes: { "data-ui": "date-range-picker", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-calendar": "resolvedCalendar()", "attr.data-count": "resolvedCount()", "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(() => SlDateRangePicker), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateRangePicker), multi: true },
+        ], viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "startField", first: true, predicate: ["startField"], descendants: true }, { propertyName: "endField", first: true, predicate: ["endField"], descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }], exportAs: ["slDateRangePicker"], ngImport: i0, template: `<div
+      data-part="control"
+      [attr.role]="enclosing === null ? null : 'group'"
+      [attr.id]="enclosing?.ids()?.control ?? null"
+      [attr.aria-labelledby]="enclosing?.ids()?.label ?? null"
+      (keydown)="onControlKeyDown($event)"
+      (pointerdown)="pointerFocus = true"
+      (focusout)="onControlFocusOut($event)"
+    >
+      <div
+        data-part="start"
+        [attr.data-current]="currentPosition() === 'start' ? '' : null"
+        (focusin)="onFieldFocus('start', $event)"
+      >
+        <div
+          slDateField
+          #startField="slDateField"
+          variant="plain"
+          [label]="t('start')"
+          [groupId]="contentId + '-start'"
+          [locale]="resolvedLocale()"
+          [timeZone]="resolvedTimeZone()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [yearPivot]="yearPivot()"
+          [calendar]="resolvedCalendar()"
+          [size]="resolvedSize()"
+          [min]="min()"
+          [max]="startMax()"
+          [isDateUnavailable]="isDateUnavailable()"
+          [name]="startName()"
+          [disabled]="resolvedDisabled()"
+          [readOnly]="resolvedReadOnly()"
+          [required]="resolvedRequired()"
+          [value]="start()"
+          (valueChange)="onFieldValue('start', $event)"
+        ></div>
+      </div>
+      <span data-part="separator" aria-hidden="true">–</span>
+      <div
+        data-part="end"
+        [attr.data-current]="currentPosition() === 'end' ? '' : null"
+        (focusin)="onFieldFocus('end', $event)"
+      >
+        <div
+          slDateField
+          #endField="slDateField"
+          variant="plain"
+          [label]="t('end')"
+          [groupId]="contentId + '-end'"
+          [locale]="resolvedLocale()"
+          [timeZone]="resolvedTimeZone()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [yearPivot]="yearPivot()"
+          [calendar]="resolvedCalendar()"
+          [size]="resolvedSize()"
+          [min]="endMin()"
+          [max]="max()"
+          [isDateUnavailable]="isDateUnavailable()"
+          [invalid]="reversed() ? true : undefined"
+          [name]="endName()"
+          [disabled]="resolvedDisabled()"
+          [readOnly]="resolvedReadOnly()"
+          [required]="resolvedRequired()"
+          [value]="end()"
+          (valueChange)="onFieldValue('end', $event)"
+        ></div>
+      </div>
+      @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>
+      }
+      <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)"
+      >
+        <span slIcon><svg slGlyph name="calendar"></svg></span>
+      </button>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="date-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()"
+          (keydown)="onContentKeyDown($event)"
+        >
+          <div data-part="head">
+            <span
+              data-part="head-start"
+              [attr.data-placeholder]="shownStart() === null ? '' : null"
+              [attr.data-pending]="startPending() ? '' : null"
+              >{{ shownStart() === null ? t('start') : writeShort(shownStart()!) }}</span
+            >
+            –
+            <span
+              data-part="head-end"
+              [attr.data-placeholder]="shownEnd() === null ? '' : null"
+              [attr.data-pending]="endPending() ? '' : null"
+              >{{ shownEnd() === null ? t('end') : writeShort(shownEnd()!) }}</span
+            >
+            <span
+              data-part="length"
+              aria-live="polite"
+              [attr.data-pending]="pendingRun() === null ? null : ''"
+              >{{ spokenLength() }}</span
+            >
+            @if (limitText() !== null) {
+              <span data-part="limit">{{ limitText() }}</span>
+            }
+          </div>
+          <div data-part="panels">
+            <ng-content select="[slDateRangePickerPresets]" />
+            <div
+              slCalendar
+              #calendar="slCalendar"
+              selectionMode="range"
+              [locale]="resolvedLocale()"
+              [timeZone]="resolvedTimeZone()"
+              [firstDayOfWeek]="firstDayOfWeek()"
+              [min]="min()"
+              [max]="max()"
+              [isDateUnavailable]="gridUnavailable()"
+              [months]="resolvedMonths()"
+              [weekNumbers]="weekNumbers()"
+              [fixedWeeks]="fixedWeeks()"
+              [readOnly]="resolvedReadOnly()"
+              [value]="calendarValue()"
+              [view]="view()"
+              (viewChange)="view.set($event)"
+              (previewChange)="preview.set($event)"
+              (valueChange)="onCalendarValue($event)"
+            ></div>
+          </div>
+          <ng-content select="[slDateRangePickerFooter]" />
+        </div>
+      </div>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=date-range-picker][data-part=root]{display:block;inline-size:100%}[data-ui=date-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-date-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)) ) );align-items:center;background-color:var( --slotted-date-range-picker-background, var(--slotted-control-surface, Field) );border:var(--_border-width) solid var( --slotted-date-range-picker-border-color, var(--slotted-control-border-color, ButtonBorder) );border-radius:var(--slotted-date-range-picker-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-date-range-picker-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-date-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);gap:var(--slotted-space-1, .125rem);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);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=date-range-picker] [data-part=control]{--_action-inset: max( 0px, calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2) );--_actions: 1;padding-inline-end:calc(var(--_action-inset) + var(--_action-size) * var(--_actions) + var(--slotted-space-1, .125rem) * (var(--_actions) - 1) + var(--slotted-space-2, .25rem))}[data-ui=date-range-picker] [data-part=control]:has(>[data-part=clear]){--_actions: 2}[data-ui=date-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=date-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=date-range-picker][data-part=root][data-variant=subtle] [data-part=control]{background-color:var( --slotted-date-range-picker-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-date-range-picker-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=date-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=date-range-picker] [data-part=start],[data-ui=date-range-picker] [data-part=end]{--slotted-control-border-width: 0px;--slotted-control-padding-inline-sm: 0px;--slotted-control-padding-inline-md: 0px;--slotted-control-padding-inline-lg: 0px;--slotted-control-height-sm: calc(var(--_height) - var(--_border-width) * 2);--slotted-control-height-md: calc(var(--_height) - var(--_border-width) * 2);--slotted-control-height-lg: calc(var(--_height) - var(--_border-width) * 2);--slotted-date-field-plain-hover-background: transparent;--slotted-date-field-invalid-border-color: transparent;--slotted-date-field-shadow: none;--slotted-control-shadow-focus-geometry: 0 0 0 0;--slotted-focus-ring-width: 0px;display:flex;flex:0 1 auto;min-inline-size:0;position:relative}[data-ui=date-range-picker] [data-part=start]:after,[data-ui=date-range-picker] [data-part=end]:after{background-color:var( --slotted-date-range-picker-current-color, var(--slotted-tone-accent-solid) );block-size:var(--slotted-date-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:0;inset-inline:0;opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=date-range-picker][data-part=root]:is([data-open],:has([data-part=control]:focus-within)) :is([data-part=start],[data-part=end])[data-current]:after{opacity:1}[data-ui=date-range-picker] [data-part=separator]{color:var(--slotted-date-range-picker-separator-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;padding-inline:var(--slotted-space-2, .25rem);-webkit-user-select:none;user-select:none}[data-ui=date-range-picker] [data-part=clear],[data-ui=date-range-picker] [data-part=trigger]{--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-date-range-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-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:var(--_action-inset);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=date-range-picker] [data-part=clear]{inset-inline-end:calc(var(--_action-inset) + var(--_action-size) + var(--slotted-space-1, .125rem))}[data-ui=date-range-picker] [data-part=clear]:after,[data-ui=date-range-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=date-range-picker] :is([data-part=clear],[data-part=trigger]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=date-range-picker] [data-part=clear]:has(+[data-part=trigger]:not([hidden])):after{inset-inline-end:0}[data-ui=date-range-picker] [data-part=clear]:not([hidden])+[data-part=trigger]:after{inset-inline-start:0}}[data-ui=date-range-picker] [data-part=clear]:hover:not(:disabled):not([data-disabled]),[data-ui=date-range-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-range-picker-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-range-picker] [data-part=clear]:active:not(:disabled):not([data-disabled]),[data-ui=date-range-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-range-picker-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-range-picker] [data-part=clear]:focus-visible,[data-ui=date-range-picker] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=date-range-picker] [data-part=clear]:disabled,[data-ui=date-range-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-range-picker][data-part=root]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{border-color:var( --slotted-date-range-picker-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=date-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-date-range-picker-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-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-date-range-picker-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=date-range-picker] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]: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=date-range-picker][data-part=root][data-variant=plain] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]:focus)){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=date-range-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-range-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=date-range-picker][data-part=root][data-invalid] [data-part=control]{--_invalid-edge-width: var( --slotted-date-range-picker-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-date-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-date-range-picker-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=date-range-picker][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]:focus)){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=date-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]:focus)){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=date-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=date-range-picker][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]: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=date-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]: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=date-range-picker][data-part=root][data-readonly] [data-part=control]{background-color:var( --slotted-date-range-picker-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=date-range-picker][data-part=root][data-disabled] [data-part=control]{background-color:var( --slotted-date-range-picker-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-date-range-picker-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-date-range-picker-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=date-range-picker][data-part=root][data-disabled] [data-part=separator]{color:var(--slotted-disabled-foreground)}[data-ui=date-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=date-range-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=date-range-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=date-range-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-date-range-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-range-picker-enter-up}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-range-picker-fade}@keyframes slotted-date-range-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-range-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-range-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=date-range-picker][data-part=positioner],[data-ui=date-range-picker][data-part=positioner][data-side=top],[data-ui=date-range-picker][data-part=positioner][data-side=left],[data-ui=date-range-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned],[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-range-picker-fade}}[data-ui=date-range-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=date-range-picker] [data-part=content]{background-color:var( --slotted-date-range-picker-surface, var(--slotted-surface-raised, Canvas) );border:var(--slotted-border-width-thin, 1px) solid var( --slotted-date-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );border-radius:var(--slotted-date-range-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-range-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-range-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"head\" \"panels\" \"footer\";grid-template-columns:minmax(0,1fr);max-inline-size:var(--slotted-positioner-available-width, 100vw);padding:var(--slotted-date-range-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=date-range-picker] [data-part=panels]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--slotted-space-5, .75rem);grid-area:panels;min-inline-size:0}[data-ui=date-range-picker] [data-part=panels]>[data-ui=calendar]{flex:0 1 auto}[data-ui=date-range-picker] [data-part=head]{box-sizing:border-box;inline-size:0;min-inline-size:100%;align-items:baseline;border-block-end:var(--slotted-border-width-thin, 1px) solid var( --slotted-date-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );column-gap:var(--slotted-space-2, .25rem);display:flex;flex-wrap:wrap;grid-area:head;padding-block-end:var(--slotted-space-3, .375rem);row-gap:var(--slotted-space-1, .125rem)}[data-ui=date-range-picker] [data-part=head]>[data-part=head-start],[data-ui=date-range-picker] [data-part=head]>[data-part=head-end]{color:var(--slotted-date-range-picker-content-color, var(--slotted-text, CanvasText));font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);unicode-bidi:plaintext;white-space:nowrap}[data-ui=date-range-picker] [data-part=head] :is([data-part=head-start],[data-part=head-end])[data-placeholder]{color:var(--slotted-date-range-picker-placeholder-color, var(--slotted-text-muted, GrayText));font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=date-range-picker] [data-part=head] :is([data-part=head-start],[data-part=head-end])[data-pending]{color:var(--slotted-date-range-picker-pending-color, var(--slotted-tone-accent-text))}[data-ui=date-range-picker] [data-part=length]{color:var(--slotted-date-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);margin-inline-start:auto;padding-inline-start:var(--slotted-space-4, .5rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui=date-range-picker] [data-part=length][data-pending]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=date-range-picker] [data-part=length]:empty:before{content:\"\\200b\"}[data-ui=date-range-picker] [data-part=limit]{color:var(--slotted-date-range-picker-limit-color, var(--slotted-text-muted, GrayText));flex-basis:100%;font-size:var(--slotted-font-size-xs, 11px);unicode-bidi:plaintext}[data-ui=date-range-picker] [data-part=presets]{align-items:stretch;display:flex;flex:1 0 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem)}[data-ui=date-range-picker] [data-part=preset]{appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-date-range-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-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(--slotted-target-min, 24px);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-3, .375rem);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=date-range-picker] [data-part=preset]:hover:not(:disabled):not([data-selected]){background-color:var( --slotted-date-range-picker-preset-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-range-picker] [data-part=preset]:active:not(:disabled):not([data-selected]){background-color:var( --slotted-date-range-picker-preset-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-range-picker] [data-part=preset][data-selected]{background-color:var( --slotted-date-range-picker-preset-selected-background, var(--slotted-tone-accent-subtle-hover) );color:var(--slotted-date-range-picker-preset-selected-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=date-range-picker] [data-part=preset]: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=date-range-picker] [data-part=preset]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-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-date-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-4, .5rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=date-range-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=date-range-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=date-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-date-range-picker-sheet-inline-size, 100%);max-inline-size:none;justify-content:center}[data-ui=date-range-picker][data-part=positioner][data-presentation=sheet] [data-part=presets]{flex-direction:row;flex-wrap:wrap}}@media(forced-colors:active){[data-ui=date-range-picker][data-part=root][data-variant=plain] [data-part=control]{border-color:ButtonBorder}[data-ui=date-range-picker] [data-part=start]:after,[data-ui=date-range-picker] [data-part=end]:after{forced-color-adjust:none}[data-ui=date-range-picker] [data-part=start]:after,[data-ui=date-range-picker] [data-part=end]:after{background-color:currentcolor}[data-ui=date-range-picker] [data-part=preset][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\n"], dependencies: [{ 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: SlDateField, selector: "[slDateField]", inputs: ["value", "defaultValue", "min", "max", "isDateUnavailable", "locale", "timeZone", "firstDayOfWeek", "yearPivot", "calendar", "size", "variant", "disabled", "readOnly", "invalid", "required", "clearable", "messages", "name", "label", "groupId"], outputs: ["valueChange"], exportAs: ["slDateField"] }, { 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: SlDateRangePicker, decorators: [{
+            type: Component,
+            args: [{ selector: '[slDateRangePicker]', standalone: true, exportAs: 'slDateRangePicker', imports: [SlCalendar, SlDateField, SlGlyph, SlIcon], providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDateRangePicker), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDateRangePicker), multi: true },
+                    ], template: `<div
+      data-part="control"
+      [attr.role]="enclosing === null ? null : 'group'"
+      [attr.id]="enclosing?.ids()?.control ?? null"
+      [attr.aria-labelledby]="enclosing?.ids()?.label ?? null"
+      (keydown)="onControlKeyDown($event)"
+      (pointerdown)="pointerFocus = true"
+      (focusout)="onControlFocusOut($event)"
+    >
+      <div
+        data-part="start"
+        [attr.data-current]="currentPosition() === 'start' ? '' : null"
+        (focusin)="onFieldFocus('start', $event)"
+      >
+        <div
+          slDateField
+          #startField="slDateField"
+          variant="plain"
+          [label]="t('start')"
+          [groupId]="contentId + '-start'"
+          [locale]="resolvedLocale()"
+          [timeZone]="resolvedTimeZone()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [yearPivot]="yearPivot()"
+          [calendar]="resolvedCalendar()"
+          [size]="resolvedSize()"
+          [min]="min()"
+          [max]="startMax()"
+          [isDateUnavailable]="isDateUnavailable()"
+          [name]="startName()"
+          [disabled]="resolvedDisabled()"
+          [readOnly]="resolvedReadOnly()"
+          [required]="resolvedRequired()"
+          [value]="start()"
+          (valueChange)="onFieldValue('start', $event)"
+        ></div>
+      </div>
+      <span data-part="separator" aria-hidden="true">–</span>
+      <div
+        data-part="end"
+        [attr.data-current]="currentPosition() === 'end' ? '' : null"
+        (focusin)="onFieldFocus('end', $event)"
+      >
+        <div
+          slDateField
+          #endField="slDateField"
+          variant="plain"
+          [label]="t('end')"
+          [groupId]="contentId + '-end'"
+          [locale]="resolvedLocale()"
+          [timeZone]="resolvedTimeZone()"
+          [firstDayOfWeek]="firstDayOfWeek()"
+          [yearPivot]="yearPivot()"
+          [calendar]="resolvedCalendar()"
+          [size]="resolvedSize()"
+          [min]="endMin()"
+          [max]="max()"
+          [isDateUnavailable]="isDateUnavailable()"
+          [invalid]="reversed() ? true : undefined"
+          [name]="endName()"
+          [disabled]="resolvedDisabled()"
+          [readOnly]="resolvedReadOnly()"
+          [required]="resolvedRequired()"
+          [value]="end()"
+          (valueChange)="onFieldValue('end', $event)"
+        ></div>
+      </div>
+      @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>
+      }
+      <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)"
+      >
+        <span slIcon><svg slGlyph name="calendar"></svg></span>
+      </button>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="date-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()"
+          (keydown)="onContentKeyDown($event)"
+        >
+          <div data-part="head">
+            <span
+              data-part="head-start"
+              [attr.data-placeholder]="shownStart() === null ? '' : null"
+              [attr.data-pending]="startPending() ? '' : null"
+              >{{ shownStart() === null ? t('start') : writeShort(shownStart()!) }}</span
+            >
+            –
+            <span
+              data-part="head-end"
+              [attr.data-placeholder]="shownEnd() === null ? '' : null"
+              [attr.data-pending]="endPending() ? '' : null"
+              >{{ shownEnd() === null ? t('end') : writeShort(shownEnd()!) }}</span
+            >
+            <span
+              data-part="length"
+              aria-live="polite"
+              [attr.data-pending]="pendingRun() === null ? null : ''"
+              >{{ spokenLength() }}</span
+            >
+            @if (limitText() !== null) {
+              <span data-part="limit">{{ limitText() }}</span>
+            }
+          </div>
+          <div data-part="panels">
+            <ng-content select="[slDateRangePickerPresets]" />
+            <div
+              slCalendar
+              #calendar="slCalendar"
+              selectionMode="range"
+              [locale]="resolvedLocale()"
+              [timeZone]="resolvedTimeZone()"
+              [firstDayOfWeek]="firstDayOfWeek()"
+              [min]="min()"
+              [max]="max()"
+              [isDateUnavailable]="gridUnavailable()"
+              [months]="resolvedMonths()"
+              [weekNumbers]="weekNumbers()"
+              [fixedWeeks]="fixedWeeks()"
+              [readOnly]="resolvedReadOnly()"
+              [value]="calendarValue()"
+              [view]="view()"
+              (viewChange)="view.set($event)"
+              (previewChange)="preview.set($event)"
+              (valueChange)="onCalendarValue($event)"
+            ></div>
+          </div>
+          <ng-content select="[slDateRangePickerFooter]" />
+        </div>
+      </div>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'date-range-picker',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-calendar]': 'resolvedCalendar()',
+                        '[attr.data-count]': 'resolvedCount()',
+                        '[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=date-range-picker][data-part=root]{display:block;inline-size:100%}[data-ui=date-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-date-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)) ) );align-items:center;background-color:var( --slotted-date-range-picker-background, var(--slotted-control-surface, Field) );border:var(--_border-width) solid var( --slotted-date-range-picker-border-color, var(--slotted-control-border-color, ButtonBorder) );border-radius:var(--slotted-date-range-picker-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-date-range-picker-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-date-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);gap:var(--slotted-space-1, .125rem);inline-size:100%;min-block-size:var(--_height);min-inline-size:0;padding-inline:var(--_padding-inline);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=date-range-picker] [data-part=control]{--_action-inset: max( 0px, calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2) );--_actions: 1;padding-inline-end:calc(var(--_action-inset) + var(--_action-size) * var(--_actions) + var(--slotted-space-1, .125rem) * (var(--_actions) - 1) + var(--slotted-space-2, .25rem))}[data-ui=date-range-picker] [data-part=control]:has(>[data-part=clear]){--_actions: 2}[data-ui=date-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=date-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=date-range-picker][data-part=root][data-variant=subtle] [data-part=control]{background-color:var( --slotted-date-range-picker-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-date-range-picker-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=date-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=date-range-picker] [data-part=start],[data-ui=date-range-picker] [data-part=end]{--slotted-control-border-width: 0px;--slotted-control-padding-inline-sm: 0px;--slotted-control-padding-inline-md: 0px;--slotted-control-padding-inline-lg: 0px;--slotted-control-height-sm: calc(var(--_height) - var(--_border-width) * 2);--slotted-control-height-md: calc(var(--_height) - var(--_border-width) * 2);--slotted-control-height-lg: calc(var(--_height) - var(--_border-width) * 2);--slotted-date-field-plain-hover-background: transparent;--slotted-date-field-invalid-border-color: transparent;--slotted-date-field-shadow: none;--slotted-control-shadow-focus-geometry: 0 0 0 0;--slotted-focus-ring-width: 0px;display:flex;flex:0 1 auto;min-inline-size:0;position:relative}[data-ui=date-range-picker] [data-part=start]:after,[data-ui=date-range-picker] [data-part=end]:after{background-color:var( --slotted-date-range-picker-current-color, var(--slotted-tone-accent-solid) );block-size:var(--slotted-date-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:0;inset-inline:0;opacity:0;position:absolute;transition:opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=date-range-picker][data-part=root]:is([data-open],:has([data-part=control]:focus-within)) :is([data-part=start],[data-part=end])[data-current]:after{opacity:1}[data-ui=date-range-picker] [data-part=separator]{color:var(--slotted-date-range-picker-separator-color, var(--slotted-text-muted, GrayText));flex:0 0 auto;padding-inline:var(--slotted-space-2, .25rem);-webkit-user-select:none;user-select:none}[data-ui=date-range-picker] [data-part=clear],[data-ui=date-range-picker] [data-part=trigger]{--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-date-range-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-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:var(--_action-inset);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=date-range-picker] [data-part=clear]{inset-inline-end:calc(var(--_action-inset) + var(--_action-size) + var(--slotted-space-1, .125rem))}[data-ui=date-range-picker] [data-part=clear]:after,[data-ui=date-range-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=date-range-picker] :is([data-part=clear],[data-part=trigger]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=date-range-picker] [data-part=clear]:has(+[data-part=trigger]:not([hidden])):after{inset-inline-end:0}[data-ui=date-range-picker] [data-part=clear]:not([hidden])+[data-part=trigger]:after{inset-inline-start:0}}[data-ui=date-range-picker] [data-part=clear]:hover:not(:disabled):not([data-disabled]),[data-ui=date-range-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-range-picker-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-range-picker] [data-part=clear]:active:not(:disabled):not([data-disabled]),[data-ui=date-range-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-range-picker-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-range-picker] [data-part=clear]:focus-visible,[data-ui=date-range-picker] [data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=date-range-picker] [data-part=clear]:disabled,[data-ui=date-range-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-range-picker][data-part=root]:not([data-disabled]):not([data-readonly]):not([data-invalid]) [data-part=control]:hover{border-color:var( --slotted-date-range-picker-hover-border-color, var(--slotted-tone-accent-border) )}[data-ui=date-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-date-range-picker-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-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-date-range-picker-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=date-range-picker] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]: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=date-range-picker][data-part=root][data-variant=plain] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]:focus)){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=date-range-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-range-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=date-range-picker][data-part=root][data-invalid] [data-part=control]{--_invalid-edge-width: var( --slotted-date-range-picker-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-date-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-date-range-picker-invalid-border-color, var(--slotted-tone-danger-border) );box-shadow:var(--_invalid-edge)}[data-ui=date-range-picker][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]:focus)){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=date-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]:focus)){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=date-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=date-range-picker][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]: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=date-range-picker][data-part=root][data-variant=plain][data-invalid] [data-part=control]:focus-within:not(:has(>[data-part=clear]:focus,>[data-part=trigger]: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=date-range-picker][data-part=root][data-readonly] [data-part=control]{background-color:var( --slotted-date-range-picker-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=date-range-picker][data-part=root][data-disabled] [data-part=control]{background-color:var( --slotted-date-range-picker-disabled-background, var(--slotted-disabled-background) );border-color:var( --slotted-date-range-picker-disabled-border-color, var(--slotted-disabled-border) );box-shadow:none;color:var(--slotted-date-range-picker-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=date-range-picker][data-part=root][data-disabled] [data-part=separator]{color:var(--slotted-disabled-foreground)}[data-ui=date-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=date-range-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=date-range-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=date-range-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-date-range-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-range-picker-enter-up}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-range-picker-fade}@keyframes slotted-date-range-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-range-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-range-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=date-range-picker][data-part=positioner],[data-ui=date-range-picker][data-part=positioner][data-side=top],[data-ui=date-range-picker][data-part=positioner][data-side=left],[data-ui=date-range-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned],[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=date-range-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-range-picker-fade}}[data-ui=date-range-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=date-range-picker] [data-part=content]{background-color:var( --slotted-date-range-picker-surface, var(--slotted-surface-raised, Canvas) );border:var(--slotted-border-width-thin, 1px) solid var( --slotted-date-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );border-radius:var(--slotted-date-range-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-range-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-range-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"head\" \"panels\" \"footer\";grid-template-columns:minmax(0,1fr);max-inline-size:var(--slotted-positioner-available-width, 100vw);padding:var(--slotted-date-range-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=date-range-picker] [data-part=panels]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--slotted-space-5, .75rem);grid-area:panels;min-inline-size:0}[data-ui=date-range-picker] [data-part=panels]>[data-ui=calendar]{flex:0 1 auto}[data-ui=date-range-picker] [data-part=head]{box-sizing:border-box;inline-size:0;min-inline-size:100%;align-items:baseline;border-block-end:var(--slotted-border-width-thin, 1px) solid var( --slotted-date-range-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder) );column-gap:var(--slotted-space-2, .25rem);display:flex;flex-wrap:wrap;grid-area:head;padding-block-end:var(--slotted-space-3, .375rem);row-gap:var(--slotted-space-1, .125rem)}[data-ui=date-range-picker] [data-part=head]>[data-part=head-start],[data-ui=date-range-picker] [data-part=head]>[data-part=head-end]{color:var(--slotted-date-range-picker-content-color, var(--slotted-text, CanvasText));font-size:var(--slotted-font-size-sm, 13px);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-medium, 500);unicode-bidi:plaintext;white-space:nowrap}[data-ui=date-range-picker] [data-part=head] :is([data-part=head-start],[data-part=head-end])[data-placeholder]{color:var(--slotted-date-range-picker-placeholder-color, var(--slotted-text-muted, GrayText));font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=date-range-picker] [data-part=head] :is([data-part=head-start],[data-part=head-end])[data-pending]{color:var(--slotted-date-range-picker-pending-color, var(--slotted-tone-accent-text))}[data-ui=date-range-picker] [data-part=length]{color:var(--slotted-date-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);margin-inline-start:auto;padding-inline-start:var(--slotted-space-4, .5rem);unicode-bidi:plaintext;white-space:nowrap}[data-ui=date-range-picker] [data-part=length][data-pending]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=date-range-picker] [data-part=length]:empty:before{content:\"\\200b\"}[data-ui=date-range-picker] [data-part=limit]{color:var(--slotted-date-range-picker-limit-color, var(--slotted-text-muted, GrayText));flex-basis:100%;font-size:var(--slotted-font-size-xs, 11px);unicode-bidi:plaintext}[data-ui=date-range-picker] [data-part=presets]{align-items:stretch;display:flex;flex:1 0 auto;flex-direction:column;gap:var(--slotted-space-1, .125rem)}[data-ui=date-range-picker] [data-part=preset]{appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-date-range-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-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(--slotted-target-min, 24px);padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-3, .375rem);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=date-range-picker] [data-part=preset]:hover:not(:disabled):not([data-selected]){background-color:var( --slotted-date-range-picker-preset-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-range-picker] [data-part=preset]:active:not(:disabled):not([data-selected]){background-color:var( --slotted-date-range-picker-preset-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-range-picker] [data-part=preset][data-selected]{background-color:var( --slotted-date-range-picker-preset-selected-background, var(--slotted-tone-accent-subtle-hover) );color:var(--slotted-date-range-picker-preset-selected-color, var(--slotted-tone-accent-text));font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=date-range-picker] [data-part=preset]: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=date-range-picker] [data-part=preset]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-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-date-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-4, .5rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=date-range-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=date-range-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=date-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-date-range-picker-sheet-inline-size, 100%);max-inline-size:none;justify-content:center}[data-ui=date-range-picker][data-part=positioner][data-presentation=sheet] [data-part=presets]{flex-direction:row;flex-wrap:wrap}}@media(forced-colors:active){[data-ui=date-range-picker][data-part=root][data-variant=plain] [data-part=control]{border-color:ButtonBorder}[data-ui=date-range-picker] [data-part=start]:after,[data-ui=date-range-picker] [data-part=end]:after{forced-color-adjust:none}[data-ui=date-range-picker] [data-part=start]:after,[data-ui=date-range-picker] [data-part=end]:after{background-color:currentcolor}[data-ui=date-range-picker] [data-part=preset][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}}}\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 }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isDateUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDateUnavailable", 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 }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", 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 }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], yearPivot: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearPivot", required: false }] }], calendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendar", 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 }] }], 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"] }], layer: [{
+                type: ViewChild,
+                args: ['layer']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], startField: [{
+                type: ViewChild,
+                args: ['startField']
+            }], endField: [{
+                type: ViewChild,
+                args: ['endField']
+            }], 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 — "last
+ * 7 days" is a business calendar — and the family ships the button, not the
+ * list.
+ */
+class SlDateRangePickerPreset {
+    /** The range the press writes, or a function resolving it at the press. */
+    range = input.required({ ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), alias: 'slDateRangePickerPreset' });
+    picker = inject(SlDateRangePicker);
+    selected = computed(() => {
+        const range = this.range();
+        return isSameValue(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: SlDateRangePickerPreset, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlDateRangePickerPreset, isStandalone: true, selector: "button[slDateRangePickerPreset]", inputs: { range: { classPropertyName: "range", publicName: "slDateRangePickerPreset", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-part": "preset", "type": "button" }, listeners: { "click": "choose($event)" }, properties: { "attr.data-selected": "selected() ? '' : null" } }, exportAs: ["slDateRangePickerPreset"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateRangePickerPreset, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[slDateRangePickerPreset]',
+                    standalone: true,
+                    exportAs: 'slDateRangePickerPreset',
+                    host: {
+                        'data-part': 'preset',
+                        type: 'button',
+                        '[attr.data-selected]': "selected() ? '' : null",
+                        '(click)': 'choose($event)',
+                    },
+                }]
+        }], propDecorators: { range: [{ type: i0.Input, args: [{ isSignal: true, alias: "slDateRangePickerPreset", required: true }] }] } });
+
+/**
+ * The consumer's own shortcuts, beside the grid where there is room and above
+ * it where there is not. Each one is a `slDateRangePickerPreset` button.
+ */
+class SlDateRangePickerPresets {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateRangePickerPresets, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateRangePickerPresets, isStandalone: true, selector: "[slDateRangePickerPresets]", host: { attributes: { "data-part": "presets" } }, exportAs: ["slDateRangePickerPresets"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateRangePickerPresets, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateRangePickerPresets]',
+                    standalone: true,
+                    exportAs: 'slDateRangePickerPresets',
+                    host: { 'data-part': 'presets' },
+                }]
+        }] });
+/** The consumer's own actions, under whatever the surface is holding. */
+class SlDateRangePickerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateRangePickerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDateRangePickerFooter, isStandalone: true, selector: "[slDateRangePickerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDateRangePickerFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDateRangePickerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDateRangePickerFooter]',
+                    standalone: true,
+                    exportAs: 'slDateRangePickerFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATE_RANGE_PICKER_DEFAULTS, SlDateRangePicker, SlDateRangePickerFooter, SlDateRangePickerPreset, SlDateRangePickerPresets, injectDateRangePickerDefaults, provideDateRangePickerDefaults };
+//# sourceMappingURL=slotted-angular-date-range-picker.mjs.map