@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-time-picker/sui-time-picker.js

@@ -0,0 +1,836 @@
+import { Host, h, } from "@stencil/core";
+import { buildHourItems, buildMinuteItems, formatTime, parseTime, to12h, to24h, TIME_PERIODS, } from "./sui-time-picker.data";
+/**
+ * `<sui-time-picker>` — SUI Design System (SUI Design System 2.0). COMPUESTO + COMPLEJO.
+ *
+ * Portado 1:1 del componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-time-picker/). Misma API
+ * publica (label/sublabel/required/tooltip/hint/errorMessage/error/placeholder/
+ * disabled/size/format/step/durationPresets/inline/showFooter/value), TODAS las
+ * variantes/states/comportamiento (overlay popover + outside-click + Escape,
+ * staged-value + Cancel/Apply, seleccion por columna en 12h/24h, presets de
+ * duracion, lazy mount del panel, mobile) y mismos VALORES exactos (tokens del
+ * DS, no hex). El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ *   TimePickerItems          165483:5687  (fila — sub-componente sui-time-picker-item)
+ *   TimePickerSelectDuration 165483:6046  (pill duracion — sui-time-picker-duration)
+ *   TimePickerSelectStatus   165596:41348 (pill estado — sui-time-picker-status)
+ * El panel contenedor no tiene nodo dedicado; se compone aqui a partir de los
+ * sub-componentes + el chrome de popover canon del DS (sui-datepicker). El status
+ * pill NO se monta en este popover por default (es para schedulers/disponibilidad);
+ * el consumer lo usa suelto, igual que <sui-time-picker-item> fuera del picker.
+ *
+ * Arquitectura: trigger (input field) que abre un panel con columnas scrollables
+ * de hora / minuto / (periodo AM-PM en 12h) usando <sui-time-picker-item>, mas
+ * una fila opcional de presets de duracion usando <sui-time-picker-duration>.
+ * Patron staged-value + Cancel/Apply. El modo `inline` renderea el panel inline
+ * (sin trigger ni flotacion).
+ *
+ * DIFERENCIA vs Angular (intencional, equivalente funcional):
+ *   - El Angular delega el overlay a `sui-dropdown-menu` (CDK Overlay con flip
+ *     arriba/abajo). En Stencil no hay CDK; se replica el patron del
+ *     `<sui-datepicker>` ya portado: panel position:absolute con lazy-mount +
+ *     `@Listen('pointerdown', target:'document')` para outside-click y Escape.
+ *     Mismo contrato observable (abre abajo del trigger, cierra al click fuera /
+ *     Escape, esos closes = cancel). El chrome (radius-20, border soft-200,
+ *     shadow-medium) es identico.
+ *   - CVA (ControlValueAccessor) es Angular-only. El contrato equivalente es el
+ *     prop `value` (SuiTimeValue | string | null) + el evento `valueChange`. El
+ *     setter acepta string y lo parsea (preserva el writeValue(string) del CVA).
+ *
+ * `scoped: true` (light DOM): asi `:host([data-sui-*])` reflejan el estado del
+ * host, el outside-click compara `contains(target)` contra el host real, y los
+ * `<sui-*>` internos heredan tokens del global sin pelear con shadow DOM.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend en PASIVO (como
+ * SuiToque del SUI Angular); los eventos táctiles del trigger burbujean hasta él
+ * y sui-button, las filas y las pills lo manejan en su propio componente.
+ *
+ * @prop label / sublabel / required / tooltip / hint / errorMessage / error
+ * @prop placeholder / disabled / size
+ * @prop format — '12h' (default, AM/PM) | '24h'
+ * @prop step — incremento de minutos en la lista (default 5)
+ * @prop durationPresets — pills de duracion rapida (default `[]`; pasar DEFAULT_DURATION_PRESETS para 15/30/45/60)
+ * @prop inline — renderea el panel sin trigger ni popover
+ * @prop showFooter — muestra Cancel/Apply (default true)
+ * @prop value — SuiTimeValue | string | null (string se parsea)
+ *
+ * Homologado con el SUI Angular (05-11-2026): sizes large (48) y xlarge (52) con
+ * panel grande (filas de 44, texto 16) y Cancelar/Aplicar en large (también
+ * siempre en mobile ≤767 px), placeholder «Elige una hora», `durationPresets`
+ * vacío por default (BREAKING: antes 15/30/45/60 — se aplicaban como hora desde
+ * la medianoche y rompían la hora), el panel inline se hidrata desde `value`,
+ * las columnas se centran en la selección al abrir y el host borra su `title`.
+ * Se omiten CVA y el CDK Overlay (Angular-only): el panel sigue montado dentro
+ * del host con position:absolute y outside-click/Escape propios.
+ */
+export class SuiTimePicker {
+    constructor() {
+        /* ── Label / hint ── */
+        /** Label superior (mismo slot que sui-input/sui-select). `''` = sin label. */
+        this.label = '';
+        /** Sublabel del form-label. `''` = sin sublabel. */
+        this.sublabel = '';
+        /** Marca el campo como requerido (asterisco en el label). Default `false`. */
+        this.required = false;
+        /** Tooltip del form-label. `''` = sin tooltip. */
+        this.tooltip = '';
+        /** Texto de ayuda bajo el trigger. `''` = sin hint. */
+        this.hint = '';
+        /** Mensaje de error (reemplaza el hint cuando error=true). `''` = sin mensaje. */
+        this.errorMessage = '';
+        /** Estado de error (border rojo + errorMessage). Default `false`. */
+        this.error = false;
+        /** Placeholder del trigger cuando no hay valor. Imperativo con tuteo. Default `Elige una hora`. */
+        this.placeholder = 'Elige una hora';
+        /** Deshabilitado: bloquea el trigger. Default `false`. */
+        this.disabled = false;
+        /**
+         * Alto del campo: small 36 · medium 40 (default) · large 48 · xlarge 52
+         * (extensiones SUI para mobile, el alto de sui-input large/xlarge). En
+         * large/xlarge las filas del panel miden 44 y Cancelar/Aplicar van en large.
+         */
+        this.size = 'medium';
+        /* ── Comportamiento ── */
+        /** Formato de display: `12h` (AM/PM) o `24h`. Default `12h`. */
+        this.format = '12h';
+        /** Incremento de minutos de la lista (1, 5, 15, ...). Default `5`. */
+        this.step = 5;
+        /**
+         * Pills de duracion rapida bajo las columnas (property binding). Default `[]`:
+         * los presets se aplican como «tiempo desde la medianoche» («30 min» → 12:30 AM).
+         * Para mostrarlos, pasar `DEFAULT_DURATION_PRESETS` o una lista propia.
+         */
+        this.durationPresets = [];
+        /** Renderea el panel inline (sin trigger ni popover). Default `false`. */
+        this.inline = false;
+        /** Muestra Cancel/Apply. Si false, el click en un item aplica directo. Default `true`. */
+        this.showFooter = true;
+        /**
+         * Valor actual (property binding o attr string). SuiTimeValue, un string como
+         * "9:30 PM" / "21:30" (se parsea), o null. Default `null`. El consumer hace el
+         * two-way binding escuchando `valueChange`.
+         */
+        this.value = null;
+        /* ── Internal state ── */
+        /** Popover abierto. */
+        this.open = false;
+        /** Valor canonico resuelto (string parseado o el objeto tal cual). */
+        this.resolvedValue = null;
+        /** Valor staged (editable en el panel hasta Apply). */
+        this.staged = null;
+        /** Indice del preset de duracion activo — `null` = ninguno. */
+        this.activePresetIndex = null;
+        /** Mobile (≤767 px): Cancelar/Aplicar siempre en large (se tocan con el dedo). */
+        this.isMobile = false;
+        this.onMql = (ev) => {
+            this.isMobile = ev.matches;
+        };
+        /* ── Actions ── */
+        this.toggle = () => {
+            if (this.isDisabled)
+                return;
+            if (this.open) {
+                this.cancel();
+            }
+            else {
+                this.openPopover();
+            }
+        };
+        this.cancel = () => {
+            this.activePresetIndex = null;
+            this.staged = this.resolvedValue;
+            this.open = false;
+            this.closed.emit();
+        };
+        this.apply = () => {
+            const s = this.staged;
+            this.value = s;
+            this.resolvedValue = s;
+            this.valueChange.emit(s);
+            this.open = false;
+            this.closed.emit();
+        };
+    }
+    componentWillLoad() {
+        var _a, _b;
+        // Strip del `title` nativo del host (tooltip gris del OS; regla del DS).
+        this.el.removeAttribute('title');
+        this.resolvedValue = this.normalizeValue(this.value);
+        this.staged = this.resolvedValue;
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            this.mql = window.matchMedia('(max-width: 767px)');
+            this.isMobile = this.mql.matches;
+            (_b = (_a = this.mql).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.onMql);
+        }
+    }
+    componentDidLoad() {
+        if (this.inline)
+            this.scrollColumnsToSelection();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_b = (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.onMql);
+    }
+    /**
+     * Al cambiar value desde afuera (estando cerrado), re-sincroniza staged. En
+     * inline `open` es siempre false → también hidrata la selección (antes el
+     * panel inline abría vacío y Aplicar borraba el valor).
+     */
+    onValueChange() {
+        this.resolvedValue = this.normalizeValue(this.value);
+        if (!this.open)
+            this.staged = this.resolvedValue;
+    }
+    normalizeValue(v) {
+        if (v === null || v === undefined)
+            return null;
+        return typeof v === 'string' ? parseTime(v) : v;
+    }
+    /* ── Derived ── */
+    get isDisabled() {
+        return this.disabled;
+    }
+    /** sui-form-label/hint no tienen large: quedan en medium (small sigue small). */
+    get labelSize() {
+        return this.size === 'small' ? 'small' : 'medium';
+    }
+    /** Panel grande (filas de 44 con texto 16) con el campo large o xlarge. */
+    get panelLarge() {
+        return this.size === 'large' || this.size === 'xlarge';
+    }
+    /** Botones del footer: large con el campo large/xlarge y siempre en mobile; small (Figma) si no. */
+    // shortcut: `large` de sui-button llega con homolog/H1; hasta integrarla el botón no tiene ese size. Al integrar, quitar el cast.
+    get footerButtonSize() {
+        return (this.panelLarge || this.isMobile ? 'large' : 'small');
+    }
+    get hourItems() {
+        return buildHourItems(this.format);
+    }
+    get minuteItems() {
+        return buildMinuteItems(this.step);
+    }
+    get periods() {
+        return TIME_PERIODS;
+    }
+    /** En 12h se muestra la columna de periodo. */
+    get showPeriod() {
+        return this.format === '12h';
+    }
+    /** Display 12h de la staged (hora 1–12 + periodo). */
+    get staged12h() {
+        const s = this.staged;
+        if (!s)
+            return null;
+        return to12h(s.hours);
+    }
+    /** Texto del trigger. */
+    get triggerText() {
+        const v = this.resolvedValue;
+        if (!v)
+            return this.placeholder;
+        return formatTime(v, this.format);
+    }
+    get hintMessage() {
+        return this.error ? this.errorMessage : this.hint;
+    }
+    get hasHint() {
+        return !this.inline && !!this.hintMessage;
+    }
+    /* ── Estados de seleccion por columna ── */
+    isHourActive(item) {
+        var _a;
+        const s = this.staged;
+        if (!s)
+            return false;
+        if (this.format === '24h')
+            return s.hours === item.raw;
+        return ((_a = this.staged12h) === null || _a === void 0 ? void 0 : _a.hour12) === item.raw;
+    }
+    isMinuteActive(item) {
+        var _a;
+        return ((_a = this.staged) === null || _a === void 0 ? void 0 : _a.minutes) === item.raw;
+    }
+    isPeriodActive(p) {
+        var _a;
+        return ((_a = this.staged12h) === null || _a === void 0 ? void 0 : _a.period) === p;
+    }
+    isPresetActive(index) {
+        return this.activePresetIndex === index;
+    }
+    openPopover() {
+        var _a;
+        if (this.isDisabled)
+            return;
+        // Hidratar staged desde value() — si no hay, default a 09:00 para tener anclaje.
+        this.staged = (_a = this.resolvedValue) !== null && _a !== void 0 ? _a : { hours: 9, minutes: 0 };
+        this.activePresetIndex = null;
+        this.open = true;
+        this.opened.emit();
+        // El panel monta en el próximo render: recién ahí existen las columnas.
+        requestAnimationFrame(() => this.scrollColumnsToSelection());
+    }
+    /**
+     * Centra la opción activa de cada columna (hora / minuto / periodo) en su
+     * viewport, sin animación: el panel aparece ya posicionado. Con un step que
+     * no contiene el minuto exacto (-1) la columna queda en su scroll actual.
+     */
+    scrollColumnsToSelection() {
+        if (!this.staged)
+            return;
+        const cols = Array.from(this.el.querySelectorAll('.sui-time-picker__column'));
+        const active = [
+            this.hourItems.findIndex((i) => this.isHourActive(i)),
+            this.minuteItems.findIndex((i) => this.isMinuteActive(i)),
+            this.periods.findIndex((p) => this.isPeriodActive(p)),
+        ];
+        cols.forEach((col, c) => {
+            var _a;
+            const item = active[c] >= 0 ? ((_a = col.children[active[c]]) !== null && _a !== void 0 ? _a : null) : null;
+            if (!item)
+                return;
+            const delta = item.getBoundingClientRect().top - col.getBoundingClientRect().top;
+            col.scrollTop = col.scrollTop + delta - (col.clientHeight - item.offsetHeight) / 2;
+        });
+    }
+    selectHour(item) {
+        var _a, _b, _c;
+        const cur = (_a = this.staged) !== null && _a !== void 0 ? _a : { hours: 0, minutes: 0 };
+        let hours;
+        if (this.format === '24h') {
+            hours = item.raw;
+        }
+        else {
+            const period = (_c = (_b = this.staged12h) === null || _b === void 0 ? void 0 : _b.period) !== null && _c !== void 0 ? _c : 'AM';
+            hours = to24h(item.raw, period);
+        }
+        this.setStaged({ hours, minutes: cur.minutes });
+    }
+    selectMinute(item) {
+        var _a;
+        const cur = (_a = this.staged) !== null && _a !== void 0 ? _a : { hours: 0, minutes: 0 };
+        this.setStaged({ hours: cur.hours, minutes: item.raw });
+    }
+    selectPeriod(p) {
+        var _a;
+        const cur = (_a = this.staged) !== null && _a !== void 0 ? _a : { hours: 0, minutes: 0 };
+        const { hour12 } = to12h(cur.hours);
+        this.setStaged({ hours: to24h(hour12, p), minutes: cur.minutes });
+    }
+    /**
+     * Aplica un preset de duracion. Lo interpreta como "hora del dia = duracion
+     * desde medianoche" (ej. 30 min → 00:30, 1 h → 01:00). Lectura mas directa de
+     * un selector de duracion sin una base externa.
+     */
+    selectPreset(p, index) {
+        const total = p.minutes;
+        this.setStaged({ hours: Math.floor(total / 60) % 24, minutes: total % 60 });
+        this.activePresetIndex = index;
+    }
+    /** Setea staged y, si no hay footer, aplica directo (UX rapido). */
+    setStaged(v) {
+        this.staged = v;
+        if (!this.showFooter) {
+            this.value = v;
+            this.resolvedValue = v;
+            this.valueChange.emit(v);
+        }
+    }
+    /* ── Outside click / Escape (cierran el popover = cancel) ── */
+    onDocPointerDown(ev) {
+        if (!this.open)
+            return;
+        const target = ev.target;
+        if (target && this.el.contains(target))
+            return;
+        this.cancel();
+    }
+    onDocKeydown(ev) {
+        if (this.open && ev.key === 'Escape')
+            this.cancel();
+    }
+    /* ── iOS :active fix (host) ── */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a proposito. */
+    }
+    onTouchEnd(event) {
+        const t = event.target;
+        const btn = t === null || t === void 0 ? void 0 : t.closest('button');
+        if (btn)
+            btn.blur();
+    }
+    /* ── Render helpers ── */
+    renderPanel() {
+        return (h("div", { class: {
+                'sui-time-picker__panel': true,
+                'sui-time-picker__panel--inline': this.inline,
+                'sui-time-picker__panel--large': this.panelLarge,
+            }, role: "dialog", "aria-label": this.label || this.placeholder }, h("div", { class: "sui-time-picker__columns" }, h("div", { class: "sui-time-picker__column", role: "listbox", "aria-label": "Hora" }, this.hourItems.map((item) => (h("sui-time-picker-item", { class: "sui-time-picker__option", time: item.label, active: this.isHourActive(item), onClicked: () => this.selectHour(item) })))), h("div", { class: "sui-time-picker__column", role: "listbox", "aria-label": "Minuto" }, this.minuteItems.map((item) => (h("sui-time-picker-item", { class: "sui-time-picker__option", time: item.label, active: this.isMinuteActive(item), onClicked: () => this.selectMinute(item) })))), this.showPeriod && (h("div", { class: "sui-time-picker__column sui-time-picker__column--period", role: "listbox", "aria-label": "AM/PM" }, this.periods.map((p) => (h("sui-time-picker-item", { class: "sui-time-picker__option", time: p, active: this.isPeriodActive(p), onClicked: () => this.selectPeriod(p) })))))), this.durationPresets.length > 0 && (h("div", { class: "sui-time-picker__presets", role: "group", "aria-label": "Duraci\u00F3n r\u00E1pida" }, this.durationPresets.map((p, index) => (h("sui-time-picker-duration", { label: p.label, active: this.isPresetActive(index), onClicked: () => this.selectPreset(p, index) }))))), this.showFooter && (h("footer", { class: "sui-time-picker__footer" }, h("sui-button", { variant: "stroke", color: "neutral", size: this.footerButtonSize, type: "button", onClick: this.cancel }, "Cancelar"), h("sui-button", { variant: "filled", color: "primary", size: this.footerButtonSize, type: "button", onClick: this.apply }, "Aplicar")))));
+    }
+    render() {
+        const showPanel = this.inline || this.open;
+        return (h(Host, { key: 'dd7921920d57e32d878e9170d93c338343a82363', "data-sui-open": this.open ? '' : null, "data-sui-format": this.format, "data-sui-size": this.size }, this.label && (h("sui-form-label", { key: 'aa8aa585f44d61afe7f27a82adefc752bf21dbc3', class: "sui-time-picker__label-host", label: this.label, sublabel: this.sublabel || undefined, required: this.required, tooltip: this.tooltip || undefined, size: this.labelSize, onClick: this.toggle })), !this.inline && (h("button", { key: 'b5d918066715a9a060e196e2d9343905c9b3a2ec', type: "button", class: {
+                'sui-time-picker__trigger': true,
+                'sui-time-picker__trigger--error': this.error,
+                'sui-time-picker__trigger--open': this.open,
+                'sui-time-picker__trigger--filled': this.resolvedValue !== null,
+            }, disabled: this.isDisabled || undefined, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', onClick: this.toggle }, h("sui-icon", { key: '90080978172e00833ee88f1ee29fd21c6fbb16ab', class: "sui-time-picker__trigger-icon", name: "time-line", size: 20 }), h("span", { key: 'dcfb624b7de63e69931d389f7751ccd1fde04b32', class: {
+                'sui-time-picker__trigger-text': true,
+                'sui-time-picker__trigger-text--placeholder': !this.resolvedValue,
+            } }, this.triggerText), h("sui-icon", { key: 'fb99ccc5078e0cec80311770e8eb54333b8a6914', class: "sui-time-picker__trigger-chevron", name: "arrow-down-s-line", size: 20 }))), this.hasHint && (h("sui-form-hint", { key: 'e3a4f427d903200ff2a831288e0cdfe4220cfa60', class: "sui-time-picker__hint-host", message: this.hintMessage, variant: this.error ? 'error' : 'neutral' })), showPanel && this.renderPanel()));
+    }
+    static get is() { return "sui-time-picker"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-time-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-time-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label superior (mismo slot que sui-input/sui-select). `''` = sin label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sublabel del form-label. `''` = sin sublabel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sublabel",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca el campo como requerido (asterisco en el label). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip del form-label. `''` = sin tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip",
+                "defaultValue": "''"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de ayuda bajo el trigger. `''` = sin hint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "''"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensaje de error (reemplaza el hint cuando error=true). `''` = sin mensaje."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "''"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado de error (border rojo + errorMessage). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder del trigger cuando no hay valor. Imperativo con tuteo. Default `Elige una hora`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Elige una hora'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilitado: bloquea el trigger. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | 'xlarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alto del campo: small 36 \u00B7 medium 40 (default) \u00B7 large 48 \u00B7 xlarge 52\n(extensiones SUI para mobile, el alto de sui-input large/xlarge). En\nlarge/xlarge las filas del panel miden 44 y Cancelar/Aplicar van en large."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiTimeFormat",
+                    "resolved": "\"12h\" | \"24h\"",
+                    "references": {
+                        "SuiTimeFormat": {
+                            "location": "import",
+                            "path": "./sui-time-picker.data",
+                            "id": "src/components/sui-time-picker/sui-time-picker.data.ts::SuiTimeFormat",
+                            "referenceLocation": "SuiTimeFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Formato de display: `12h` (AM/PM) o `24h`. Default `12h`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "format",
+                "defaultValue": "'12h'"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Incremento de minutos de la lista (1, 5, 15, ...). Default `5`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "5"
+            },
+            "durationPresets": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "readonly SuiTimeDurationPreset[]",
+                    "resolved": "readonly SuiTimeDurationPreset[]",
+                    "references": {
+                        "SuiTimeDurationPreset": {
+                            "location": "import",
+                            "path": "./sui-time-picker.data",
+                            "id": "src/components/sui-time-picker/sui-time-picker.data.ts::SuiTimeDurationPreset",
+                            "referenceLocation": "SuiTimeDurationPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pills de duracion rapida bajo las columnas (property binding). Default `[]`:\nlos presets se aplican como \u00ABtiempo desde la medianoche\u00BB (\u00AB30 min\u00BB \u2192 12:30 AM).\nPara mostrarlos, pasar `DEFAULT_DURATION_PRESETS` o una lista propia."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "inline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renderea el panel inline (sin trigger ni popover). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inline",
+                "defaultValue": "false"
+            },
+            "showFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra Cancel/Apply. Si false, el click en un item aplica directo. Default `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer",
+                "defaultValue": "true"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SuiTimeValue | string | null",
+                    "resolved": "SuiTimeValue | null | string",
+                    "references": {
+                        "SuiTimeValue": {
+                            "location": "import",
+                            "path": "./sui-time-picker.data",
+                            "id": "src/components/sui-time-picker/sui-time-picker.data.ts::SuiTimeValue",
+                            "referenceLocation": "SuiTimeValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor actual (property binding o attr string). SuiTimeValue, un string como\n\"9:30 PM\" / \"21:30\" (se parsea), o null. Default `null`. El consumer hace el\ntwo-way binding escuchando `valueChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "resolvedValue": {},
+            "staged": {},
+            "activePresetIndex": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite el valor confirmado (al Apply, o al click en un item si showFooter=false)."
+                },
+                "complexType": {
+                    "original": "SuiTimeValue | null",
+                    "resolved": "SuiTimeValue | null",
+                    "references": {
+                        "SuiTimeValue": {
+                            "location": "import",
+                            "path": "./sui-time-picker.data",
+                            "id": "src/components/sui-time-picker/sui-time-picker.data.ts::SuiTimeValue",
+                            "referenceLocation": "SuiTimeValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "opened",
+                "name": "opened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite cuando el popover se abre."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite cuando el popover se cierra (Cancel, outside-click, Escape, Apply)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "onDocPointerDown",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "onDocKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}