@malva-ui/core 0.1.12

package/esm2022/time-picker/index.js

@@ -0,0 +1,2 @@
+export * from './lib/time-picker/time-picker';
+//# sourceMappingURL=index.js.map

package/esm2022/time-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/time-picker/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './lib/time-picker/time-picker';\n"]}

package/esm2022/time-picker/lib/time-picker/time-picker.js

@@ -0,0 +1,310 @@
+import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, inject, input, model, signal, viewChild, viewChildren, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvDensityDirective, MLV_DENSITY_ELEMENT, } from '@malva-ui/cdk/density';
+import { MlvFormControlWrapper, MlvFormControlWrapperControl, MlvHint, MlvDescription, MlvLabel, MLV_FORM_CONTROL, MlvMessage, MlvSignalFormControlBase, } 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 { MlvTimePickerColumn } from '../time-picker-column/time-picker-column';
+import { MLV_TIME_PICKER_I18N } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+import * as i1 from "@malva-ui/cdk/density";
+/** @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.
+ */
+export 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 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) {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+            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 = event.key === 'ArrowLeft' ? 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: [".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:1.25rem;height: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);padding:.5rem}[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}[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}[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}[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-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-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}\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"] }, { 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: [".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:1.25rem;height: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);padding:.5rem}[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}[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}[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}[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-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-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}\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 }] }] } });
+//# sourceMappingURL=time-picker.js.map

package/esm2022/time-picker/lib/time-picker/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../../../../../libs/core/time-picker/src/lib/time-picker/time-picker.ts","../../../../../../../libs/core/time-picker/src/lib/time-picker/time-picker.html"],"names":[],"mappings":"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","sourcesContent":["import type { ElementRef, Signal } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n  viewChild,\n  viewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  MlvDensityDirective,\n  MLV_DENSITY_ELEMENT,\n} from '@malva-ui/cdk/density';\nimport type { MlvFormState, MlvFormControl } from '@malva-ui/core/form-utils';\nimport {\n  MlvFormControlWrapper,\n  MlvFormControlWrapperControl,\n  MlvHint,\n  MlvDescription,\n  MlvLabel,\n  MLV_FORM_CONTROL,\n  MlvMessage,\n  MlvSignalFormControlBase,\n} from '@malva-ui/core/form-utils';\nimport {\n  MlvPopup,\n  MlvPopupContent,\n  MlvPopupContainer,\n} from '@malva-ui/core/popup';\nimport { LucideClock } from '@lucide/angular';\nimport { MlvButton } from '@malva-ui/core/button';\nimport { MlvTimePickerColumn } from '../time-picker-column/time-picker-column';\nimport { MLV_TIME_PICKER_I18N } from '@malva-ui/i18n';\n\n/**\n * Clock mode — 24-hour or 12-hour (AM/PM).\n */\nexport type MlvTimeMode = '24h' | '12h';\n\n/**\n * Visual/validation state of the time picker. Mirrors {@link MlvFormState}.\n */\nexport type MlvTimePickerState = MlvFormState;\n\n/** @private Generates a range array [start, end) */\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: end - start }, (_, i) => i + start);\n}\n\n/**\n * Time picker component (`mlv-time-picker`) that allows users to select a time\n * value using a compact trigger that opens a floating popup with scrollable\n * drum-roll columns. Supports 24h and 12h (AM/PM) modes, optional seconds\n * display, and integrates with signal, reactive, and template-driven forms.\n *\n * Emits values as `HH:mm` (24h format) or `HH:mm:ss` when `showSeconds` is true.\n * In 12h mode the emitted value is still in 24h format internally.\n */\n@Component({\n  selector: 'mlv-time-picker',\n  templateUrl: './time-picker.html',\n  styleUrl: './time-picker.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    MlvDescription,\n    MlvLabel,\n    MlvHint,\n    MlvFormControlWrapper,\n    MlvFormControlWrapperControl,\n    MlvMessage,\n    MlvPopup,\n    MlvPopupContent,\n    MlvPopupContainer,\n    LucideClock,\n    MlvButton,\n    MlvTimePickerColumn,\n  ],\n  providers: [\n    {\n      provide: MLV_FORM_CONTROL,\n      useExisting: forwardRef(() => MlvTimePicker),\n    },\n    { provide: MLV_DENSITY_ELEMENT, useValue: 'time-picker' },\n  ],\n  hostDirectives: [\n    {\n      directive: MlvDensityDirective,\n      inputs: ['mlvDensity'],\n    },\n  ],\n  host: {\n    class: 'mlv-time-picker',\n    '[class]': '\"mlv-time-picker--\" + resolvedState()',\n    '[class.mlv-time-picker--disabled]': 'computedDisabled()',\n    '[class.mlv-time-picker--open]': 'isOpen()',\n    '[class.mlv-time-picker--12h]': 'mode() === \"12h\"',\n    '[class.mlv-time-picker--with-seconds]': 'showSeconds()',\n  },\n})\nexport class MlvTimePicker\n  extends MlvSignalFormControlBase<string>\n  implements MlvFormControl\n{\n  /** The `HH:mm`/`HH:mm:ss` value used by all Angular forms APIs. */\n  readonly value = model<string>('');\n  /**\n   * Clock mode — `'24h'` for 24-hour display (default) or `'12h'` for AM/PM.\n   */\n  readonly mode = input<MlvTimeMode>('24h');\n\n  /**\n   * When `true`, shows a seconds column in addition to hours and minutes.\n   */\n  readonly showSeconds = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_TIME_PICKER_I18N);\n\n  /** @protected Resolved aria-label: explicit input takes precedence over i18n default. */\n  protected readonly _resolvedAriaLabel = computed(\n    () => this.ariaLabel() ?? this._i18n().timePicker,\n  );\n\n  /** @private Whether the time selection popup is open. */\n  readonly isOpen = signal(false);\n\n  /** @private Internal signal for the selected hour (0–23 in 24h mode; 1–12 in 12h mode). */\n  protected readonly _hour = signal(0);\n\n  /** @private Internal signal for the selected minute (0–59). */\n  protected readonly _minute = signal(0);\n\n  /** @private Internal signal for the selected second (0–59). */\n  protected readonly _second = signal(0);\n\n  /** @private AM/PM period — `'AM'` or `'PM'`. Only relevant in 12h mode. */\n  protected readonly _period = signal<'AM' | 'PM'>('AM');\n\n  /** Unique ID for the message element, used for aria-describedby linking. */\n\n  /** Unique ID for the popup panel, used for aria-controls linking. */\n  readonly panelId = computed(() => `${this.id()}-panel`);\n\n  /** Override focused to also be true when the popup is open. */\n  override readonly focused: Signal<boolean> = computed(\n    () => this._focused() || this.isOpen(),\n  );\n\n  /** @protected Formatted display value shown in the trigger. */\n  protected readonly _displayValue = computed(() => {\n    const is12h = this.mode() === '12h';\n    const hour = is12h ? this._displayHour() : this._hour();\n    const hh = String(hour).padStart(2, '0');\n    const mm = String(this._minute()).padStart(2, '0');\n    const ss = String(this._second()).padStart(2, '0');\n    let base = `${hh}:${mm}`;\n    if (this.showSeconds()) base += `:${ss}`;\n    if (is12h) base += ` ${this._period()}`;\n    return base;\n  });\n\n  /** @protected Hour items for the column — depends on mode. */\n  protected readonly _hourItems = computed(() =>\n    this.mode() === '12h' ? range(1, 13) : range(0, 24),\n  );\n\n  /** @protected Minute items for the column (0–59). */\n  protected readonly _minuteItems = computed(() => range(0, 60));\n\n  /** @protected Second items for the column (0–59). */\n  protected readonly _secondItems = computed(() => range(0, 60));\n\n  /** @protected The hour value shown in the column (1–12 in 12h mode, 0–23 in 24h). */\n  protected readonly _displayHour = computed(() => {\n    if (this.mode() !== '12h') return this._hour();\n    const h = this._hour() % 12;\n    return h === 0 ? 12 : h;\n  });\n\n  /** @private Reference to the trigger element for focus restoration after popup close. */\n  private readonly _triggerRef =\n    viewChild<ElementRef<HTMLElement>>('triggerRef');\n\n  /**\n   * @private The rendered drum-roll columns (hours, minutes, optional seconds),\n   * in DOM order. They are `mlv-time-picker-column` children declared in this\n   * component's own template (inside `mlvPopupContent`), so a signal view query\n   * resolves them — even though the popup content renders in a detached overlay.\n   * Used for focus-on-open and inter-column Arrow navigation instead of reaching\n   * into the overlay DOM by class name.\n   */\n  private readonly _columns = viewChildren(MlvTimePickerColumn);\n\n  /** @private Density directive instance for reading the resolved density level. */\n  private readonly _densityDirective = inject(MlvDensityDirective);\n\n  /** @protected Effective density to pass to the detached popup panel. */\n  protected readonly _effectiveDensity = computed(() =>\n    this._densityDirective.effectiveDensity(),\n  );\n\n  constructor() {\n    super();\n    effect(() => this._applyValue(this.value()));\n  }\n\n  /**\n   * @protected Toggle the popup open/closed state.\n   */\n  protected _toggleDropdown(): void {\n    if (this.computedDisabled()) return;\n    this.isOpen.set(!this.isOpen());\n  }\n\n  /**\n   * @private Build the time string from internal signals.\n   * Always returns 24h format: `HH:mm` or `HH:mm:ss`.\n   */\n  private _buildValue(): string {\n    let hour = this._hour();\n\n    if (this.mode() === '12h') {\n      const displayHour = this._displayHour();\n      if (this._period() === 'AM') {\n        hour = displayHour === 12 ? 0 : displayHour;\n      } else {\n        hour = displayHour === 12 ? 12 : displayHour + 12;\n      }\n    }\n\n    const hh = String(hour).padStart(2, '0');\n    const mm = String(this._minute()).padStart(2, '0');\n    const ss = String(this._second()).padStart(2, '0');\n\n    return this.showSeconds() ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;\n  }\n\n  /**\n   * @private Parse a time string (`HH:mm` or `HH:mm:ss`) into internal signals.\n   */\n  private _parseValue(value: string): void {\n    if (!value) return;\n    const parts = value.split(':').map(Number);\n    const totalHour = parts[0] ?? 0;\n    const minute = parts[1] ?? 0;\n    const second = parts[2] ?? 0;\n\n    this._minute.set(minute);\n    this._second.set(second);\n\n    if (this.mode() === '12h') {\n      this._period.set(totalHour >= 12 ? 'PM' : 'AM');\n      const h12 = totalHour % 12;\n      this._hour.set(h12 === 0 ? 0 : h12); // store 0–11, display as 12 or 1–11\n    } else {\n      this._hour.set(totalHour);\n    }\n  }\n\n  /** Whether the control holds a clearable value — The drum always shows a time, so there is always a value. */\n  readonly hasValue = computed(() => true);\n\n  /** @private Synchronizes drum columns from an external model value. */\n  private _applyValue(value: string): void {\n    if (value) {\n      this._parseValue(value);\n    } else {\n      // Default to current time on null/empty\n      const now = new Date();\n      this._hour.set(now.getHours());\n      this._minute.set(now.getMinutes());\n      this._second.set(now.getSeconds());\n      if (this.mode() === '12h') {\n        this._period.set(now.getHours() >= 12 ? 'PM' : 'AM');\n      }\n    }\n  }\n\n  /**\n   * @protected Called when the popup opens. Focuses the first column listbox\n   * so keyboard navigation is immediately available.\n   */\n  protected _onPopupOpened(): void {\n    this._columns()[0]?.focusList();\n  }\n\n  /**\n   * @protected Called when the popup closes. Restores focus to the trigger element.\n   */\n  protected _onPopupClosed(): void {\n    this.setFocused(false);\n    this._markTouched();\n    this._triggerRef()?.nativeElement.focus();\n  }\n\n  /** @protected Marks the control touched when the trigger loses focus. */\n  protected _onTriggerBlur(): void {\n    this.setFocused(false);\n    this._markTouched();\n  }\n\n  /**\n   * @protected Handle hour column value change.\n   */\n  protected _onHourChange(value: number): void {\n    if (this.mode() === '12h') {\n      // Store 0-based: 12 → 0, 1 → 1, … 11 → 11\n      this._hour.set(value === 12 ? 0 : value);\n    } else {\n      this._hour.set(value);\n    }\n    this._emitValue();\n  }\n\n  /**\n   * @protected Handle minute column value change.\n   */\n  protected _onMinuteChange(value: number): void {\n    this._minute.set(value);\n    this._emitValue();\n  }\n\n  /**\n   * @protected Handle second column value change.\n   */\n  protected _onSecondChange(value: number): void {\n    this._second.set(value);\n    this._emitValue();\n  }\n\n  /**\n   * @protected Toggle the AM/PM period in 12h mode.\n   */\n  protected _onPeriodChange(period: 'AM' | 'PM'): void {\n    this._period.set(period);\n    this._emitValue();\n  }\n\n  /**\n   * @protected Handle ArrowLeft/ArrowRight on the columns container to move\n   * focus between column listboxes.\n   */\n  protected _onPanelKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n\n    const columns = this._columns();\n    if (!columns.length) return;\n\n    const focusedIdx = columns.findIndex(\n      (column) => column.listElement === document.activeElement,\n    );\n    if (focusedIdx === -1) return;\n\n    event.preventDefault();\n\n    const nextIdx = event.key === 'ArrowLeft' ? focusedIdx - 1 : focusedIdx + 1;\n    if (nextIdx < 0 || nextIdx >= columns.length) return;\n\n    columns[nextIdx].focusList();\n  }\n\n  /**\n   * @private Write the current value to the forms model.\n   */\n  private _emitValue(): void {\n    this.value.set(this._buildValue());\n  }\n}\n","<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"]}