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

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

@@ -0,0 +1,690 @@
+import { isDateInRange, 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 { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { datePickerMessages } from '@slotted/core/i18n';
+import { asDates, SlCalendar } from '@slotted/angular/calendar';
+import { SlDateField, SlDateFieldEnd } from '@slotted/angular/date-field';
+import { SlField } from '@slotted/angular/field';
+
+const FALLBACK = {
+    calendar: 'gregory',
+    closeOnSelect: 'auto',
+    placement: 'bottom-start',
+    size: 'md',
+    timeZone: undefined,
+    variant: 'outline',
+};
+const DATE_PICKER_DEFAULTS = new InjectionToken('slotted date picker defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once which zone answers "today" and where its
+ * surfaces open — rather than repeating the same inputs on every picker in a
+ * form. The locale that writes its dates and the trigger's names come from the
+ * language in force (`provideSlotted`).
+ */
+function provideDatePickerDefaults(defaults) {
+    return {
+        provide: DATE_PICKER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a date picker renders as here, before it states anything of its own. */
+function injectDatePickerDefaults() {
+    return inject(DATE_PICKER_DEFAULTS);
+}
+
+/**
+ * Below this width, on a finger, the surface is a sheet rather than a popover.
+ * §2.7 of `docs/component-features.md` asks for it by name. The query is here
+ * as well as in the stylesheet because the DOM has to say which presentation it
+ * is in, and a media query cannot write an attribute.
+ */
+const SHEET_QUERY = '(max-width: 480px) and (pointer: coarse)';
+/** The surface needs an identifier the trigger can point `aria-controls` at. */
+let sequence = 0;
+/**
+ * A date field, a trigger, and a calendar behind them.
+ *
+ * **It composes the other two families and redraws neither.** The field keeps
+ * its own `data-ui` and the calendar keeps its own; this family owns the box the
+ * positioner measures, the trigger inside the field's end slot, and the layer
+ * the calendar stands on.
+ *
+ * **The trigger's name carries the chosen date.** Focus returns to it when the
+ * surface closes, so the name is where the reader is told what was chosen —
+ * which the APG's own example names as an accessibility feature.
+ *
+ * **`Escape` is staged.** `dismissable-layer` asks in the capture phase, so a
+ * handler inside the surface is too late; the family decides there instead, and
+ * walks the calendar's view down rather than closing while a month or year grid
+ * is showing.
+ */
+class SlDatePicker {
+    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 });
+    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 */ []));
+    selectionMode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    months = input(undefined, { ...(ngDevMode ? { debugName: "months" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    defaultView = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultView" }] : /* istanbul ignore next */ []));
+    weekNumbers = input(undefined, { ...(ngDevMode ? { debugName: "weekNumbers" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /**
+     * Six rows whatever the month needs, on by default here and off in a bare
+     * calendar: a surface that grows a row between one press of "next" and the
+     * next moves the target the reader was aiming at.
+     */
+    fixedWeeks = input(true, { ...(ngDevMode ? { debugName: "fixedWeeks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** BCP 47. Writes the field, the grid and the trigger's date. 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 */ []));
+    /** 0 is Sunday. Unset, the locale decides. */
+    firstDayOfWeek = input(undefined, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    /** How a two-digit typed year resolves in the field. */
+    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)) });
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * trigger's name before (`choose`) and after (`change`) a date is chosen.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    openChange = output();
+    layer;
+    triggerRef;
+    field;
+    element = inject(ElementRef).nativeElement;
+    defaults = injectDatePickerDefaults();
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this picker's `messages` laid over them. */
+    t = injectMessages(datePickerMessages, this.messages);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    enclosing = inject(SlField, { optional: true });
+    contentId = `sl-date-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 */ []));
+    view = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    positioned = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "positioned" }] : /* istanbul ignore next */ []));
+    sheet = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
+    formDisabled = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => undefined;
+    /** Whether a form model holds the value, and answers a reset through `writeValue`. */
+    formBound = false;
+    onTouchedFn = () => undefined;
+    onValidatorChangeFn = () => undefined;
+    /**
+     * Whether the next opening moves focus into the calendar. Set by a request
+     * to open — the trigger, the chord, `openSurface()` — and never by a first
+     * render that starts open, which would take focus from wherever the page put
+     * it.
+     */
+    focusOnOpen = false;
+    positioner = null;
+    dismissable = null;
+    isOpen = computed(() => this.open() ?? this.ownOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    held = computed(() => this.value() ?? this.ownValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    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 */ []));
+    /**
+     * Validity the family owns, beside the validity the consumer states: a date
+     * outside the bounds or refused by the predicate is invalid whatever the
+     * field around it says, because this control is the only thing that knows.
+     */
+    resolvedInvalid = computed(() => {
+        const refused = asDates(this.held()).some((date) => !isDateInRange(date, this.min(), this.max()) || this.isDateUnavailable()?.(date) === true);
+        if (refused)
+            return true;
+        return this.invalid() ?? this.enclosing?.invalid();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInvalid" }] : /* istanbul ignore next */ []));
+    editable = computed(() => this.resolvedDisabled() !== true && this.resolvedReadOnly() !== true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    /**
+     * The value the field shows, which is a single date or nothing at all. `null`
+     * reaches the field as `null`, so a value emptied from outside — a form
+     * reset, a controlled clear — empties the segments too.
+     */
+    singleValue = computed(() => {
+        const held = this.held();
+        if (held !== null && (Array.isArray(held) || 'start' in held))
+            return undefined;
+        return held;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
+    /**
+     * The trigger's accessible name. Focus returns here when the surface closes,
+     * so this is where the reader is told what was chosen.
+     */
+    triggerLabel = computed(() => {
+        const chosen = asDates(this.held());
+        if (chosen.length === 0)
+            return this.t('choose');
+        const format = createDateFormat({ locale: this.resolvedLocale() });
+        return this.t('change', { date: chosen.map((date) => format.describe(date)).join(' – ') });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    closesOnSelect = computed(() => {
+        const axis = this.closeOnSelect() ?? this.defaults.closeOnSelect;
+        return axis === 'always' || (axis === 'auto' && this.selectionMode() === 'single');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closesOnSelect" }] : /* 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();
+                return;
+            }
+            afterNextRender(() => this.attach(), { injector: this.injector });
+        });
+        /* A bound that changed is a validity that changed, and the form is told. */
+        effect(() => {
+            this.min();
+            this.max();
+            this.isDateUnavailable();
+            this.onValidatorChangeFn();
+        });
+        this.destroyRef.onDestroy(() => this.release());
+    }
+    /* ── Forms ─────────────────────────────────────────────────────────── */
+    writeValue(value) {
+        this.ownValue.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+        this.formBound = true;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChangeFn = fn;
+    }
+    /**
+     * The rules no other validator can see, under the names `date-field` reports
+     * them with. `required` is left to Angular's own.
+     */
+    validate(control) {
+        const dates = asDates(control.value ?? null);
+        const min = this.min();
+        const max = this.max();
+        const outside = dates.find((date) => !isDateInRange(date, min, max));
+        if (outside !== undefined)
+            return { slottedDateRange: { min, max, actual: outside } };
+        const refused = dates.find((date) => this.isDateUnavailable()?.(date) === true);
+        if (refused !== undefined)
+            return { slottedDateUnavailable: { actual: refused } };
+        return null;
+    }
+    ngOnInit() {
+        this.ownOpen.set(this.defaultOpen());
+        this.ownValue.set(this.defaultValue() ?? null);
+        this.view.set(this.defaultView() ?? 'day');
+        /* A native reset restores the hidden input and tells nothing, so the
+           picker would keep the last date chosen in a form that had been reset.
+           The value returns to `defaultValue` through `valueChange`, reason
+           `programmatic`. 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)
+                    this.commit(this.defaultValue() ?? null, 'programmatic', event);
+            };
+            form.addEventListener('reset', onReset);
+            this.destroyRef.onDestroy(() => form.removeEventListener('reset', onReset));
+        }
+        /* `matchMedia` is absent in a server render and in some test environments,
+           and the popover is the right answer wherever it cannot be asked. */
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const query = window.matchMedia(SHEET_QUERY);
+        const read = () => this.sheet.set(query.matches);
+        read();
+        query.addEventListener('change', read);
+        this.destroyRef.onDestroy(() => query.removeEventListener('change', read));
+    }
+    /** Puts focus on the first segment of the field. */
+    focus() {
+        this.field?.focus();
+    }
+    openSurface(source) {
+        this.setOpen(true, 'keyboard', source);
+    }
+    closeSurface(source) {
+        this.setOpen(false, 'keyboard', source);
+    }
+    toggle(source) {
+        this.setOpen(!this.isOpen(), 'pointer', source);
+    }
+    onControlKeyDown(event) {
+        if (!this.editable())
+            return;
+        /* Angular Material records the platform note this inherits: 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);
+        }
+    }
+    /** 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();
+        }
+    }
+    onControlFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.element.contains(next))
+            return;
+        this.onTouchedFn();
+    }
+    onFieldValue(request) {
+        this.commit(request.value, request.reason, request.source);
+    }
+    onCalendarValue(request) {
+        this.commit(request.value, request.reason, request.source);
+        if (!this.closesOnSelect())
+            return;
+        this.setOpen(false, 'select', request.source);
+        this.triggerRef?.nativeElement.focus({ preventScroll: true });
+    }
+    commit(next, reason, source) {
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.held(),
+            equals: () => false,
+            onRequest: (request) => {
+                this.valueChange.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(next, reason, source);
+        if (cancelled)
+            return;
+        if (this.value() === undefined)
+            this.ownValue.set(next);
+        this.onChangeFn(next);
+    }
+    setOpen(next, reason, source) {
+        const state = createControllable({
+            controlled: this.open(),
+            initial: this.isOpen(),
+            onRequest: (request) => {
+                this.openChange.emit(request);
+                this.focusOnOpen = request.value && !request.cancelled;
+            },
+        });
+        if (state.request(next, reason, source))
+            this.ownOpen.set(next);
+    }
+    /** Places the layer and puts it in the single stack. */
+    attach() {
+        const layer = this.layer?.nativeElement;
+        if (layer === undefined)
+            return;
+        this.release();
+        if (!this.sheet()) {
+            const anchor = this.element.querySelector('[data-part="control"]') ?? this.element;
+            const [side, align] = this.resolvedPlacement().split('-');
+            this.positioner = createPositioner(anchor, layer, { align: align ?? 'center', side });
+            void this.positioner.update().then(() => this.positioned.set(true));
+        }
+        /* The dialog takes focus when it opens, on the day that holds the roving
+           tab stop: the chosen date, or today. */
+        if (this.focusOnOpen) {
+            this.focusOnOpen = false;
+            layer
+                .querySelector('[data-part="day"][tabindex="0"]')
+                ?.focus({ preventScroll: 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 listens in the capture
+                 * phase, so a handler on the calendar would already have lost the
+                 * surface by the time it ran; the decision is taken here, and the layer
+                 * is simply not asked to close.
+                 */
+                if (request.reason === 'escape' && this.view() !== 'day') {
+                    this.view.set(this.view() === 'year' ? 'month' : 'day');
+                    return;
+                }
+                this.setOpen(false, request.reason === 'escape' ? 'escape' : 'outsidePress', request.source);
+                if (request.reason === 'escape') {
+                    this.triggerRef?.nativeElement.focus({ preventScroll: true });
+                }
+            },
+        });
+    }
+    release() {
+        this.positioner?.destroy();
+        this.positioner = null;
+        this.dismissable?.destroy();
+        this.dismissable = null;
+        this.positioned.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlDatePicker, isStandalone: true, selector: "[slDatePicker]", 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 }, 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 }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange" }, host: { attributes: { "data-ui": "date-picker", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-calendar": "resolvedCalendar()", "attr.data-open": "isOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "resolvedRequired() === true ? '' : null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDatePicker), multi: true },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDatePicker), multi: true },
+        ], viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true }], exportAs: ["slDatePicker"], ngImport: i0, template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+      <div
+        slDateField
+        #field="slDateField"
+        [locale]="resolvedLocale()"
+        [timeZone]="resolvedTimeZone()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [yearPivot]="yearPivot()"
+        [calendar]="resolvedCalendar()"
+        [size]="resolvedSize()"
+        [variant]="resolvedVariant()"
+        [min]="min()"
+        [max]="max()"
+        [isDateUnavailable]="isDateUnavailable()"
+        [clearable]="clearable()"
+        [name]="name()"
+        [disabled]="resolvedDisabled()"
+        [readOnly]="readOnly()"
+        [invalid]="invalid()"
+        [required]="required()"
+        [value]="singleValue()"
+        (valueChange)="onFieldValue($event)"
+        (focusout)="onControlFocusOut($event)"
+      >
+        <span slDateFieldEnd>
+          <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>
+        </span>
+      </div>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="date-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)"
+        >
+          <ng-content select="[slDatePickerPresets]" />
+          <div
+            slCalendar
+            [locale]="resolvedLocale()"
+            [timeZone]="resolvedTimeZone()"
+            [firstDayOfWeek]="firstDayOfWeek()"
+            [min]="min()"
+            [max]="max()"
+            [isDateUnavailable]="isDateUnavailable()"
+            [selectionMode]="selectionMode()"
+            [months]="months()"
+            [weekNumbers]="weekNumbers()"
+            [fixedWeeks]="fixedWeeks()"
+            [readOnly]="readOnly()"
+            [value]="held()"
+            [view]="view()"
+            (viewChange)="view.set($event)"
+            (valueChange)="onCalendarValue($event)"
+          ></div>
+          <ng-content select="[slDatePickerFooter]" />
+        </div>
+      </div>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=date-picker][data-part=root]{display:block;inline-size:100%}[data-ui=date-picker] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui=date-picker][data-part=root][data-size=sm] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui=date-picker][data-part=root][data-size=lg] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui=date-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-date-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=date-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-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=date-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=date-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-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-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=date-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-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-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=date-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=date-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-date-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-picker-enter-up}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-picker-fade}@keyframes slotted-date-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=date-picker][data-part=positioner],[data-ui=date-picker][data-part=positioner][data-side=top],[data-ui=date-picker][data-part=positioner][data-side=left],[data-ui=date-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-picker-fade}}[data-ui=date-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=date-picker] [data-part=content]{background-color:var(--slotted-date-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-date-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"calendar\" \"footer\";grid-template-columns:auto;padding:var(--slotted-date-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=date-picker] [data-part=content]:has([data-part=presets]){grid-template-areas:\"presets calendar\" \"footer footer\";grid-template-columns:auto auto}[data-ui=date-picker] [data-part=content]>[data-ui=calendar]{grid-area:calendar}[data-ui=date-picker] [data-part=presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);grid-area:presets;padding-inline-end:var(--slotted-space-5, .75rem)}[data-ui=date-picker] [data-part=footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-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-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=date-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=date-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:100%;justify-content:center}[data-ui=date-picker][data-part=positioner][data-presentation=sheet] [data-part=presets]{border-inline-end:0;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-4, .5rem);padding-inline-end:0}}}\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: "directive", type: SlDateFieldEnd, selector: "[slDateFieldEnd]", exportAs: ["slDateFieldEnd"] }, { 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: SlDatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: '[slDatePicker]', standalone: true, exportAs: 'slDatePicker', imports: [SlCalendar, SlDateField, SlDateFieldEnd, SlGlyph, SlIcon], template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+      <div
+        slDateField
+        #field="slDateField"
+        [locale]="resolvedLocale()"
+        [timeZone]="resolvedTimeZone()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [yearPivot]="yearPivot()"
+        [calendar]="resolvedCalendar()"
+        [size]="resolvedSize()"
+        [variant]="resolvedVariant()"
+        [min]="min()"
+        [max]="max()"
+        [isDateUnavailable]="isDateUnavailable()"
+        [clearable]="clearable()"
+        [name]="name()"
+        [disabled]="resolvedDisabled()"
+        [readOnly]="readOnly()"
+        [invalid]="invalid()"
+        [required]="required()"
+        [value]="singleValue()"
+        (valueChange)="onFieldValue($event)"
+        (focusout)="onControlFocusOut($event)"
+      >
+        <span slDateFieldEnd>
+          <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>
+        </span>
+      </div>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="date-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)"
+        >
+          <ng-content select="[slDatePickerPresets]" />
+          <div
+            slCalendar
+            [locale]="resolvedLocale()"
+            [timeZone]="resolvedTimeZone()"
+            [firstDayOfWeek]="firstDayOfWeek()"
+            [min]="min()"
+            [max]="max()"
+            [isDateUnavailable]="isDateUnavailable()"
+            [selectionMode]="selectionMode()"
+            [months]="months()"
+            [weekNumbers]="weekNumbers()"
+            [fixedWeeks]="fixedWeeks()"
+            [readOnly]="readOnly()"
+            [value]="held()"
+            [view]="view()"
+            (viewChange)="view.set($event)"
+            (valueChange)="onCalendarValue($event)"
+          ></div>
+          <ng-content select="[slDatePickerFooter]" />
+        </div>
+      </div>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlDatePicker), multi: true },
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SlDatePicker), multi: true },
+                    ], host: {
+                        'data-ui': 'date-picker',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-calendar]': 'resolvedCalendar()',
+                        '[attr.data-open]': "isOpen() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
+                        '[attr.data-required]': "resolvedRequired() === true ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=date-picker][data-part=root]{display:block;inline-size:100%}[data-ui=date-picker] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-md, 16px);--_height: var(--slotted-control-height-md, 34px);align-items:center;display:flex;inline-size:100%;min-inline-size:0;position:relative}[data-ui=date-picker][data-part=root][data-size=sm] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_height: var(--slotted-control-height-sm, 30px)}[data-ui=date-picker][data-part=root][data-size=lg] [data-part=control]{--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_height: var(--slotted-control-height-lg, 38px)}[data-ui=date-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );border:0;border-radius:var(--slotted-date-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-date-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-date-picker-trigger-size, min( calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), calc( var(--_height) - var(--slotted-control-border-width, 1px) * 2 - var(--slotted-space-2, .25rem) ) ) );justify-content:center;padding:0;position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-tap-highlight-color:transparent}[data-ui=date-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-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=date-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=date-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=date-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-date-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=date-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-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-date-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=date-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=date-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-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=date-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=date-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-date-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-date-picker-enter-up}[data-ui=date-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-date-picker-fade}@keyframes slotted-date-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-date-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-date-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=date-picker][data-part=positioner],[data-ui=date-picker][data-part=positioner][data-side=top],[data-ui=date-picker][data-part=positioner][data-side=left],[data-ui=date-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=date-picker][data-part=positioner][data-open][data-positioned],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=date-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-date-picker-fade}}[data-ui=date-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=date-picker] [data-part=content]{background-color:var(--slotted-date-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-date-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-date-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-date-picker-content-color, var(--slotted-text, CanvasText));display:grid;gap:var(--slotted-space-5, .75rem);grid-template-areas:\"calendar\" \"footer\";grid-template-columns:auto;padding:var(--slotted-date-picker-content-padding, var(--slotted-space-5, .75rem));pointer-events:auto}[data-ui=date-picker] [data-part=content]:has([data-part=presets]){grid-template-areas:\"presets calendar\" \"footer footer\";grid-template-columns:auto auto}[data-ui=date-picker] [data-part=content]>[data-ui=calendar]{grid-area:calendar}[data-ui=date-picker] [data-part=presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;flex-direction:column;gap:var(--slotted-space-2, .25rem);grid-area:presets;padding-inline-end:var(--slotted-space-5, .75rem)}[data-ui=date-picker] [data-part=footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-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-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=date-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=date-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:100%;justify-content:center}[data-ui=date-picker][data-part=positioner][data-presentation=sheet] [data-part=presets]{border-inline-end:0;border-block-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-date-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-4, .5rem);padding-inline-end:0}}}\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 }] }], 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 }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], layer: [{
+                type: ViewChild,
+                args: ['layer']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], field: [{
+                type: ViewChild,
+                args: ['field']
+            }] } });
+
+/**
+ * The consumer's own shortcuts, in a column beside the grid.
+ *
+ * This family ships no list of them: "last 7 days" is a business calendar and a
+ * library that guessed at one would be guessing at a fiscal year. What it ships
+ * is the column they stand in.
+ */
+class SlDatePickerPresets {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerPresets, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDatePickerPresets, isStandalone: true, selector: "[slDatePickerPresets]", host: { attributes: { "data-part": "presets" } }, exportAs: ["slDatePickerPresets"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerPresets, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDatePickerPresets]',
+                    standalone: true,
+                    exportAs: 'slDatePickerPresets',
+                    host: { 'data-part': 'presets' },
+                }]
+        }] });
+/** The consumer's own actions, under whatever the surface is holding. */
+class SlDatePickerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlDatePickerFooter, isStandalone: true, selector: "[slDatePickerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slDatePickerFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlDatePickerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slDatePickerFooter]',
+                    standalone: true,
+                    exportAs: 'slDatePickerFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATE_PICKER_DEFAULTS, SlDatePicker, SlDatePickerFooter, SlDatePickerPresets, injectDatePickerDefaults, provideDatePickerDefaults };
+//# sourceMappingURL=slotted-angular-date-picker.mjs.map