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

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

@@ -0,0 +1,856 @@
+import { isTimeInRange, createTimeFormat, timeList, isTruncated, isSameTime, nowIn, nearestIndex, hourJump } from '@slotted/core/date';
+import { createDismissableLayer } from '@slotted/core/dismissable-layer';
+import { createPositioner } from '@slotted/core/positioner';
+import { timePickerMessages } from '@slotted/core/i18n';
+import { createControllable } from '@slotted/core/state';
+import { createTypeahead, isPrintable } from '@slotted/core/typeahead';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Directive, input, booleanAttribute, numberAttribute, output, ElementRef, Injector, DestroyRef, signal, computed, effect, afterNextRender, untracked, TemplateRef, ViewChild, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { injectLocale, injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlField } from '@slotted/angular/field';
+import { SlTimeField, SlTimeFieldEnd } from '@slotted/angular/time-field';
+
+/**
+ * A quarter of an hour, which is the slot a booking flow asks in and the step
+ * every surveyed panel defaults to within a factor of two.
+ */
+const TIME_PICKER_STEP = 900;
+/**
+ * How long the list may get: a whole day at a one-minute step, which is the
+ * finest whole-day list any surveyed implementation offers. A day at a
+ * one-second step is 86 400 rows and a configuration mistake rather than a
+ * list; it is cut rather than handed to the DOM.
+ */
+const TIME_PICKER_MAX_OPTIONS = 1440;
+const FALLBACK = {
+    closeOnSelect: 'auto',
+    granularity: 'minute',
+    hourCycle: undefined,
+    maxOptions: TIME_PICKER_MAX_OPTIONS,
+    placement: 'bottom-start',
+    size: 'md',
+    step: TIME_PICKER_STEP,
+    timeZone: undefined,
+    unavailableOptions: 'disable',
+    variant: 'outline',
+};
+const TIME_PICKER_DEFAULTS = new InjectionToken('slotted time picker defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once what step its panels offer, rather than repeating
+ * the same inputs on every picker in a product. A picker that states any of
+ * them itself still wins. The locale and the words come from the language in
+ * force (`provideSlotted`).
+ *
+ * `step` is the one worth setting first: a product books in twenty-minute slots
+ * and a quarter-hour default puts a panel of the wrong times in front of every
+ * reader.
+ */
+function provideTimePickerDefaults(defaults) {
+    return {
+        provide: TIME_PICKER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a time picker renders as here, before it states anything of its own. */
+function injectTimePickerDefaults() {
+    return inject(TIME_PICKER_DEFAULTS);
+}
+
+/**
+ * What one row of the panel draws.
+ *
+ * The row is the family's — its role, its states, its keyboard and its target
+ * size — and what is written inside it is the consumer's. It is a template
+ * rather than a projected slot because it is re-rendered once per option, which
+ * is exactly the case `references/frameworks.md` names `NgTemplateOutlet` for.
+ *
+ * The context carries the time as `$implicit`, plus `label`, `selected`,
+ * `current` and `unavailable`.
+ */
+class SlTimePickerOption {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTimePickerOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTimePickerOption, isStandalone: true, selector: "[slTimePickerOption]", exportAs: ["slTimePickerOption"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTimePickerOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTimePickerOption]',
+                    standalone: true,
+                    exportAs: 'slTimePickerOption',
+                }]
+        }] });
+
+/**
+ * Below this width, on a finger, the surface is a sheet rather than a popover.
+ * §2.7 of `docs/component-features.md` asks for it by name.
+ */
+const SHEET_QUERY = '(max-width: 480px) and (pointer: coarse)';
+/** The surface needs an identifier the trigger can point `aria-controls` at. */
+let sequence = 0;
+/**
+ * A time field, a trigger, and a list of times behind them.
+ *
+ * **It composes `time-field` and redraws none of it.** The field keeps its own
+ * `data-ui`; this family owns the box the positioner measures, the trigger
+ * inside the field's end slot, and the layer the list stands on.
+ *
+ * **One panel shape, at every step.** A listbox of whole times. A column per
+ * unit was drawn and withdrawn — the field types every second, and `options`
+ * states any set of times a step cannot describe.
+ *
+ * **The panel never takes the field away.** `Alt`+`ArrowDown` opens it and
+ * leaves focus in the field, so the segments keep every key they had.
+ */
+class SlTimePicker {
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** Present means the consumer owns whether the surface is showing. */
+    open = input(undefined, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Where the reader is in the list. Present means the consumer owns it. */
+    highlightedValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightedValue" }] : /* istanbul ignore next */ []));
+    defaultHighlightedValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultHighlightedValue" }] : /* 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 */ []));
+    isTimeUnavailable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTimeUnavailable" }] : /* istanbul ignore next */ []));
+    /** Seconds between two offered times. Ignored when `options` states the list. */
+    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    /**
+     * The times to offer, stated rather than stepped. A step describes a regular
+     * list and a great many real ones are not: a clinic open at 09:00, 09:20 and
+     * 13:45, a broadcast schedule, a set of second-level marks.
+     */
+    options = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    maxOptions = input(undefined, { ...(ngDevMode ? { debugName: "maxOptions" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined || value === null ? undefined : numberAttribute(value) });
+    unavailableOptions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unavailableOptions" }] : /* istanbul ignore next */ []));
+    /** BCP 47. Unset, the language in force (`provideSlotted`) decides. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    timeZone = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []));
+    hourCycle = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    granularity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+    referenceTime = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referenceTime" }] : /* 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 });
+    relative = input(undefined, { ...(ngDevMode ? { debugName: "relative" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * trigger's two names, the now control, and what the panel says when it is
+     * empty or cut short.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    openChange = output();
+    highlightedValueChange = output();
+    /**
+     * What one row draws. The row is the family's — its role, its states and its
+     * keyboard — and what is written inside it is the consumer's. A template
+     * rather than a slot, because it is re-rendered once per option.
+     */
+    optionTemplate;
+    layer;
+    triggerRef;
+    listRef;
+    field;
+    element = inject(ElementRef).nativeElement;
+    defaults = injectTimePickerDefaults();
+    appLocale = injectLocale();
+    /** The family's words in the language in force, with this picker's `messages` laid over them. */
+    t = injectMessages(timePickerMessages, this.messages);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    enclosing = inject(SlField, { optional: true });
+    contentId = `sl-time-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 */ []));
+    ownHighlight = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownHighlight" }] : /* istanbul ignore next */ []));
+    clock = signal({ hour: 12, minute: 0, second: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clock" }] : /* 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 */ []));
+    positioner = null;
+    dismissable = null;
+    typeahead = null;
+    isOpen = computed(() => this.open() ?? this.ownOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    held = computed(() => this.value() ?? this.ownValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    resolvedLocale = computed(() => this.locale() ?? this.appLocale(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    resolvedTimeZone = computed(() => this.timeZone() ?? this.defaults.timeZone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTimeZone" }] : /* istanbul ignore next */ []));
+    resolvedHourCycle = computed(() => this.hourCycle() ?? this.defaults.hourCycle, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHourCycle" }] : /* istanbul ignore next */ []));
+    resolvedGranularity = computed(() => this.granularity() ?? this.defaults.granularity, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedGranularity" }] : /* istanbul ignore next */ []));
+    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.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 time
+     * 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 time = this.held();
+        if (time !== null && !isTimeInRange(time, this.min(), this.max()))
+            return true;
+        if (time !== null && this.isTimeUnavailable()?.(time) === true)
+            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 */ []));
+    format = computed(() => createTimeFormat({
+        granularity: this.resolvedGranularity(),
+        hourCycle: this.resolvedHourCycle(),
+        locale: this.resolvedLocale(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    anchor = computed(() => this.referenceTime() ?? this.clock(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    listOptions = computed(() => ({
+        isTimeUnavailable: this.isTimeUnavailable(),
+        max: this.max(),
+        maxOptions: this.maxOptions() ?? this.defaults.maxOptions,
+        min: this.min(),
+        options: this.options(),
+        step: this.step() ?? this.defaults.step,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listOptions" }] : /* istanbul ignore next */ []));
+    list = computed(() => {
+        const built = timeList(this.listOptions());
+        const hidden = (this.unavailableOptions() ?? this.defaults.unavailableOptions) === 'hide';
+        return hidden ? built.filter((option) => !option.unavailable) : built;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+    truncated = computed(() => isTruncated(this.listOptions()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "truncated" }] : /* istanbul ignore next */ []));
+    labels = computed(() => this.list().map((option) => this.format().format(option.time)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    highlight = computed(() => this.highlightedValue() ?? this.ownHighlight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+    highlightIndex = computed(() => {
+        const at = this.highlight();
+        if (at === null)
+            return -1;
+        return this.list().findIndex((option) => isSameTime(option.time, at));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightIndex" }] : /* 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 = this.held();
+        if (chosen === null)
+            return this.t('choose');
+        return this.t('change', { time: this.format().describe(chosen) });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    closesOnSelect = computed(() => (this.closeOnSelect() ?? this.defaults.closeOnSelect) !== 'never', /* @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(() => {
+            if (!this.isOpen()) {
+                this.release();
+                return;
+            }
+            afterNextRender(() => this.attach(), { injector: this.injector });
+        });
+        /**
+         * The highlight lands where the panel opens, and follows the list under it.
+         *
+         * Everything but the two signals it should answer is read untracked. Left
+         * tracked, `setHighlight` reads the highlight itself, the effect took a
+         * dependency on it, and every arrow press re-ran the effect and snapped the
+         * reader back to where the panel had opened — which is what the Angular
+         * spec showed as a highlight that would not move.
+         */
+        effect(() => {
+            if (!this.isOpen())
+                return;
+            const list = this.list();
+            untracked(() => {
+                const index = this.openingIndex();
+                const option = list[index];
+                if (index >= 0 && option !== undefined) {
+                    this.setHighlight(option.time, 'programmatic', undefined);
+                }
+            });
+        });
+        this.destroyRef.onDestroy(() => this.release());
+    }
+    ngOnInit() {
+        this.ownOpen.set(this.defaultOpen());
+        this.ownValue.set(this.defaultValue() ?? null);
+        this.ownHighlight.set(this.defaultHighlightedValue() ?? null);
+        this.clock.set(nowIn(this.resolvedTimeZone()));
+        this.typeahead = createTypeahead({ locale: () => this.resolvedLocale() });
+        this.destroyRef.onDestroy(() => this.typeahead?.destroy());
+        /* `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, 'programmatic', source);
+    }
+    closeSurface(source) {
+        this.setOpen(false, 'programmatic', source);
+    }
+    /* ── What the template reads ─────────────────────────────────────────── */
+    labelFor(option) {
+        return this.format().format(option.time);
+    }
+    isSelected(option) {
+        return isSameTime(option.time, this.held());
+    }
+    contextFor(option, index) {
+        return {
+            $implicit: option.time,
+            current: index === this.highlightIndex(),
+            label: this.labels()[index] ?? '',
+            selected: this.isSelected(option),
+            unavailable: option.unavailable,
+        };
+    }
+    /* ── Opening, choosing and closing ───────────────────────────────────── */
+    toggle(source) {
+        const next = !this.isOpen();
+        this.setOpen(next, 'pointer', source);
+        if (next)
+            this.enterList();
+    }
+    chooseNow(source) {
+        this.commit(this.anchor(), 'select', source);
+        if (this.closesOnSelect())
+            this.close(source);
+    }
+    select(option, source) {
+        if (option.unavailable || !this.editable())
+            return;
+        this.commit(option.time, 'select', source);
+        this.setHighlight(option.time, 'pointer', source);
+        if (this.closesOnSelect())
+            this.close(source);
+    }
+    close(source) {
+        this.setOpen(false, 'select', source);
+        this.triggerRef?.nativeElement.focus({ preventScroll: true });
+    }
+    /**
+     * Where the panel opens: on the chosen time, on the nearest step to now when
+     * nothing is chosen, and on the first available option when that is refused.
+     */
+    openingIndex() {
+        const list = this.list();
+        if (list.length === 0)
+            return -1;
+        const near = nearestIndex(list, this.held() ?? this.anchor());
+        if (near >= 0 && list[near]?.unavailable !== true)
+            return near;
+        const first = list.findIndex((option) => !option.unavailable);
+        return first >= 0 ? first : 0;
+    }
+    enterList() {
+        afterNextRender(() => {
+            const index = this.highlightIndex() >= 0 ? this.highlightIndex() : this.openingIndex();
+            if (index < 0)
+                return;
+            const option = this.list()[index];
+            if (option !== undefined)
+                this.setHighlight(option.time, 'keyboard', undefined);
+            this.focusOption(index);
+        }, { injector: this.injector });
+    }
+    focusOption(index) {
+        const rows = this.listRef?.nativeElement.querySelectorAll('[data-part="option"]');
+        const row = rows?.[index];
+        row?.focus();
+        /* jsdom does not implement `scrollIntoView`, and a test environment without
+           a scroller is not a reason for the family to throw. */
+        row?.scrollIntoView?.({ block: 'nearest' });
+    }
+    /* ── The keyboard ────────────────────────────────────────────────────── */
+    onControlKeyDown(event) {
+        if (!this.editable())
+            return;
+        /* ChromeOS turns the chord into `PageDown` before the browser sees it,
+           which Angular Material records for its own input — so the trigger button
+           is always drawn and this is only a shortcut. Focus stays in the field. */
+        if (event.altKey && event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.setOpen(true, 'keyboard', event);
+        }
+    }
+    onTriggerKeyDown(event) {
+        if (!this.editable())
+            return;
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        if (!this.isOpen())
+            this.setOpen(true, 'keyboard', event);
+        this.enterList();
+    }
+    onListKeyDown(event) {
+        const list = this.list();
+        const at = this.highlightIndex() >= 0 ? this.highlightIndex() : 0;
+        const move = (index) => {
+            event.preventDefault();
+            const clamped = Math.max(0, Math.min(list.length - 1, index));
+            const option = list[clamped];
+            if (option === undefined)
+                return;
+            this.setHighlight(option.time, 'keyboard', event);
+            this.focusOption(clamped);
+        };
+        switch (event.key) {
+            case 'ArrowDown':
+                move(at + 1);
+                return;
+            case 'ArrowUp':
+                move(at - 1);
+                return;
+            case 'Home':
+                move(0);
+                return;
+            case 'End':
+                move(list.length - 1);
+                return;
+            case 'PageDown':
+                move(hourJump(list, at, 1));
+                return;
+            case 'PageUp':
+                move(hourJump(list, at, -1));
+                return;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const option = list[at];
+                if (option !== undefined)
+                    this.select(option, event);
+                return;
+            }
+            default:
+                break;
+        }
+        /* Type-ahead, which the pattern recommends above seven options and this
+           list passes at every step it offers. */
+        const typeahead = this.typeahead;
+        if (typeahead === null)
+            return;
+        if (!isPrintable(event.key, typeahead.query.length > 0))
+            return;
+        const found = typeahead.match(event.key, this.labels(), at);
+        if (found < 0)
+            return;
+        move(found);
+    }
+    /* ── The machinery ───────────────────────────────────────────────────── */
+    onFieldValue(request) {
+        this.commit(request.value, request.reason, request.source, request);
+    }
+    commit(next, reason, source, carried) {
+        let cancelled = false;
+        const state = createControllable({
+            controlled: this.value(),
+            initial: this.held(),
+            equals: isSameTime,
+            onRequest: (request) => {
+                this.valueChange.emit(carried === undefined
+                    ? request
+                    : { ...request, crossesMidnight: carried.crossesMidnight, segments: carried.segments });
+                cancelled = request.cancelled;
+            },
+        });
+        const moved = state.request(next, reason, source);
+        if (!cancelled && moved && this.value() === undefined)
+            this.ownValue.set(next);
+    }
+    setHighlight(next, reason, source) {
+        const state = createControllable({
+            controlled: this.highlightedValue(),
+            initial: this.highlight(),
+            equals: isSameTime,
+            onRequest: (request) => this.highlightedValueChange.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.ownHighlight.set(next);
+    }
+    setOpen(next, reason, source) {
+        const state = createControllable({
+            controlled: this.open(),
+            initial: this.isOpen(),
+            onRequest: (request) => this.openChange.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.ownOpen.set(next);
+    }
+    /** Places the layer and puts it in the single stack. */
+    attach() {
+        const layer = this.layer?.nativeElement;
+        if (layer === undefined)
+            return;
+        this.release();
+        if (!this.sheet()) {
+            const anchor = this.element.querySelector('[data-part="control"]') ?? this.element;
+            const [side, align] = this.resolvedPlacement().split('-');
+            this.positioner = createPositioner(anchor, layer, { align: align ?? 'center', side });
+            void this.positioner.update().then(() => this.positioned.set(true));
+        }
+        const trigger = this.triggerRef?.nativeElement;
+        this.dismissable = createDismissableLayer(layer, {
+            branches: trigger === undefined ? [] : [trigger],
+            escape: true,
+            focusOutside: false,
+            modal: false,
+            outsidePress: true,
+            scrollLock: false,
+            onDismiss: (request) => {
+                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: SlTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTimePicker, isStandalone: true, selector: "[slTimePicker]", 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 }, highlightedValue: { classPropertyName: "highlightedValue", publicName: "highlightedValue", isSignal: true, isRequired: false, transformFunction: null }, defaultHighlightedValue: { classPropertyName: "defaultHighlightedValue", publicName: "defaultHighlightedValue", 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 }, isTimeUnavailable: { classPropertyName: "isTimeUnavailable", publicName: "isTimeUnavailable", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, maxOptions: { classPropertyName: "maxOptions", publicName: "maxOptions", isSignal: true, isRequired: false, transformFunction: null }, unavailableOptions: { classPropertyName: "unavailableOptions", publicName: "unavailableOptions", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, referenceTime: { classPropertyName: "referenceTime", publicName: "referenceTime", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, 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", highlightedValueChange: "highlightedValueChange" }, host: { attributes: { "data-ui": "time-picker", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-granularity": "resolvedGranularity()", "attr.data-open": "isOpen() ? '' : null", "attr.data-disabled": "resolvedDisabled() === true ? '' : null", "attr.data-invalid": "resolvedInvalid() === true ? '' : null", "attr.data-readonly": "resolvedReadOnly() === true ? '' : null", "attr.data-required": "resolvedRequired() === true ? '' : null" } }, queries: [{ propertyName: "optionTemplate", first: true, predicate: SlTimePickerOption, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "layer", first: true, predicate: ["layer"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "listRef", first: true, predicate: ["rows"], descendants: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true }], exportAs: ["slTimePicker"], ngImport: i0, template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+      <div
+        slTimeField
+        #field="slTimeField"
+        [locale]="resolvedLocale()"
+        [timeZone]="resolvedTimeZone()"
+        [hourCycle]="resolvedHourCycle()"
+        [granularity]="resolvedGranularity()"
+        [referenceTime]="referenceTime()"
+        [size]="resolvedSize()"
+        [variant]="resolvedVariant()"
+        [min]="min()"
+        [max]="max()"
+        [isTimeUnavailable]="isTimeUnavailable()"
+        [clearable]="clearable()"
+        [relative]="relative()"
+        [name]="name()"
+        [disabled]="disabled()"
+        [readOnly]="readOnly()"
+        [required]="required()"
+        [value]="held()"
+        (valueChange)="onFieldValue($event)"
+      >
+        <span slTimeFieldEnd>
+          <button
+            #trigger
+            data-part="trigger"
+            type="button"
+            aria-haspopup="listbox"
+            [attr.aria-label]="triggerLabel()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="isOpen() ? contentId : null"
+            [disabled]="!editable()"
+            (click)="toggle($event)"
+            (keydown)="onTriggerKeyDown($event)"
+          >
+            <span slIcon><svg slGlyph name="clock"></svg></span>
+          </button>
+        </span>
+      </div>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="time-picker"
+        data-part="positioner"
+        data-open
+        [attr.data-presentation]="sheet() ? 'sheet' : 'popover'"
+        [attr.data-positioned]="positioned() ? '' : null"
+      >
+        <div
+          data-part="content"
+          role="listbox"
+          [attr.id]="contentId"
+          [attr.aria-label]="triggerLabel()"
+          [attr.aria-description]="truncated() ? t('truncated') : null"
+        >
+          <ng-content select="[slTimePickerPresets]" />
+          <div data-part="head">
+            <button data-part="now" type="button" (click)="chooseNow($event)">
+              {{ t('now') }}
+            </button>
+          </div>
+          @if (list().length === 0) {
+            <div data-part="empty">{{ t('empty') }}</div>
+          } @else {
+            <div
+              #rows
+              data-part="list"
+              [attr.data-truncated]="truncated() ? '' : null"
+              (keydown)="onListKeyDown($event)"
+            >
+              @for (option of list(); track $index) {
+                <div
+                  data-part="option"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option)"
+                  [attr.aria-disabled]="option.unavailable ? 'true' : null"
+                  [attr.data-disabled]="option.unavailable ? '' : null"
+                  [attr.data-selected]="isSelected(option) ? '' : null"
+                  [attr.data-current]="$index === highlightIndex() ? '' : null"
+                  [tabindex]="$index === highlightIndex() ? 0 : -1"
+                  (click)="select(option, $event)"
+                >
+                  @if (optionTemplate) {
+                    <ng-container
+                      [ngTemplateOutlet]="optionTemplate"
+                      [ngTemplateOutletContext]="contextFor(option, $index)"
+                    />
+                  } @else {
+                    {{ labelFor(option) }}
+                  }
+                </div>
+              }
+            </div>
+          }
+          <ng-content select="[slTimePickerFooter]" />
+        </div>
+      </div>
+    }`, isInline: true, styles: ["@layer slotted.components{[data-ui=time-picker][data-part=root]{display:block;inline-size:100%}[data-ui=time-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=time-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=time-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=time-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-time-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-time-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-time-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-time-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=time-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=time-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=time-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=time-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-time-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=time-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-time-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=time-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=time-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-time-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=time-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=time-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=time-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=time-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=time-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=time-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-time-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-time-picker-enter-up}[data-ui=time-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-time-picker-fade}@keyframes slotted-time-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-time-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-time-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=time-picker][data-part=positioner],[data-ui=time-picker][data-part=positioner][data-side=top],[data-ui=time-picker][data-part=positioner][data-side=left],[data-ui=time-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=time-picker][data-part=positioner][data-open][data-positioned],[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-time-picker-fade}}[data-ui=time-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=time-picker] [data-part=content]{background-color:var(--slotted-time-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-time-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-time-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-time-picker-content-color, var(--slotted-text, CanvasText));--_row: max(var(--slotted-target-min, 24px), var(--slotted-control-height-sm, 30px));--_row-pitch: calc(var(--_row) + var(--slotted-space-1, .125rem));display:grid;gap:var(--slotted-space-2, .25rem);grid-template-areas:\"head\" \"list\" \"footer\";grid-template-columns:minmax(0,1fr);inline-size:max(var(--slotted-time-picker-content-min-inline-size, 11rem),min(var(--slotted-positioner-anchor-width, 11rem),20rem));padding:var(--slotted-time-picker-content-padding, var(--slotted-space-3, .375rem));pointer-events:auto}[data-ui=time-picker] [data-part=content]:has([data-part=presets]){grid-template-areas:\"presets head\" \"presets list\" \"footer footer\";grid-template-columns:auto minmax(9rem,1fr);inline-size:auto;max-inline-size:min(28rem,var(--slotted-positioner-available-width, 28rem))}[data-ui=time-picker] [data-part=head]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);grid-area:head;justify-content:flex-start;padding-block-end:var(--slotted-space-2, .25rem)}[data-ui=time-picker] [data-part=now]{appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-time-picker-option-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-time-picker-now-color, var(--slotted-tone-accent-text));cursor:pointer;font:inherit;min-block-size:var(--slotted-target-min, 24px);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=time-picker] [data-part=now]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-time-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=time-picker] [data-part=now]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=time-picker] [data-part=presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-time-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-3, .375rem)}[data-ui=time-picker] [data-part=list]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:list;max-block-size:var(--slotted-time-picker-list-block-size, calc(var(--_row-pitch) * 8.5));min-inline-size:0;overflow-y:auto;scroll-padding-block:var(--slotted-space-2, .25rem)}[data-ui=time-picker] [data-part=option]{align-items:center;background-color:transparent;border-radius:var(--slotted-time-picker-option-radius, var(--slotted-radius-sm, 4px));color:inherit;cursor:pointer;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);min-block-size:var(--_row);padding-inline:var(--slotted-space-3, .375rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=time-picker] [data-part=option]:hover:not([data-disabled]):not([data-selected]):not([data-current]){background-color:var( --slotted-time-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=time-picker] [data-part=option][data-current]:not([data-selected]){background-color:var( --slotted-time-picker-option-current-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=time-picker] [data-part=option]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=time-picker] [data-part=option][data-selected]{background-color:var( --slotted-time-picker-option-selected-background, var(--slotted-tone-accent-solid) );color:var(--slotted-time-picker-option-selected-color, var(--slotted-tone-accent-on-solid))}[data-ui=time-picker] [data-part=option][data-selected]:hover:not([data-disabled]){background-color:var( --slotted-time-picker-option-selected-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=time-picker] [data-part=option][data-disabled]{background-color:transparent;color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=time-picker] [data-part=empty]{align-items:center;color:var(--slotted-time-picker-label-color, var(--slotted-text-muted, GrayText));display:flex;grid-area:list;justify-content:center;min-block-size:calc(var(--_row) * 2);padding:var(--slotted-space-4, .5rem);text-align:center;text-wrap:balance}[data-ui=time-picker] [data-part=footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-3, .375rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=time-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=time-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=time-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-time-picker-sheet-inline-size, 100%)}[data-ui=time-picker][data-part=positioner][data-presentation=sheet] [data-part=list]{max-block-size:50vh}[data-ui=time-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-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-3, .375rem);padding-inline-end:0}}@media(forced-colors:active){[data-ui=time-picker] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=time-picker] [data-part=option][data-current]:not([data-selected]){outline:var(--slotted-focus-ring-width, 2px) solid Highlight;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlTimeField, selector: "[slTimeField]", inputs: ["value", "defaultValue", "min", "max", "isTimeUnavailable", "locale", "timeZone", "hourCycle", "granularity", "referenceTime", "size", "variant", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "messages", "name", "label"], outputs: ["valueChange"], exportAs: ["slTimeField"] }, { kind: "directive", type: SlTimeFieldEnd, selector: "[slTimeFieldEnd]", exportAs: ["slTimeFieldEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: '[slTimePicker]', standalone: true, exportAs: 'slTimePicker', imports: [NgTemplateOutlet, SlGlyph, SlIcon, SlTimeField, SlTimeFieldEnd], template: `<div data-part="control" (keydown)="onControlKeyDown($event)">
+      <div
+        slTimeField
+        #field="slTimeField"
+        [locale]="resolvedLocale()"
+        [timeZone]="resolvedTimeZone()"
+        [hourCycle]="resolvedHourCycle()"
+        [granularity]="resolvedGranularity()"
+        [referenceTime]="referenceTime()"
+        [size]="resolvedSize()"
+        [variant]="resolvedVariant()"
+        [min]="min()"
+        [max]="max()"
+        [isTimeUnavailable]="isTimeUnavailable()"
+        [clearable]="clearable()"
+        [relative]="relative()"
+        [name]="name()"
+        [disabled]="disabled()"
+        [readOnly]="readOnly()"
+        [required]="required()"
+        [value]="held()"
+        (valueChange)="onFieldValue($event)"
+      >
+        <span slTimeFieldEnd>
+          <button
+            #trigger
+            data-part="trigger"
+            type="button"
+            aria-haspopup="listbox"
+            [attr.aria-label]="triggerLabel()"
+            [attr.aria-expanded]="isOpen()"
+            [attr.aria-controls]="isOpen() ? contentId : null"
+            [disabled]="!editable()"
+            (click)="toggle($event)"
+            (keydown)="onTriggerKeyDown($event)"
+          >
+            <span slIcon><svg slGlyph name="clock"></svg></span>
+          </button>
+        </span>
+      </div>
+    </div>
+
+    @if (isOpen()) {
+      <div
+        #layer
+        data-ui="time-picker"
+        data-part="positioner"
+        data-open
+        [attr.data-presentation]="sheet() ? 'sheet' : 'popover'"
+        [attr.data-positioned]="positioned() ? '' : null"
+      >
+        <div
+          data-part="content"
+          role="listbox"
+          [attr.id]="contentId"
+          [attr.aria-label]="triggerLabel()"
+          [attr.aria-description]="truncated() ? t('truncated') : null"
+        >
+          <ng-content select="[slTimePickerPresets]" />
+          <div data-part="head">
+            <button data-part="now" type="button" (click)="chooseNow($event)">
+              {{ t('now') }}
+            </button>
+          </div>
+          @if (list().length === 0) {
+            <div data-part="empty">{{ t('empty') }}</div>
+          } @else {
+            <div
+              #rows
+              data-part="list"
+              [attr.data-truncated]="truncated() ? '' : null"
+              (keydown)="onListKeyDown($event)"
+            >
+              @for (option of list(); track $index) {
+                <div
+                  data-part="option"
+                  role="option"
+                  [attr.aria-selected]="isSelected(option)"
+                  [attr.aria-disabled]="option.unavailable ? 'true' : null"
+                  [attr.data-disabled]="option.unavailable ? '' : null"
+                  [attr.data-selected]="isSelected(option) ? '' : null"
+                  [attr.data-current]="$index === highlightIndex() ? '' : null"
+                  [tabindex]="$index === highlightIndex() ? 0 : -1"
+                  (click)="select(option, $event)"
+                >
+                  @if (optionTemplate) {
+                    <ng-container
+                      [ngTemplateOutlet]="optionTemplate"
+                      [ngTemplateOutletContext]="contextFor(option, $index)"
+                    />
+                  } @else {
+                    {{ labelFor(option) }}
+                  }
+                </div>
+              }
+            </div>
+          }
+          <ng-content select="[slTimePickerFooter]" />
+        </div>
+      </div>
+    }`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'time-picker',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-granularity]': 'resolvedGranularity()',
+                        '[attr.data-open]': "isOpen() ? '' : null",
+                        '[attr.data-disabled]': "resolvedDisabled() === true ? '' : null",
+                        '[attr.data-invalid]': "resolvedInvalid() === true ? '' : null",
+                        '[attr.data-readonly]': "resolvedReadOnly() === true ? '' : null",
+                        '[attr.data-required]': "resolvedRequired() === true ? '' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=time-picker][data-part=root]{display:block;inline-size:100%}[data-ui=time-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=time-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=time-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=time-picker] [data-part=trigger]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var( --slotted-time-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-time-picker-radius, var(--slotted-control-radius, 4px));color:var(--slotted-time-picker-trigger-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;inline-size:var( --slotted-time-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=time-picker] [data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=time-picker] [data-part=trigger]:after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=time-picker] [data-part=end]:has(+[data-part=clear]:not([hidden]))>[data-part=trigger]:after{inset-inline-end:0}}[data-ui=time-picker] [data-part=trigger]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-time-picker-trigger-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=time-picker] [data-part=trigger]:active:not(:disabled):not([data-disabled]){background-color:var( --slotted-time-picker-trigger-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=time-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=time-picker][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-time-picker-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) )}[data-ui=time-picker] [data-part=trigger]:disabled{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=time-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=time-picker][data-part=positioner][data-side=top]{translate:0 var(--_enter-distance)}[data-ui=time-picker][data-part=positioner]:is([data-side=left],[data-side=right]){translate:0 0}[data-ui=time-picker][data-part=positioner][data-open]{opacity:1;translate:0 0;transition:none}[data-ui=time-picker][data-part=positioner][data-open][data-positioned]{animation:slotted-time-picker-enter-down var(--slotted-duration-medium) var(--slotted-easing-enter)}[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=top]{animation-name:slotted-time-picker-enter-up}[data-ui=time-picker][data-part=positioner][data-open][data-positioned]:is([data-side=left],[data-side=right]){animation-name:slotted-time-picker-fade}@keyframes slotted-time-picker-enter-down{0%{opacity:0;translate:0 calc(-1 * var(--_enter-distance))}}@keyframes slotted-time-picker-enter-up{0%{opacity:0;translate:0 var(--_enter-distance)}}@keyframes slotted-time-picker-fade{0%{opacity:0}}@media(prefers-reduced-motion:reduce){[data-ui=time-picker][data-part=positioner],[data-ui=time-picker][data-part=positioner][data-side=top],[data-ui=time-picker][data-part=positioner][data-side=left],[data-ui=time-picker][data-part=positioner][data-side=right]{translate:0 0;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit)}[data-ui=time-picker][data-part=positioner][data-open][data-positioned],[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=top],[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=left],[data-ui=time-picker][data-part=positioner][data-open][data-positioned][data-side=right]{animation-name:slotted-time-picker-fade}}[data-ui=time-picker][data-part=positioner][data-detached]{visibility:hidden}[data-ui=time-picker] [data-part=content]{background-color:var(--slotted-time-picker-surface, var(--slotted-surface-raised, Canvas));border:var(--slotted-border-width-thin, 1px) solid var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));border-radius:var(--slotted-time-picker-content-radius, var(--slotted-radius-lg, 8px));box-shadow:var(--slotted-time-picker-content-shadow, var(--slotted-shadow-md));box-sizing:border-box;color:var(--slotted-time-picker-content-color, var(--slotted-text, CanvasText));--_row: max(var(--slotted-target-min, 24px), var(--slotted-control-height-sm, 30px));--_row-pitch: calc(var(--_row) + var(--slotted-space-1, .125rem));display:grid;gap:var(--slotted-space-2, .25rem);grid-template-areas:\"head\" \"list\" \"footer\";grid-template-columns:minmax(0,1fr);inline-size:max(var(--slotted-time-picker-content-min-inline-size, 11rem),min(var(--slotted-positioner-anchor-width, 11rem),20rem));padding:var(--slotted-time-picker-content-padding, var(--slotted-space-3, .375rem));pointer-events:auto}[data-ui=time-picker] [data-part=content]:has([data-part=presets]){grid-template-areas:\"presets head\" \"presets list\" \"footer footer\";grid-template-columns:auto minmax(9rem,1fr);inline-size:auto;max-inline-size:min(28rem,var(--slotted-positioner-available-width, 28rem))}[data-ui=time-picker] [data-part=head]{align-items:center;display:flex;gap:var(--slotted-space-2, .25rem);grid-area:head;justify-content:flex-start;padding-block-end:var(--slotted-space-2, .25rem)}[data-ui=time-picker] [data-part=now]{appearance:none;background-color:transparent;border:0;border-radius:var(--slotted-time-picker-option-radius, var(--slotted-radius-sm, 4px));color:var(--slotted-time-picker-now-color, var(--slotted-tone-accent-text));cursor:pointer;font:inherit;min-block-size:var(--slotted-target-min, 24px);padding-block:var(--slotted-space-1, .125rem);padding-inline:var(--slotted-space-3, .375rem);touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=time-picker] [data-part=now]:hover:not(:disabled):not([data-disabled]){background-color:var( --slotted-time-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=time-picker] [data-part=now]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=time-picker] [data-part=presets]{align-items:flex-start;border-inline-end:var(--slotted-border-width-thin, 1px) solid var(--slotted-time-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-3, .375rem)}[data-ui=time-picker] [data-part=list]{display:flex;flex-direction:column;gap:var(--slotted-space-1, .125rem);grid-area:list;max-block-size:var(--slotted-time-picker-list-block-size, calc(var(--_row-pitch) * 8.5));min-inline-size:0;overflow-y:auto;scroll-padding-block:var(--slotted-space-2, .25rem)}[data-ui=time-picker] [data-part=option]{align-items:center;background-color:transparent;border-radius:var(--slotted-time-picker-option-radius, var(--slotted-radius-sm, 4px));color:inherit;cursor:pointer;display:flex;flex:0 0 auto;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);min-block-size:var(--_row);padding-inline:var(--slotted-space-3, .375rem);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}[data-ui=time-picker] [data-part=option]:hover:not([data-disabled]):not([data-selected]):not([data-current]){background-color:var( --slotted-time-picker-option-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=time-picker] [data-part=option][data-current]:not([data-selected]){background-color:var( --slotted-time-picker-option-current-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=time-picker] [data-part=option]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=time-picker] [data-part=option][data-selected]{background-color:var( --slotted-time-picker-option-selected-background, var(--slotted-tone-accent-solid) );color:var(--slotted-time-picker-option-selected-color, var(--slotted-tone-accent-on-solid))}[data-ui=time-picker] [data-part=option][data-selected]:hover:not([data-disabled]){background-color:var( --slotted-time-picker-option-selected-hover-background, var(--slotted-tone-accent-solid-hover) )}[data-ui=time-picker] [data-part=option][data-disabled]{background-color:transparent;color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=time-picker] [data-part=empty]{align-items:center;color:var(--slotted-time-picker-label-color, var(--slotted-text-muted, GrayText));display:flex;grid-area:list;justify-content:center;min-block-size:calc(var(--_row) * 2);padding:var(--slotted-space-4, .5rem);text-align:center;text-wrap:balance}[data-ui=time-picker] [data-part=footer]{align-items:center;border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));display:flex;gap:var(--slotted-space-2, .25rem);grid-area:footer;justify-content:flex-end;padding-block-start:var(--slotted-space-3, .375rem)}@media(max-width:480px)and (pointer:coarse){[data-ui=time-picker][data-part=positioner][data-presentation=sheet]{inset:auto 0 0;position:fixed;translate:0 var(--slotted-space-9, 2rem)}[data-ui=time-picker][data-part=positioner][data-presentation=sheet][data-open]{translate:0 0}[data-ui=time-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-time-picker-sheet-inline-size, 100%)}[data-ui=time-picker][data-part=positioner][data-presentation=sheet] [data-part=list]{max-block-size:50vh}[data-ui=time-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-time-picker-content-border-color, var(--slotted-border-subtle, ButtonBorder));flex-direction:row;flex-wrap:wrap;padding-block-end:var(--slotted-space-3, .375rem);padding-inline-end:0}}@media(forced-colors:active){[data-ui=time-picker] [data-part=option][data-selected]{background-color:Highlight;color:HighlightText;forced-color-adjust:none}[data-ui=time-picker] [data-part=option][data-current]:not([data-selected]){outline:var(--slotted-focus-ring-width, 2px) solid Highlight;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], highlightedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightedValue", required: false }] }], defaultHighlightedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultHighlightedValue", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], isTimeUnavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTimeUnavailable", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], maxOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxOptions", required: false }] }], unavailableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableOptions", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], timeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeZone", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], referenceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceTime", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], relative: [{ type: i0.Input, args: [{ isSignal: true, alias: "relative", required: false }] }], 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"] }], highlightedValueChange: [{ type: i0.Output, args: ["highlightedValueChange"] }], optionTemplate: [{
+                type: ContentChild,
+                args: [SlTimePickerOption, { read: TemplateRef }]
+            }], layer: [{
+                type: ViewChild,
+                args: ['layer']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], listRef: [{
+                type: ViewChild,
+                args: ['rows']
+            }], field: [{
+                type: ViewChild,
+                args: ['field']
+            }] } });
+
+/**
+ * The consumer's own shortcuts, in a column beside the list.
+ *
+ * This family ships no list of them: "start of the shift" is a business clock
+ * and a library that guessed at one would be guessing at an industry. What it
+ * ships is the column they stand in.
+ */
+class SlTimePickerPresets {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTimePickerPresets, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTimePickerPresets, isStandalone: true, selector: "[slTimePickerPresets]", host: { attributes: { "data-part": "presets" } }, exportAs: ["slTimePickerPresets"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTimePickerPresets, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTimePickerPresets]',
+                    standalone: true,
+                    exportAs: 'slTimePickerPresets',
+                    host: { 'data-part': 'presets' },
+                }]
+        }] });
+/** The consumer's own actions, under the list. */
+class SlTimePickerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTimePickerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTimePickerFooter, isStandalone: true, selector: "[slTimePickerFooter]", host: { attributes: { "data-part": "footer" } }, exportAs: ["slTimePickerFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTimePickerFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slTimePickerFooter]',
+                    standalone: true,
+                    exportAs: 'slTimePickerFooter',
+                    host: { 'data-part': 'footer' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlTimePicker, SlTimePickerFooter, SlTimePickerOption, SlTimePickerPresets, TIME_PICKER_DEFAULTS, TIME_PICKER_MAX_OPTIONS, TIME_PICKER_STEP, injectTimePickerDefaults, provideTimePickerDefaults };
+//# sourceMappingURL=slotted-angular-time-picker.mjs.map