@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-time-picker.cjs.entry.js

@@ -0,0 +1,446 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+/* ═══ SUI Time Picker — utilidades de formato/parsing + tipos ════════════════
+ * Helpers puros (sin Stencil) para construir las listas de hora/minuto, parsear
+ * y formatear el valor del time picker. Portados 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-time-picker/time-picker-utils.ts).
+ *
+ * Viven en este archivo hermano (NO en el .tsx) porque Stencil prohibe
+ * `export const` / `export function` / `export enum` en el componente .tsx
+ * (rompe el build). Solo `export class` + `export type`/`export interface`
+ * van en el .tsx; data/catalogos/helpers van aqui.
+ * ════════════════════════════════════════════════════════════════════════ */
+/** Pad a 2 digitos: 9 → "09". */
+function pad2(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/**
+ * Convierte una hora 24h (0–23) a su par display (hora 12h 1–12 + periodo).
+ *   0  → { hour12: 12, period: 'AM' }
+ *   13 → { hour12: 1,  period: 'PM' }
+ */
+function to12h(hours24) {
+    const period = hours24 >= 12 ? 'PM' : 'AM';
+    let hour12 = hours24 % 12;
+    if (hour12 === 0)
+        hour12 = 12;
+    return { hour12, period };
+}
+/**
+ * Convierte una hora 12h (1–12) + periodo a hora 24h (0–23).
+ *   (12, 'AM') → 0
+ *   (1,  'PM') → 13
+ */
+function to24h(hour12, period) {
+    const base = hour12 % 12; // 12 → 0
+    return period === 'PM' ? base + 12 : base;
+}
+/**
+ * Formatea un SuiTimeValue para mostrarlo en el trigger / item.
+ *   - 12h → "09:30 AM"
+ *   - 24h → "21:30"
+ */
+function formatTime(value, format) {
+    if (format === '24h') {
+        return `${pad2(value.hours)}:${pad2(value.minutes)}`;
+    }
+    const { hour12, period } = to12h(value.hours);
+    return `${pad2(hour12)}:${pad2(value.minutes)} ${period}`;
+}
+/**
+ * Parsea un string de hora hacia SuiTimeValue. Acepta:
+ *   "9:30 AM", "09:30 am", "21:30", "9:5" → tolerante.
+ * Devuelve null si no se puede interpretar.
+ */
+function parseTime(input) {
+    var _a;
+    if (!input)
+        return null;
+    const trimmed = input.trim();
+    const match = trimmed.match(/^(\d{1,2})\s*[:.\s]\s*(\d{1,2})\s*(am|pm|AM|PM)?$/);
+    if (!match)
+        return null;
+    let h = parseInt(match[1], 10);
+    const m = parseInt(match[2], 10);
+    const period = (_a = match[3]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (Number.isNaN(h) || Number.isNaN(m))
+        return null;
+    if (m < 0 || m > 59)
+        return null;
+    if (period) {
+        if (h < 1 || h > 12)
+            return null;
+        h = to24h(h, period);
+    }
+    else {
+        if (h < 0 || h > 23)
+            return null;
+    }
+    return { hours: h, minutes: m };
+}
+/**
+ * Genera la lista de horas a mostrar en la columna scrollable.
+ *   - 12h → [1..12]
+ *   - 24h → [0..23]
+ */
+function buildHourList(format) {
+    if (format === '24h') {
+        return Array.from({ length: 24 }, (_, i) => i);
+    }
+    return Array.from({ length: 12 }, (_, i) => i + 1); // 1..12
+}
+/**
+ * Genera la lista de minutos segun el step (1, 5, 15, etc.).
+ * step=5 → [0,5,10,...,55].
+ */
+function buildMinuteList(step) {
+    const safeStep = step > 0 && step <= 60 ? step : 1;
+    const out = [];
+    for (let m = 0; m < 60; m += safeStep)
+        out.push(m);
+    return out;
+}
+/** Construye los items de la columna de horas (raw + label con pad). */
+function buildHourItems(format) {
+    return buildHourList(format).map((h) => ({ raw: h, label: pad2(h) }));
+}
+/** Construye los items de la columna de minutos (raw + label con pad). */
+function buildMinuteItems(step) {
+    return buildMinuteList(step).map((m) => ({ raw: m, label: pad2(m) }));
+}
+/** Los dos periodos disponibles en formato 12h. */
+const TIME_PERIODS = ['AM', 'PM'];
+
+const suiTimePickerCss = () => `@charset "UTF-8";.sc-sui-time-picker-h{display:inline-block;position:relative;font-family:var(--sui-font-sans, sans-serif)}.sui-time-picker__trigger.sc-sui-time-picker{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));cursor:pointer;outline:none;font:inherit;box-sizing:border-box;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)), box-shadow var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}.sui-time-picker__trigger.sc-sui-time-picker:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger.sc-sui-time-picker:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px color-mix(in oklab, var(--sui-stroke-strong-950, #171717) 16%, transparent)}.sui-time-picker__trigger--error.sc-sui-time-picker{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open.sc-sui-time-picker{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger.sc-sui-time-picker:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}[data-sui-size=small].sc-sui-time-picker-h .sui-time-picker__trigger.sc-sui-time-picker{height:36px;border-radius:var(--sui-radius-8, 8px)}[data-sui-size=large].sc-sui-time-picker-h .sui-time-picker__trigger.sc-sui-time-picker{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}[data-sui-size=xlarge].sc-sui-time-picker-h .sui-time-picker__trigger.sc-sui-time-picker{height:52px;padding:0 16px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-time-picker__trigger-icon.sc-sui-time-picker,.sui-time-picker__trigger-chevron.sc-sui-time-picker{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text.sc-sui-time-picker{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -0.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-time-picker__trigger-text--placeholder.sc-sui-time-picker{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-time-picker__label-host.sc-sui-time-picker{display:block;margin-bottom:4px;cursor:pointer}.sui-time-picker__hint-host.sc-sui-time-picker{display:block;margin-top:4px}.sui-time-picker__panel.sc-sui-time-picker{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;flex-direction:column;min-width:240px;box-sizing:border-box;font-family:var(--sui-font-sans, sans-serif);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, 0.1019607843));overflow:hidden;max-height:360px;animation:sui-time-picker-enter var(--sui-motion-duration-fast, 160ms) var(--sui-motion-ease-out, cubic-bezier(0.23, 1, 0.32, 1))}.sui-time-picker__panel--inline.sc-sui-time-picker{position:static;animation:none;max-height:none}@keyframes sui-time-picker-enter{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-time-picker__columns.sc-sui-time-picker{display:flex;gap:4px;padding:12px;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-time-picker__column.sc-sui-time-picker{display:flex;flex-direction:column;gap:2px;max-height:188px;min-width:72px;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y proximity;scrollbar-width:none}.sui-time-picker__column.sc-sui-time-picker::-webkit-scrollbar{display:none}.sui-time-picker__column--period.sc-sui-time-picker{min-width:56px}.sui-time-picker__option.sc-sui-time-picker{flex-shrink:0;scroll-snap-align:start}[data-sui-size=large].sc-sui-time-picker-h .sui-time-picker__trigger-text.sc-sui-time-picker,[data-sui-size=xlarge].sc-sui-time-picker-h .sui-time-picker__trigger-text.sc-sui-time-picker{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}.sui-time-picker__panel--large.sc-sui-time-picker .sui-time-picker__option.sc-sui-time-picker{height:44px;padding:10px 12px}@media (max-width: 767px){.sui-time-picker__option.sc-sui-time-picker{height:44px;padding:12px}}.sui-time-picker__presets.sc-sui-time-picker{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-time-picker__footer.sc-sui-time-picker{display:flex;gap:16px;padding:16px}.sui-time-picker__footer.sc-sui-time-picker sui-button.sc-sui-time-picker{flex:1 0 0;min-width:0}@media (max-width: 767px){.sui-time-picker__panel.sc-sui-time-picker:not(.sui-time-picker__panel--inline){width:calc(100vw - 32px);max-width:360px}.sui-time-picker__columns.sc-sui-time-picker{justify-content:space-between}.sui-time-picker__column.sc-sui-time-picker{flex:1 1 0}}`;
+
+const SuiTimePicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.opened = index.createEvent(this, "opened");
+        this.closed = index.createEvent(this, "closed");
+        /* ── 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 : { 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};
+        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 (index.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 }, index.h("div", { class: "sui-time-picker__columns" }, index.h("div", { class: "sui-time-picker__column", role: "listbox", "aria-label": "Hora" }, this.hourItems.map((item) => (index.h("sui-time-picker-item", { class: "sui-time-picker__option", time: item.label, active: this.isHourActive(item), onClicked: () => this.selectHour(item) })))), index.h("div", { class: "sui-time-picker__column", role: "listbox", "aria-label": "Minuto" }, this.minuteItems.map((item) => (index.h("sui-time-picker-item", { class: "sui-time-picker__option", time: item.label, active: this.isMinuteActive(item), onClicked: () => this.selectMinute(item) })))), this.showPeriod && (index.h("div", { class: "sui-time-picker__column sui-time-picker__column--period", role: "listbox", "aria-label": "AM/PM" }, this.periods.map((p) => (index.h("sui-time-picker-item", { class: "sui-time-picker__option", time: p, active: this.isPeriodActive(p), onClicked: () => this.selectPeriod(p) })))))), this.durationPresets.length > 0 && (index.h("div", { class: "sui-time-picker__presets", role: "group", "aria-label": "Duraci\u00F3n r\u00E1pida" }, this.durationPresets.map((p, index$1) => (index.h("sui-time-picker-duration", { label: p.label, active: this.isPresetActive(index$1), onClicked: () => this.selectPreset(p, index$1) }))))), this.showFooter && (index.h("footer", { class: "sui-time-picker__footer" }, index.h("sui-button", { variant: "stroke", color: "neutral", size: this.footerButtonSize, type: "button", onClick: this.cancel }, "Cancelar"), index.h("sui-button", { variant: "filled", color: "primary", size: this.footerButtonSize, type: "button", onClick: this.apply }, "Aplicar")))));
+    }
+    render() {
+        const showPanel = this.inline || this.open;
+        return (index.h(index.Host, { key: 'dd7921920d57e32d878e9170d93c338343a82363', "data-sui-open": this.open ? '' : null, "data-sui-format": this.format, "data-sui-size": this.size }, this.label && (index.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 && (index.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 }, index.h("sui-icon", { key: '90080978172e00833ee88f1ee29fd21c6fbb16ab', class: "sui-time-picker__trigger-icon", name: "time-line", size: 20 }), index.h("span", { key: 'dcfb624b7de63e69931d389f7751ccd1fde04b32', class: {
+                'sui-time-picker__trigger-text': true,
+                'sui-time-picker__trigger-text--placeholder': !this.resolvedValue,
+            } }, this.triggerText), index.h("sui-icon", { key: 'fb99ccc5078e0cec80311770e8eb54333b8a6914', class: "sui-time-picker__trigger-chevron", name: "arrow-down-s-line", size: 20 }))), this.hasHint && (index.h("sui-form-hint", { key: 'e3a4f427d903200ff2a831288e0cdfe4220cfa60', class: "sui-time-picker__hint-host", message: this.hintMessage, variant: this.error ? 'error' : 'neutral' })), showPanel && this.renderPanel()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SuiTimePicker.style = suiTimePickerCss();
+
+exports.sui_time_picker = SuiTimePicker;