@malva-ui/core 0.1.12 → 0.1.14

package/fesm2022/malva-ui-core-time-picker.mjs

@@ -0,0 +1,533 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, viewChildren, ElementRef, inject, DestroyRef, computed, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component, model, signal, forwardRef } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
+import * as i1 from '@malva-ui/cdk/density';
+import { MlvDensityDirective, MLV_DENSITY_ELEMENT } from '@malva-ui/cdk/density';
+import { MlvSignalFormControlBase, MlvDescription, MlvLabel, MlvHint, MlvFormControlWrapper, MlvFormControlWrapperControl, MlvMessage, MLV_FORM_CONTROL } from '@malva-ui/core/form-utils';
+import { MlvPopup, MlvPopupContent, MlvPopupContainer } from '@malva-ui/core/popup';
+import { LucideClock } from '@lucide/angular';
+import { MlvButton } from '@malva-ui/core/button';
+import { clamp, MlvRtlService } from '@malva-ui/cdk/utils';
+import { Listbox, Option } from '@angular/aria/listbox';
+import { MLV_TIME_PICKER_I18N } from '@malva-ui/i18n';
+
+/**
+ * A single scrollable column for the time picker (hours, minutes, seconds).
+ *
+ * Renders a `<ul>` backed by `@angular/aria`'s headless `ngListbox`/`ngOption`
+ * pattern in **`focusMode="activedescendant"`** — focus stays on the `<ul>`
+ * container while `aria-activedescendant` tracks the active item. aria owns the
+ * roles (`listbox`/`option`), `aria-selected`, `aria-activedescendant`, roving
+ * `aria-activedescendant`, and all keyboard navigation (ArrowUp/Down wrap,
+ * Home/End, Enter/Space, and additive type-ahead).
+ *
+ * The CSS scroll-snap **drum-roll** UX is retained on top of aria: in
+ * `activedescendant` mode aria never moves DOM focus and never scrolls (its
+ * `scrollActiveItemIntoView()` is opt-in and is not called here), so it cannot
+ * fight the snap scrolling. Programmatic scroll (on external value change) and
+ * pointer/wheel scroll-to-select stay component-owned; on a scroll-driven change
+ * the aria active item is re-synced via {@link Listbox.gotoIndex} so a following
+ * Arrow key moves from the centered value rather than a stale one.
+ *
+ * @internal This component is not part of the public API and should not be used directly.
+ */
+class MlvTimePickerColumn {
+    /** The accessible label for the column (e.g. "Hours", "Minutes"). */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The list of numeric values to display in the column. */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** The currently selected value in this column. */
+    selectedValue = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+    /** Whether the column is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emitted when the user selects a new value via scroll, click, or keyboard. */
+    valueChange = output();
+    /** @private Reference to the scrollable list element. */
+    _listRef = viewChild('listRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_listRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The component's own `@for`-rendered `<li>` option elements, in DOM
+     * order. Replaces `querySelectorAll('.mlv-time-picker-column__item')` over the
+     * host — the items belong to this component's template, so a signal view query
+     * is the correct mechanism.
+     */
+    _itemEls = viewChildren('itemRef', { ...(ngDevMode ? { debugName: "_itemEls" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /**
+     * @private The aria `Listbox` instance on the `<ul>`. Used to keep aria's
+     * internal active item aligned with the drum-roll scroll position.
+     */
+    _ariaListbox = viewChild(Listbox, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaListbox" }] : /* istanbul ignore next */ []));
+    /** @private DestroyRef for cleanup. */
+    _destroyRef = inject(DestroyRef);
+    /** @protected Sanitized label key for use in element IDs (spaces replaced with hyphens). */
+    _labelKey = computed(() => this.label().toLowerCase().replace(/\s+/g, '-'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_labelKey" }] : /* istanbul ignore next */ []));
+    /** @protected Formatted display items (zero-padded two digits). */
+    _displayItems = computed(() => this.items().map((v) => ({ value: v, label: String(v).padStart(2, '0') })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Bridges the scalar `selectedValue` input into aria's array-based
+     * (`V[]`) single-select value model. Single-select always holds ≤1 entry.
+     */
+    _ariaValue = computed(() => [this.selectedValue()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_ariaValue" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Listbox tabindex. Forced to `-1` when disabled to preserve the
+     * historical contract; otherwise `undefined` so aria's pattern manages it
+     * (`0` in activedescendant mode — the container is the tab stop).
+     */
+    _listboxTabIndex = computed(() => this.disabled() ? -1 : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_listboxTabIndex" }] : /* istanbul ignore next */ []));
+    /** @private Timer ID for scroll debounce. */
+    _scrollTimer = null;
+    constructor() {
+        // Sync the drum scroll AND aria's active item when selectedValue changes
+        // externally (forms value write, mode switch). gotoIndex only moves the active
+        // descendant (no selection), so it never re-emits valueChange. Without it,
+        // aria's active item would drift from the centered value once the user has
+        // interacted (setDefaultState no longer re-syncs post-interaction).
+        effect(() => {
+            const items = this.items();
+            const selected = this.selectedValue();
+            const idx = items.indexOf(selected);
+            const newIdx = idx >= 0 ? idx : 0;
+            untracked(() => {
+                this._ariaListbox()?.gotoIndex(newIdx);
+                this._scrollToIndex(newIdx, true);
+            });
+        });
+        this._destroyRef.onDestroy(() => {
+            if (this._scrollTimer)
+                clearTimeout(this._scrollTimer);
+        });
+    }
+    ngAfterViewInit() {
+        const items = this.items();
+        const idx = items.indexOf(this.selectedValue());
+        const startIdx = idx >= 0 ? idx : 0;
+        // Seed aria's active item to the selected value now that the options are
+        // registered. aria's own `setDefaultState` is defeated once the popup's
+        // open handler focuses the list (focusin → hasBeenInteracted), so we can't
+        // rely on it — without this, the active item stays `undefined` and the
+        // first Arrow key navigates from index -1.
+        this._ariaListbox()?.gotoIndex(startIdx);
+        this._scrollToIndex(startIdx, false);
+    }
+    /**
+     * Focus the column's listbox element.
+     * Used by the parent component for inter-column keyboard navigation.
+     */
+    focusList() {
+        this._listRef()?.nativeElement.focus();
+    }
+    /**
+     * The column's scrollable `<ul>` listbox element, or `null` before view init.
+     * Exposed so the parent time picker can identify which column currently holds
+     * focus (comparing against `document.activeElement`) when moving focus between
+     * columns, without reaching into child DOM by class name.
+     */
+    get listElement() {
+        return this._listRef()?.nativeElement ?? null;
+    }
+    /**
+     * @protected Bridge aria's array `valueChange` back to the scalar output.
+     * Guards against no-op echoes so the parent form control is only touched on
+     * genuine changes.
+     */
+    _onAriaValueChange(values) {
+        if (this.disabled())
+            return;
+        const next = values[0];
+        if (next === undefined)
+            return;
+        if (next !== this.selectedValue()) {
+            this.valueChange.emit(next);
+        }
+    }
+    /**
+     * @protected Handle scroll events — debounced to avoid fighting with CSS
+     * scroll-snap during large swipes. aria attaches no scroll listener of its
+     * own, so this remains the sole owner of scroll-driven selection.
+     */
+    _onScroll() {
+        if (this.disabled())
+            return;
+        if (this._scrollTimer)
+            clearTimeout(this._scrollTimer);
+        this._scrollTimer = setTimeout(() => {
+            this._syncIndexFromScroll();
+        }, 150);
+    }
+    /**
+     * @private Read the current scroll position and update the selected value.
+     * Also re-aligns aria's active item so a subsequent Arrow key moves from the
+     * centered value.
+     */
+    _syncIndexFromScroll() {
+        const listEl = this._listRef()?.nativeElement;
+        if (!listEl)
+            return;
+        const items = this._itemEls();
+        if (!items.length)
+            return;
+        const itemHeight = items[0].nativeElement.offsetHeight;
+        if (itemHeight === 0)
+            return;
+        const scrollTop = listEl.scrollTop;
+        const closestIndex = Math.round(scrollTop / itemHeight);
+        const clampedIndex = clamp(closestIndex, 0, this.items().length - 1);
+        const newValue = this.items()[clampedIndex];
+        if (newValue !== this.selectedValue()) {
+            // Keep aria's active item aligned with the scrolled position first, then
+            // emit — selection flows back through selectedValue → _ariaValue.
+            this._ariaListbox()?.gotoIndex(clampedIndex);
+            this.valueChange.emit(newValue);
+        }
+    }
+    /**
+     * @private Scroll the list to bring item at the given index into view.
+     * @param index - The index to scroll to.
+     * @param smooth - Whether to use smooth scroll behavior.
+     */
+    _scrollToIndex(index, smooth) {
+        const listEl = this._listRef()?.nativeElement;
+        if (!listEl)
+            return;
+        const targetItem = this._itemEls()[index]?.nativeElement;
+        if (!targetItem)
+            return;
+        const itemHeight = targetItem.offsetHeight;
+        const scrollTop = index * itemHeight;
+        if (typeof listEl.scrollTo === 'function') {
+            listEl.scrollTo({
+                top: scrollTop,
+                behavior: smooth ? 'smooth' : 'instant',
+            });
+        }
+        else {
+            listEl.scrollTop = scrollTop;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimePickerColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTimePickerColumn, isStandalone: true, selector: "mlv-time-picker-column", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "mlv-time-picker-column" }, viewQueries: [{ propertyName: "_listRef", first: true, predicate: ["listRef"], descendants: true, isSignal: true }, { propertyName: "_itemEls", predicate: ["itemRef"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_ariaListbox", first: true, predicate: Listbox, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mlv-time-picker-column__track\">\n  <ul\n    #listRef\n    ngListbox\n    class=\"mlv-time-picker-column__list\"\n    focusMode=\"activedescendant\"\n    selectionMode=\"follow\"\n    [wrap]=\"true\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"_listboxTabIndex()\"\n    [value]=\"_ariaValue()\"\n    (valueChange)=\"_onAriaValueChange($event)\"\n    [attr.aria-label]=\"label()\"\n    (scroll)=\"_onScroll()\"\n  >\n    @for (item of _displayItems(); track item.value) {\n    <li\n      ngOption\n      #itemRef\n      [id]=\"'tp-col-item-' + _labelKey() + '-' + item.value\"\n      [value]=\"item.value\"\n      [label]=\"item.label\"\n      class=\"mlv-time-picker-column__item\"\n      [class.mlv-time-picker-column__item--selected]=\"\n          item.value === selectedValue()\n        \"\n    >\n      {{ item.label }}\n    </li>\n    }\n  </ul>\n</div>\n", styles: ["@layer mlv.components{.mlv-time-picker-column{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-tp-font-size, var(--mlv-font-size-m))}.mlv-time-picker-column *{box-sizing:border-box}.mlv-time-picker-column{display:flex;flex-direction:column;align-items:center;width:var(--mlv-tp-column-width, 3.5rem)}.mlv-time-picker-column__track{position:relative;width:100%;height:var(--mlv-tp-track-height, calc(var(--mlv-tp-item-height, 2.25rem) * 5));overflow:hidden}.mlv-time-picker-column__track:before{content:\"\";position:absolute;inset-inline:.25rem;top:calc(var(--mlv-tp-item-height, 2.25rem) * 2);height:var(--mlv-tp-item-height, 2.25rem);background-color:var(--mlv-background-neutral-1);border-radius:var(--mlv-radius-s);pointer-events:none;z-index:0}.mlv-time-picker-column__track{mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%)}.mlv-time-picker-column__list{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__list *{box-sizing:border-box}.mlv-time-picker-column__list{list-style:none;width:100%;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);position:relative;z-index:1;padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);scrollbar-width:none}.mlv-time-picker-column__list::-webkit-scrollbar{display:none}.mlv-time-picker-column__list:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1);border-radius:var(--mlv-radius-s)}.mlv-time-picker-column__item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__item *{box-sizing:border-box}.mlv-time-picker-column__item{display:flex;align-items:center;justify-content:center;height:var(--mlv-tp-item-height, 2.25rem);width:100%;scroll-snap-align:start;cursor:pointer;color:var(--mlv-text-tertiary);font-weight:var(--mlv-font-weight-normal);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-time-picker-column__item--selected{color:var(--mlv-text-primary);font-weight:var(--mlv-font-weight-semibold)}.mlv-time-picker-column__item:hover:not(.mlv-time-picker-column__item--selected){color:var(--mlv-text-secondary)}@media(prefers-reduced-motion:reduce){.mlv-time-picker-column,.mlv-time-picker-column *,.mlv-time-picker-column:before,.mlv-time-picker-column:after,[class^=mlv-time-picker-column__],[class*=\" mlv-time-picker-column__\"],[class^=mlv-time-picker-column--],[class*=\" mlv-time-picker-column--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimePickerColumn, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-time-picker-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [Listbox, Option], host: {
+                        class: 'mlv-time-picker-column',
+                    }, template: "<div class=\"mlv-time-picker-column__track\">\n  <ul\n    #listRef\n    ngListbox\n    class=\"mlv-time-picker-column__list\"\n    focusMode=\"activedescendant\"\n    selectionMode=\"follow\"\n    [wrap]=\"true\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"_listboxTabIndex()\"\n    [value]=\"_ariaValue()\"\n    (valueChange)=\"_onAriaValueChange($event)\"\n    [attr.aria-label]=\"label()\"\n    (scroll)=\"_onScroll()\"\n  >\n    @for (item of _displayItems(); track item.value) {\n    <li\n      ngOption\n      #itemRef\n      [id]=\"'tp-col-item-' + _labelKey() + '-' + item.value\"\n      [value]=\"item.value\"\n      [label]=\"item.label\"\n      class=\"mlv-time-picker-column__item\"\n      [class.mlv-time-picker-column__item--selected]=\"\n          item.value === selectedValue()\n        \"\n    >\n      {{ item.label }}\n    </li>\n    }\n  </ul>\n</div>\n", styles: ["@layer mlv.components{.mlv-time-picker-column{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-tp-font-size, var(--mlv-font-size-m))}.mlv-time-picker-column *{box-sizing:border-box}.mlv-time-picker-column{display:flex;flex-direction:column;align-items:center;width:var(--mlv-tp-column-width, 3.5rem)}.mlv-time-picker-column__track{position:relative;width:100%;height:var(--mlv-tp-track-height, calc(var(--mlv-tp-item-height, 2.25rem) * 5));overflow:hidden}.mlv-time-picker-column__track:before{content:\"\";position:absolute;inset-inline:.25rem;top:calc(var(--mlv-tp-item-height, 2.25rem) * 2);height:var(--mlv-tp-item-height, 2.25rem);background-color:var(--mlv-background-neutral-1);border-radius:var(--mlv-radius-s);pointer-events:none;z-index:0}.mlv-time-picker-column__track{mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 25%,black 75%,transparent 100%)}.mlv-time-picker-column__list{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__list *{box-sizing:border-box}.mlv-time-picker-column__list{list-style:none;width:100%;height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);position:relative;z-index:1;padding-block:calc(var(--mlv-tp-item-height, 2.25rem) * 2);scrollbar-width:none}.mlv-time-picker-column__list::-webkit-scrollbar{display:none}.mlv-time-picker-column__list:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:calc(var(--mlv-focus-ring-offset) * -1);border-radius:var(--mlv-radius-s)}.mlv-time-picker-column__item{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker-column__item *{box-sizing:border-box}.mlv-time-picker-column__item{display:flex;align-items:center;justify-content:center;height:var(--mlv-tp-item-height, 2.25rem);width:100%;scroll-snap-align:start;cursor:pointer;color:var(--mlv-text-tertiary);font-weight:var(--mlv-font-weight-normal);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-time-picker-column__item--selected{color:var(--mlv-text-primary);font-weight:var(--mlv-font-weight-semibold)}.mlv-time-picker-column__item:hover:not(.mlv-time-picker-column__item--selected){color:var(--mlv-text-secondary)}@media(prefers-reduced-motion:reduce){.mlv-time-picker-column,.mlv-time-picker-column *,.mlv-time-picker-column:before,.mlv-time-picker-column:after,[class^=mlv-time-picker-column__],[class*=\" mlv-time-picker-column__\"],[class^=mlv-time-picker-column--],[class*=\" mlv-time-picker-column--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], _listRef: [{ type: i0.ViewChild, args: ['listRef', { isSignal: true }] }], _itemEls: [{ type: i0.ViewChildren, args: ['itemRef', { ...{ read: ElementRef }, isSignal: true }] }], _ariaListbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }] } });
+
+/** @private Generates a range array [start, end) */
+function range(start, end) {
+    return Array.from({ length: end - start }, (_, i) => i + start);
+}
+/**
+ * Time picker component (`mlv-time-picker`) that allows users to select a time
+ * value using a compact trigger that opens a floating popup with scrollable
+ * drum-roll columns. Supports 24h and 12h (AM/PM) modes, optional seconds
+ * display, and integrates with signal, reactive, and template-driven forms.
+ *
+ * Emits values as `HH:mm` (24h format) or `HH:mm:ss` when `showSeconds` is true.
+ * In 12h mode the emitted value is still in 24h format internally.
+ */
+class MlvTimePicker extends MlvSignalFormControlBase {
+    /** The `HH:mm`/`HH:mm:ss` value used by all Angular forms APIs. */
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Clock mode — `'24h'` for 24-hour display (default) or `'12h'` for AM/PM.
+     */
+    mode = input('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, shows a seconds column in addition to hours and minutes.
+     */
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_TIME_PICKER_I18N);
+    /** @protected Resolved aria-label: explicit input takes precedence over i18n default. */
+    _resolvedAriaLabel = computed(() => this.ariaLabel() ?? this._i18n().timePicker, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @private Whether the time selection popup is open. */
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** @private Internal signal for the selected hour (0–23 in 24h mode; 1–12 in 12h mode). */
+    _hour = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hour" }] : /* istanbul ignore next */ []));
+    /** @private Internal signal for the selected minute (0–59). */
+    _minute = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_minute" }] : /* istanbul ignore next */ []));
+    /** @private Internal signal for the selected second (0–59). */
+    _second = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_second" }] : /* istanbul ignore next */ []));
+    /** @private AM/PM period — `'AM'` or `'PM'`. Only relevant in 12h mode. */
+    _period = signal('AM', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_period" }] : /* istanbul ignore next */ []));
+    /** Unique ID for the message element, used for aria-describedby linking. */
+    /** Unique ID for the popup panel, used for aria-controls linking. */
+    panelId = computed(() => `${this.id()}-panel`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    /** Override focused to also be true when the popup is open. */
+    focused = computed(() => this._focused() || this.isOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    /** @protected Formatted display value shown in the trigger. */
+    _displayValue = computed(() => {
+        const is12h = this.mode() === '12h';
+        const hour = is12h ? this._displayHour() : this._hour();
+        const hh = String(hour).padStart(2, '0');
+        const mm = String(this._minute()).padStart(2, '0');
+        const ss = String(this._second()).padStart(2, '0');
+        let base = `${hh}:${mm}`;
+        if (this.showSeconds())
+            base += `:${ss}`;
+        if (is12h)
+            base += ` ${this._period()}`;
+        return base;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    /** @protected Hour items for the column — depends on mode. */
+    _hourItems = computed(() => this.mode() === '12h' ? range(1, 13) : range(0, 24), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hourItems" }] : /* istanbul ignore next */ []));
+    /** @protected Minute items for the column (0–59). */
+    _minuteItems = computed(() => range(0, 60), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_minuteItems" }] : /* istanbul ignore next */ []));
+    /** @protected Second items for the column (0–59). */
+    _secondItems = computed(() => range(0, 60), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_secondItems" }] : /* istanbul ignore next */ []));
+    /** @protected The hour value shown in the column (1–12 in 12h mode, 0–23 in 24h). */
+    _displayHour = computed(() => {
+        if (this.mode() !== '12h')
+            return this._hour();
+        const h = this._hour() % 12;
+        return h === 0 ? 12 : h;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayHour" }] : /* istanbul ignore next */ []));
+    /** @private Reference to the trigger element for focus restoration after popup close. */
+    _triggerRef = viewChild('triggerRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The rendered drum-roll columns (hours, minutes, optional seconds),
+     * in DOM order. They are `mlv-time-picker-column` children declared in this
+     * component's own template (inside `mlvPopupContent`), so a signal view query
+     * resolves them — even though the popup content renders in a detached overlay.
+     * Used for focus-on-open and inter-column Arrow navigation instead of reaching
+     * into the overlay DOM by class name.
+     */
+    _columns = viewChildren(MlvTimePickerColumn, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_columns" }] : /* istanbul ignore next */ []));
+    /** @private Normalizes horizontal column navigation for RTL layouts. */
+    _rtlService = inject(MlvRtlService);
+    /** @private Density directive instance for reading the resolved density level. */
+    _densityDirective = inject(MlvDensityDirective);
+    /** @protected Effective density to pass to the detached popup panel. */
+    _effectiveDensity = computed(() => this._densityDirective.effectiveDensity(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveDensity" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => this._applyValue(this.value()));
+    }
+    /**
+     * @protected Toggle the popup open/closed state.
+     */
+    _toggleDropdown() {
+        if (this.computedDisabled())
+            return;
+        this.isOpen.set(!this.isOpen());
+    }
+    /**
+     * @private Build the time string from internal signals.
+     * Always returns 24h format: `HH:mm` or `HH:mm:ss`.
+     */
+    _buildValue() {
+        let hour = this._hour();
+        if (this.mode() === '12h') {
+            const displayHour = this._displayHour();
+            if (this._period() === 'AM') {
+                hour = displayHour === 12 ? 0 : displayHour;
+            }
+            else {
+                hour = displayHour === 12 ? 12 : displayHour + 12;
+            }
+        }
+        const hh = String(hour).padStart(2, '0');
+        const mm = String(this._minute()).padStart(2, '0');
+        const ss = String(this._second()).padStart(2, '0');
+        return this.showSeconds() ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;
+    }
+    /**
+     * @private Parse a time string (`HH:mm` or `HH:mm:ss`) into internal signals.
+     */
+    _parseValue(value) {
+        if (!value)
+            return;
+        const parts = value.split(':').map(Number);
+        const totalHour = parts[0] ?? 0;
+        const minute = parts[1] ?? 0;
+        const second = parts[2] ?? 0;
+        this._minute.set(minute);
+        this._second.set(second);
+        if (this.mode() === '12h') {
+            this._period.set(totalHour >= 12 ? 'PM' : 'AM');
+            const h12 = totalHour % 12;
+            this._hour.set(h12 === 0 ? 0 : h12); // store 0–11, display as 12 or 1–11
+        }
+        else {
+            this._hour.set(totalHour);
+        }
+    }
+    /** Whether the control holds a clearable value — The drum always shows a time, so there is always a value. */
+    hasValue = computed(() => true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** @private Synchronizes drum columns from an external model value. */
+    _applyValue(value) {
+        if (value) {
+            this._parseValue(value);
+        }
+        else {
+            // Default to current time on null/empty
+            const now = new Date();
+            this._hour.set(now.getHours());
+            this._minute.set(now.getMinutes());
+            this._second.set(now.getSeconds());
+            if (this.mode() === '12h') {
+                this._period.set(now.getHours() >= 12 ? 'PM' : 'AM');
+            }
+        }
+    }
+    /**
+     * @protected Called when the popup opens. Focuses the first column listbox
+     * so keyboard navigation is immediately available.
+     */
+    _onPopupOpened() {
+        this._columns()[0]?.focusList();
+    }
+    /**
+     * @protected Called when the popup closes. Restores focus to the trigger element.
+     */
+    _onPopupClosed() {
+        this.setFocused(false);
+        this._markTouched();
+        this._triggerRef()?.nativeElement.focus();
+    }
+    /** @protected Marks the control touched when the trigger loses focus. */
+    _onTriggerBlur() {
+        this.setFocused(false);
+        this._markTouched();
+    }
+    /**
+     * @protected Handle hour column value change.
+     */
+    _onHourChange(value) {
+        if (this.mode() === '12h') {
+            // Store 0-based: 12 → 0, 1 → 1, … 11 → 11
+            this._hour.set(value === 12 ? 0 : value);
+        }
+        else {
+            this._hour.set(value);
+        }
+        this._emitValue();
+    }
+    /**
+     * @protected Handle minute column value change.
+     */
+    _onMinuteChange(value) {
+        this._minute.set(value);
+        this._emitValue();
+    }
+    /**
+     * @protected Handle second column value change.
+     */
+    _onSecondChange(value) {
+        this._second.set(value);
+        this._emitValue();
+    }
+    /**
+     * @protected Toggle the AM/PM period in 12h mode.
+     */
+    _onPeriodChange(period) {
+        this._period.set(period);
+        this._emitValue();
+    }
+    /**
+     * @protected Handle ArrowLeft/ArrowRight on the columns container to move
+     * focus between column listboxes.
+     */
+    _onPanelKeydown(event) {
+        const key = this._rtlService.normalizeArrowKey(event);
+        if (key !== LEFT_ARROW && key !== RIGHT_ARROW)
+            return;
+        const columns = this._columns();
+        if (!columns.length)
+            return;
+        const focusedIdx = columns.findIndex((column) => column.listElement === document.activeElement);
+        if (focusedIdx === -1)
+            return;
+        event.preventDefault();
+        const nextIdx = key === LEFT_ARROW ? focusedIdx - 1 : focusedIdx + 1;
+        if (nextIdx < 0 || nextIdx >= columns.length)
+            return;
+        columns[nextIdx].focusList();
+    }
+    /**
+     * @private Write the current value to the forms model.
+     */
+    _emitValue() {
+        this.value.set(this._buildValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTimePicker, isStandalone: true, selector: "mlv-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "\"mlv-time-picker--\" + resolvedState()", "class.mlv-time-picker--disabled": "computedDisabled()", "class.mlv-time-picker--open": "isOpen()", "class.mlv-time-picker--12h": "mode() === \"12h\"", "class.mlv-time-picker--with-seconds": "showSeconds()" }, classAttribute: "mlv-time-picker" }, providers: [
+            {
+                provide: MLV_FORM_CONTROL,
+                useExisting: forwardRef(() => MlvTimePicker),
+            },
+            { provide: MLV_DENSITY_ELEMENT, useValue: 'time-picker' },
+        ], viewQueries: [{ propertyName: "_triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "_columns", predicate: MlvTimePickerColumn, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-time-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-time-picker__trigger\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-label]=\"_resolvedAriaLabel()\"\n        [attr.aria-disabled]=\"computedDisabled()\"\n        [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n        (click)=\"_toggleDropdown()\"\n        (keydown.enter)=\"_toggleDropdown()\"\n        (keydown.space)=\"_toggleDropdown(); $event.preventDefault()\"\n        (keydown.escape)=\"isOpen.set(false)\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <span class=\"mlv-time-picker__value\">{{ _displayValue() }}</span>\n        <span class=\"mlv-time-picker__icon\">\n          <svg lucideClock></svg>\n        </span>\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"isOpen\"\n        [hasShadow]=\"true\"\n        panelRole=\"dialog\"\n        [modal]=\"true\"\n        mobileMode=\"auto\"\n        [mobileTitle]=\"label() || _resolvedAriaLabel()\"\n        [ariaLabel]=\"_resolvedAriaLabel()\"\n        class=\"mlv-time-picker__popup\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            [id]=\"panelId()\"\n            class=\"mlv-time-picker__panel\"\n            [class]=\"'mlv-time-picker__panel--' + _effectiveDensity()\"\n            role=\"group\"\n            [attr.aria-label]=\"_resolvedAriaLabel()\"\n          >\n            <div\n              class=\"mlv-time-picker__columns\"\n              tabindex=\"-1\"\n              (keydown)=\"_onPanelKeydown($event)\"\n            >\n              <!-- Hours column -->\n              <mlv-time-picker-column\n                label=\"Hours\"\n                [items]=\"_hourItems()\"\n                [selectedValue]=\"_displayHour()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onHourChange($event)\"\n              />\n\n              <span class=\"mlv-time-picker__divider\" aria-hidden=\"true\">:</span>\n\n              <!-- Minutes column -->\n              <mlv-time-picker-column\n                label=\"Minutes\"\n                [items]=\"_minuteItems()\"\n                [selectedValue]=\"_minute()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onMinuteChange($event)\"\n              />\n\n              @if (showSeconds()) {\n              <span class=\"mlv-time-picker__divider\" aria-hidden=\"true\">:</span>\n\n              <!-- Seconds column -->\n              <mlv-time-picker-column\n                label=\"Seconds\"\n                [items]=\"_secondItems()\"\n                [selectedValue]=\"_second()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onSecondChange($event)\"\n              />\n              } @if (mode() === '12h') {\n              <!-- AM/PM toggle -->\n              <div\n                class=\"mlv-time-picker__ampm\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().period\"\n              >\n                <button\n                  type=\"button\"\n                  mlvButton\n                  [variant]=\"_period() === 'AM' ? 'primary' : 'outlined'\"\n                  [attr.aria-pressed]=\"_period() === 'AM'\"\n                  [disabled]=\"computedDisabled()\"\n                  (click)=\"_onPeriodChange('AM')\"\n                >\n                  AM\n                </button>\n                <button\n                  type=\"button\"\n                  mlvButton\n                  [variant]=\"_period() === 'PM' ? 'primary' : 'outlined'\"\n                  [attr.aria-pressed]=\"_period() === 'PM'\"\n                  [disabled]=\"computedDisabled()\"\n                  (click)=\"_onPeriodChange('PM')\"\n                >\n                  PM\n                </button>\n              </div>\n              }\n            </div>\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n", styles: ["@layer mlv.components{.mlv-time-picker{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker *{box-sizing:border-box}.mlv-time-picker{display:inline-flex;flex-direction:column}.mlv-time-picker .mlv-form-control-wrapper__control-container{padding:0}.mlv-time-picker__popup-container{display:flex;flex-grow:1;height:100%}.mlv-time-picker__trigger{display:flex;width:100%;align-items:center;justify-content:space-between;cursor:pointer;outline:none;padding:var(--mlv-control-padding);height:100%;gap:.5rem}.mlv-time-picker__value{flex:1;color:var(--mlv-text-primary);font-variant-numeric:tabular-nums;white-space:nowrap}.mlv-time-picker__icon{display:flex;align-items:center;color:var(--mlv-text-tertiary);line-height:1;transition:color var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-time-picker__icon svg{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem)}.mlv-time-picker--open .mlv-time-picker__icon,.mlv-time-picker:hover .mlv-time-picker__icon,.mlv-form-control-wrapper--focused .mlv-time-picker__icon{color:var(--mlv-text-primary)}.mlv-time-picker__popup{padding:0!important}.mlv-time-picker__panel{--mlv-tp-item-height: 2.25rem;--mlv-tp-column-width: 3.5rem;--mlv-tp-ampm-width: 3.5rem;--mlv-tp-track-height: calc(var(--mlv-tp-item-height) * 5);--mlv-tp-font-size: var(--mlv-font-size-m);padding:var(--mlv-popover-inset)}[class*=--tight] .mlv-time-picker__panel:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-time-picker__panel[class*=--tight]{--mlv-tp-item-height: 1.75rem;--mlv-tp-column-width: 3rem;--mlv-tp-ampm-width: 3rem;--mlv-tp-font-size: var(--mlv-font-size-s)}[class*=--compact] .mlv-time-picker__panel:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-time-picker__panel[class*=--compact]{--mlv-tp-item-height: 2rem;--mlv-tp-column-width: 3.25rem;--mlv-tp-ampm-width: 3.25rem;--mlv-tp-font-size: var(--mlv-font-size-m)}[class*=--spacious] .mlv-time-picker__panel:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-time-picker__panel[class*=--spacious]{--mlv-tp-item-height: 2.75rem;--mlv-tp-column-width: 4rem;--mlv-tp-ampm-width: 4rem;--mlv-tp-font-size: var(--mlv-font-size-l)}[class*=--airy] .mlv-time-picker__panel:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-time-picker__panel[class*=--airy]{--mlv-tp-item-height: 3.25rem;--mlv-tp-column-width: 4.5rem;--mlv-tp-ampm-width: 4.5rem;--mlv-tp-font-size: var(--mlv-font-size-xl)}.mlv-time-picker__columns{display:flex;flex-direction:row;align-items:center;gap:0}.mlv-time-picker__divider{display:flex;align-items:center;justify-content:center;height:var(--mlv-tp-track-height);padding:0 .125rem;color:var(--mlv-text-tertiary);font-size:var(--mlv-tp-font-size, var(--mlv-font-size-m));font-weight:var(--mlv-font-weight-semibold);-webkit-user-select:none;user-select:none;pointer-events:none}.mlv-time-picker__ampm{display:flex;flex-direction:column;gap:.25rem;padding:.25rem;margin-inline-start:.25rem;height:var(--mlv-tp-track-height);justify-content:center;width:var(--mlv-tp-ampm-width)}.mlv-time-picker__ampm .mlv-button{height:var(--mlv-tp-item-height);min-height:var(--mlv-tp-item-height);--mlv-btn-padding: .25rem .5rem}@media(prefers-reduced-motion:reduce){.mlv-time-picker,.mlv-time-picker *,.mlv-time-picker:before,.mlv-time-picker:after,[class^=mlv-time-picker__],[class*=\" mlv-time-picker__\"],[class^=mlv-time-picker--],[class*=\" mlv-time-picker--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "component", type: MlvDescription, selector: "mlv-description" }, { kind: "component", type: MlvLabel, selector: "mlv-label", inputs: ["for", "required"] }, { kind: "component", type: MlvHint, selector: "mlv-hint" }, { kind: "component", type: MlvFormControlWrapper, selector: "mlv-form-control-wrapper", outputs: ["clear"] }, { kind: "directive", type: MlvFormControlWrapperControl, selector: "[mlvFormControlWrapperControl]" }, { kind: "component", type: MlvMessage, selector: "mlv-message", inputs: ["state"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "component", type: MlvTimePickerColumn, selector: "mlv-time-picker-column", inputs: ["label", "items", "selectedValue", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-time-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MlvDescription,
+                        MlvLabel,
+                        MlvHint,
+                        MlvFormControlWrapper,
+                        MlvFormControlWrapperControl,
+                        MlvMessage,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupContainer,
+                        LucideClock,
+                        MlvButton,
+                        MlvTimePickerColumn,
+                    ], providers: [
+                        {
+                            provide: MLV_FORM_CONTROL,
+                            useExisting: forwardRef(() => MlvTimePicker),
+                        },
+                        { provide: MLV_DENSITY_ELEMENT, useValue: 'time-picker' },
+                    ], hostDirectives: [
+                        {
+                            directive: MlvDensityDirective,
+                            inputs: ['mlvDensity'],
+                        },
+                    ], host: {
+                        class: 'mlv-time-picker',
+                        '[class]': '"mlv-time-picker--" + resolvedState()',
+                        '[class.mlv-time-picker--disabled]': 'computedDisabled()',
+                        '[class.mlv-time-picker--open]': 'isOpen()',
+                        '[class.mlv-time-picker--12h]': 'mode() === "12h"',
+                        '[class.mlv-time-picker--with-seconds]': 'showSeconds()',
+                    }, template: "<mlv-form-control-wrapper>\n  @if (label() || hint()) {\n  <mlv-label [for]=\"id()\" [required]=\"required()\">\n    {{ label() }} @if (hint()) {\n    <mlv-hint>{{ hint() }}</mlv-hint>\n    }\n  </mlv-label>\n  }\n\n  <ng-template mlvFormControlWrapperControl>\n    <mlv-popup-container class=\"mlv-time-picker__popup-container\">\n      <div\n        #triggerRef\n        class=\"mlv-time-picker__trigger\"\n        [id]=\"id()\"\n        role=\"combobox\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-label]=\"_resolvedAriaLabel()\"\n        [attr.aria-disabled]=\"computedDisabled()\"\n        [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-describedby]=\"_describedBy()\"\n        [attr.tabindex]=\"computedDisabled() ? -1 : 0\"\n        (click)=\"_toggleDropdown()\"\n        (keydown.enter)=\"_toggleDropdown()\"\n        (keydown.space)=\"_toggleDropdown(); $event.preventDefault()\"\n        (keydown.escape)=\"isOpen.set(false)\"\n        (focus)=\"setFocused(true)\"\n        (blur)=\"_onTriggerBlur()\"\n      >\n        <span class=\"mlv-time-picker__value\">{{ _displayValue() }}</span>\n        <span class=\"mlv-time-picker__icon\">\n          <svg lucideClock></svg>\n        </span>\n      </div>\n\n      <mlv-popup\n        [(opened)]=\"isOpen\"\n        [hasShadow]=\"true\"\n        panelRole=\"dialog\"\n        [modal]=\"true\"\n        mobileMode=\"auto\"\n        [mobileTitle]=\"label() || _resolvedAriaLabel()\"\n        [ariaLabel]=\"_resolvedAriaLabel()\"\n        class=\"mlv-time-picker__popup\"\n        (afterOpened)=\"_onPopupOpened()\"\n        (afterClosed)=\"_onPopupClosed()\"\n      >\n        <ng-template mlvPopupContent>\n          <div\n            [id]=\"panelId()\"\n            class=\"mlv-time-picker__panel\"\n            [class]=\"'mlv-time-picker__panel--' + _effectiveDensity()\"\n            role=\"group\"\n            [attr.aria-label]=\"_resolvedAriaLabel()\"\n          >\n            <div\n              class=\"mlv-time-picker__columns\"\n              tabindex=\"-1\"\n              (keydown)=\"_onPanelKeydown($event)\"\n            >\n              <!-- Hours column -->\n              <mlv-time-picker-column\n                label=\"Hours\"\n                [items]=\"_hourItems()\"\n                [selectedValue]=\"_displayHour()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onHourChange($event)\"\n              />\n\n              <span class=\"mlv-time-picker__divider\" aria-hidden=\"true\">:</span>\n\n              <!-- Minutes column -->\n              <mlv-time-picker-column\n                label=\"Minutes\"\n                [items]=\"_minuteItems()\"\n                [selectedValue]=\"_minute()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onMinuteChange($event)\"\n              />\n\n              @if (showSeconds()) {\n              <span class=\"mlv-time-picker__divider\" aria-hidden=\"true\">:</span>\n\n              <!-- Seconds column -->\n              <mlv-time-picker-column\n                label=\"Seconds\"\n                [items]=\"_secondItems()\"\n                [selectedValue]=\"_second()\"\n                [disabled]=\"computedDisabled()\"\n                (valueChange)=\"_onSecondChange($event)\"\n              />\n              } @if (mode() === '12h') {\n              <!-- AM/PM toggle -->\n              <div\n                class=\"mlv-time-picker__ampm\"\n                role=\"group\"\n                [attr.aria-label]=\"_i18n().period\"\n              >\n                <button\n                  type=\"button\"\n                  mlvButton\n                  [variant]=\"_period() === 'AM' ? 'primary' : 'outlined'\"\n                  [attr.aria-pressed]=\"_period() === 'AM'\"\n                  [disabled]=\"computedDisabled()\"\n                  (click)=\"_onPeriodChange('AM')\"\n                >\n                  AM\n                </button>\n                <button\n                  type=\"button\"\n                  mlvButton\n                  [variant]=\"_period() === 'PM' ? 'primary' : 'outlined'\"\n                  [attr.aria-pressed]=\"_period() === 'PM'\"\n                  [disabled]=\"computedDisabled()\"\n                  (click)=\"_onPeriodChange('PM')\"\n                >\n                  PM\n                </button>\n              </div>\n              }\n            </div>\n          </div>\n        </ng-template>\n      </mlv-popup>\n    </mlv-popup-container>\n  </ng-template>\n\n  @if (description()) {\n  <mlv-description [id]=\"_descriptionId()\">{{ description() }}</mlv-description>\n  } @if (message()) {\n  <mlv-message [id]=\"_messageId()\" [state]=\"resolvedState()\">\n    {{ message() }}\n  </mlv-message>\n  }\n</mlv-form-control-wrapper>\n", styles: ["@layer mlv.components{.mlv-time-picker{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-time-picker *{box-sizing:border-box}.mlv-time-picker{display:inline-flex;flex-direction:column}.mlv-time-picker .mlv-form-control-wrapper__control-container{padding:0}.mlv-time-picker__popup-container{display:flex;flex-grow:1;height:100%}.mlv-time-picker__trigger{display:flex;width:100%;align-items:center;justify-content:space-between;cursor:pointer;outline:none;padding:var(--mlv-control-padding);height:100%;gap:.5rem}.mlv-time-picker__value{flex:1;color:var(--mlv-text-primary);font-variant-numeric:tabular-nums;white-space:nowrap}.mlv-time-picker__icon{display:flex;align-items:center;color:var(--mlv-text-tertiary);line-height:1;transition:color var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-time-picker__icon svg{width:var(--form-ctrl-icon-size, 1.25rem);height:var(--form-ctrl-icon-size, 1.25rem)}.mlv-time-picker--open .mlv-time-picker__icon,.mlv-time-picker:hover .mlv-time-picker__icon,.mlv-form-control-wrapper--focused .mlv-time-picker__icon{color:var(--mlv-text-primary)}.mlv-time-picker__popup{padding:0!important}.mlv-time-picker__panel{--mlv-tp-item-height: 2.25rem;--mlv-tp-column-width: 3.5rem;--mlv-tp-ampm-width: 3.5rem;--mlv-tp-track-height: calc(var(--mlv-tp-item-height) * 5);--mlv-tp-font-size: var(--mlv-font-size-m);padding:var(--mlv-popover-inset)}[class*=--tight] .mlv-time-picker__panel:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-time-picker__panel[class*=--tight]{--mlv-tp-item-height: 1.75rem;--mlv-tp-column-width: 3rem;--mlv-tp-ampm-width: 3rem;--mlv-tp-font-size: var(--mlv-font-size-s)}[class*=--compact] .mlv-time-picker__panel:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-time-picker__panel[class*=--compact]{--mlv-tp-item-height: 2rem;--mlv-tp-column-width: 3.25rem;--mlv-tp-ampm-width: 3.25rem;--mlv-tp-font-size: var(--mlv-font-size-m)}[class*=--spacious] .mlv-time-picker__panel:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-time-picker__panel[class*=--spacious]{--mlv-tp-item-height: 2.75rem;--mlv-tp-column-width: 4rem;--mlv-tp-ampm-width: 4rem;--mlv-tp-font-size: var(--mlv-font-size-l)}[class*=--airy] .mlv-time-picker__panel:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-time-picker__panel[class*=--airy]{--mlv-tp-item-height: 3.25rem;--mlv-tp-column-width: 4.5rem;--mlv-tp-ampm-width: 4.5rem;--mlv-tp-font-size: var(--mlv-font-size-xl)}.mlv-time-picker__columns{display:flex;flex-direction:row;align-items:center;gap:0}.mlv-time-picker__divider{display:flex;align-items:center;justify-content:center;height:var(--mlv-tp-track-height);padding:0 .125rem;color:var(--mlv-text-tertiary);font-size:var(--mlv-tp-font-size, var(--mlv-font-size-m));font-weight:var(--mlv-font-weight-semibold);-webkit-user-select:none;user-select:none;pointer-events:none}.mlv-time-picker__ampm{display:flex;flex-direction:column;gap:.25rem;padding:.25rem;margin-inline-start:.25rem;height:var(--mlv-tp-track-height);justify-content:center;width:var(--mlv-tp-ampm-width)}.mlv-time-picker__ampm .mlv-button{height:var(--mlv-tp-item-height);min-height:var(--mlv-tp-item-height);--mlv-btn-padding: .25rem .5rem}@media(prefers-reduced-motion:reduce){.mlv-time-picker,.mlv-time-picker *,.mlv-time-picker:before,.mlv-time-picker:after,[class^=mlv-time-picker__],[class*=\" mlv-time-picker__\"],[class^=mlv-time-picker--],[class*=\" mlv-time-picker--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], _triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }], _columns: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvTimePickerColumn), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvTimePicker };
+//# sourceMappingURL=malva-ui-core-time-picker.mjs.map