@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-input/sui-input.js

@@ -0,0 +1,1232 @@
+import { Host, h, } from "@stencil/core";
+import { CARD_MAX_DIGITS, formatAmountLive, formatAmountOnBlur, formatCardDigits, recibeTexto, sanitizeAmount, } from "./sui-input.utils";
+let uid = 0;
+/**
+ * `<sui-input>` — SUI Design System 2.0.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026): misma API,
+ * mismos estados y mismo comportamiento (máscaras amount/card, filtros de
+ * teclado number/tel, password-toggle, clear, split-field con divisor por lado,
+ * blur al tocar fuera para bajar el teclado de iOS). Valores vía tokens del DS.
+ *
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — "Input Field" (266:5245, 417:6793, 417:9933,
+ * 267:1063, 267:1279, 267:1235). Tamaños (alto / padding Figma / radius):
+ *   - xsmall 32 — py 6 pl 8 pr 6, gap 6, r 8
+ *   - small  36 — py 8 pl 10 pr 8, gap 8, r 8
+ *   - medium 40 — py 10 pl 12 pr 10, gap 8, r 10 (default)
+ *   - large  48 — py 12 pl 14 pr 12, gap 10, r 12 (extensión SUI, texto 16/24)
+ *   - xlarge 52 — py 14 pl 16 pr 14, gap 10, r 12 (extensión SUI, texto 16/24)
+ *   En CSS el py va 1px abajo: el borde de 1px se suma por encima.
+ *
+ * Teclado: `inputmode` lo deduce el `type` (numeric/decimal/tel/email/url) pero
+ * NUNCA `search`: en Android ese inputmode marca el campo como multilínea y
+ * tapa la lupa. `type="search"` pide la lupa con `enterkeyhint="search"`.
+ * Las dos se pueden forzar con los props `inputmode` / `enterkeyhint`.
+ *
+ * ── Divergencias con el Angular ───────────────────────────────────────────
+ *  1. `model` + ControlValueAccessor → `@Prop() value` (controlled) + evento
+ *     `valueChange`. El consumer escucha `valueChange` y reescribe `value`.
+ *  2. El prefijo se llama `inputPrefix` (atributo `input-prefix`): `prefix`
+ *     choca con `Node.prefix` del DOM.
+ *  3. Los textos (Limpiar, Mostrar/Ocultar contraseña) van fijos en español:
+ *     el `provideSuiTextos` del Angular es DI y acá no existe.
+ *  4. Slots `start` / `end` (en Angular `[data-slot=start|end]`).
+ *
+ * `scoped: true` (light DOM): el label `for` y el `aria-describedby` enlazan
+ * por id con el `<input>` interno.
+ */
+export class SuiInput {
+    constructor() {
+        // ── Core props ───────────────────────────────────────────────────────────
+        /** Tamaño del field. Default `medium` (40px). `large` 48 y `xlarge` 52. */
+        this.size = 'medium';
+        /** Tipo lógico del input (controla nativeType + inputmode + máscaras + filtros). Default `text`. */
+        this.type = 'text';
+        /** Texto placeholder. */
+        this.placeholder = '';
+        /** Deshabilita el field (bg-weak-50, sin border, no editable). Default `false`. */
+        this.disabled = false;
+        /** Solo lectura (bg-weak-50, border suave, no editable pero seleccionable). Default `false`. */
+        this.readonly = false;
+        /**
+         * Esquinas de píldora (999px) en vez del radio por tamaño. Opt-in: para un
+         * buscador arriba de una lista o un filtro al lado de chips. Mismo nombre que
+         * en `sui-compact-button` y en Figma («fullRadius»). Default `false`.
+         */
+        this.fullRadius = false;
+        /** Activa borde rojo + muestra `errorMessage`. Default `false`. */
+        this.error = false;
+        /** Mensaje de error (reemplaza al hint cuando `error`). */
+        this.errorMessage = null;
+        /** Texto del label arriba del field. */
+        this.label = null;
+        /** Mensaje de ayuda debajo del field (se oculta cuando hay error). */
+        this.hint = null;
+        /**
+         * Ícono Remix del hint neutral (ej. 'information-fill', como en Figma
+         * 266:5251). `null` (default) = sin ícono. En error no aplica: el hint de
+         * error conserva su ícono default.
+         */
+        this.hintIcon = null;
+        /** Valor del attr `autocomplete` del `<input>`. */
+        this.autocomplete = null;
+        /**
+         * Teclado que pide el campo. Por defecto lo deduce el `type`; esto es el
+         * escape hatch (un DNI es `type="text"` pero quiere teclado numérico).
+         */
+        this.inputmode = null;
+        /**
+         * Ícono de la tecla de acción del teclado. Por defecto `search` en
+         * `type="search"`; se pasa a mano en un flujo (`next` en un formulario de
+         * varios pasos, `send` en un chat).
+         */
+        this.enterkeyhint = null;
+        // ── Label extras ─────────────────────────────────────────────────────────
+        /** Texto secundario del label (ej. "Opcional"). */
+        this.sublabel = null;
+        /** Muestra asterisco rojo en el label. Default `false`. */
+        this.required = false;
+        /** Tooltip (ícono info) en el label. Default `null` → sin ícono info. */
+        this.tooltip = null;
+        /**
+         * Valor del input. Controlled: el consumer escucha `valueChange` y reescribe
+         * este prop. Para type=amount/card contiene el valor CLEAN (sin comas /
+         * sin espacios) — el display formateado vive en estado interno.
+         */
+        this.value = '';
+        /** maxlength del `<input>`. Para type=card el efectivo es 19 si no se setea. */
+        this.maxlength = null;
+        /** min del `<input>` (solo type=number). */
+        this.min = null;
+        /** max del `<input>` (solo type=number). */
+        this.max = null;
+        /** Si `false` y type=number/amount, bloquea el paste. Default `true`. */
+        this.paste = true;
+        /** Prefijo inline, ej. "S/", "$", "%". Atributo `input-prefix` (ver divergencia 2). */
+        this.inputPrefix = null;
+        /** Muestra botón X que limpia el valor. Default `false`. */
+        this.showClear = false;
+        /** Nombre de ícono Remix para el slot de ícono built-in. */
+        this.icon = null;
+        /** Posición del ícono built-in. Default `left`. */
+        this.iconPosition = 'left';
+        /**
+         * Tocar espacio muerto de la pantalla baja el teclado (blur del input si el
+         * foco vive en este host). Default `true`. Pasá `false` si el consumer maneja
+         * el blur.
+         */
+        this.closeOnOutsideClick = true;
+        // ── Afijos interactivos + divisores (Figma Phone 313:10267) ──────────────
+        /** Divisor vertical a la izquierda de la zona de input (Phone Input + afijo leading). */
+        this.leadingDivider = false;
+        /** Divisor vertical a la derecha de la zona de input. `type='button'` lo activa solo. */
+        this.trailingDivider = false;
+        /** Marca el slot `start` como control interactivo (ej. country select): le quita el lockdown 20×20 + pointer-events:none. Implica divisor. */
+        this.leadingControl = false;
+        /** Marca el slot `end` como control interactivo. Implica divisor. */
+        this.trailingControl = false;
+        // ── Estado interno ───────────────────────────────────────────────────────
+        this.showPassword = false;
+        this.displayAmount = '';
+        this.displayCard = '';
+        this.controlId = `sui-input-${++uid}`;
+        this.hintId = `sui-input-hint-${uid}`;
+        this.boundOutsideTap = (event) => this.onDocumentTap(event);
+        // ── Event handlers ───────────────────────────────────────────────────────
+        this.onInput = (e) => {
+            if (this.disabled)
+                return;
+            if (this.type === 'amount')
+                return this.formatAmountOnInput(e);
+            if (this.type === 'card')
+                return this.formatCardOnInput(e);
+            const v = e.target.value;
+            this.value = v;
+            this.valueChange.emit(v);
+        };
+        this.onBlur = () => {
+            if (this.type === 'amount')
+                this.applyAmountBlur();
+            this.suiBlur.emit();
+        };
+        /* Ontop v3 NO hace strip de comas en focus. */
+        this.onFocus = () => {
+            this.suiFocus.emit();
+        };
+        this.onKeydown = (e) => {
+            const t = this.type;
+            if (t === 'number' || t === 'card')
+                this.onlyNumbers(e);
+            else if (t === 'amount')
+                this.onlyNumbersAndPoints(e);
+            else if (t === 'tel')
+                this.onlyTel(e);
+        };
+        this.onPaste = (e) => {
+            var _a, _b;
+            const t = this.type;
+            if ((t === 'number' || t === 'amount') && !this.paste) {
+                e.preventDefault();
+                return;
+            }
+            const text = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            if (t === 'number' && isNaN(+text))
+                e.preventDefault();
+            if (t === 'amount') {
+                e.preventDefault();
+                const sanitized = sanitizeAmount(text);
+                e.target.value = sanitized;
+                this.displayAmount = sanitized;
+                this.value = sanitized.replace(/,/g, '');
+                this.valueChange.emit(this.value);
+            }
+            if (t === 'card') {
+                e.preventDefault();
+                const digits = text.replace(/\D/g, '').slice(0, CARD_MAX_DIGITS);
+                const formatted = formatCardDigits(digits);
+                e.target.value = formatted;
+                this.displayCard = formatted;
+                this.value = digits;
+                this.valueChange.emit(digits);
+            }
+        };
+        this.togglePassword = () => {
+            this.showPassword = !this.showPassword;
+        };
+        this.onClearClick = () => {
+            void this.clearValue();
+        };
+    }
+    // ── Computeds ────────────────────────────────────────────────────────────
+    get nativeType() {
+        const t = this.type;
+        if (t === 'password-toggle')
+            return this.showPassword ? 'text' : 'password';
+        if (t === 'amount' || t === 'card' || t === 'number' || t === 'tel' || t === 'button')
+            return 'text';
+        return t;
+    }
+    /** Teclado por `type` cuando nadie pidió otro. `search` NO está a propósito (ver header). */
+    get inputModeAuto() {
+        switch (this.type) {
+            case 'number': return 'numeric';
+            case 'amount': return 'decimal';
+            case 'card': return 'numeric';
+            case 'tel': return 'tel';
+            case 'email': return 'email';
+            case 'url': return 'url';
+            default: return null;
+        }
+    }
+    /** `inputmode` que termina en el DOM: gana lo que pidió el consumer. */
+    get resolvedInputMode() {
+        var _a;
+        return (_a = this.inputmode) !== null && _a !== void 0 ? _a : this.inputModeAuto;
+    }
+    /** `enterkeyhint` que termina en el DOM: lupa en search, salvo que el consumer pida otra. */
+    get resolvedEnterKeyHint() {
+        var _a;
+        return (_a = this.enterkeyhint) !== null && _a !== void 0 ? _a : (this.type === 'search' ? 'search' : null);
+    }
+    get displayValue() {
+        if (this.type === 'amount')
+            return this.displayAmount;
+        if (this.type === 'card')
+            return this.displayCard;
+        return this.value;
+    }
+    get effectiveMaxlength() {
+        var _a;
+        return this.type === 'card' ? ((_a = this.maxlength) !== null && _a !== void 0 ? _a : 19) : this.maxlength;
+    }
+    /** La X de limpiar es el ÚNICO ícono que crece con el tamaño (es un control que se toca). */
+    get clearPx() {
+        switch (this.size) {
+            case 'xsmall': return 12;
+            case 'small': return 14;
+            case 'large': return 18;
+            case 'xlarge': return 20;
+            default: return 16;
+        }
+    }
+    /** El label no crece con el campo: en large/xlarge crece el área de toque, no la jerarquía. */
+    get labelSize() {
+        const s = this.size;
+        return s === 'large' || s === 'xlarge' ? 'medium' : s;
+    }
+    get hintMessage() {
+        return this.error ? this.errorMessage : this.hint;
+    }
+    get hasLeadingDivider() {
+        return this.leadingDivider || this.leadingControl;
+    }
+    get hasTrailingDivider() {
+        return this.trailingDivider || this.trailingControl || this.type === 'button';
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────
+    componentWillLoad() {
+        this.syncDisplayFromValue();
+    }
+    connectedCallback() {
+        document.addEventListener('pointerdown', this.boundOutsideTap);
+        document.addEventListener('touchstart', this.boundOutsideTap, { passive: true });
+        document.addEventListener('mousedown', this.boundOutsideTap);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this.boundOutsideTap);
+        document.removeEventListener('touchstart', this.boundOutsideTap);
+        document.removeEventListener('mousedown', this.boundOutsideTap);
+    }
+    /** Sincroniza el display cuando `value` cambia desde fuera (no mientras se escribe). */
+    onValueChange() {
+        if (this.inputEl && document.activeElement === this.inputEl)
+            return;
+        this.syncDisplayFromValue();
+    }
+    onTypeChange() {
+        this.syncDisplayFromValue();
+    }
+    syncDisplayFromValue() {
+        var _a;
+        const v = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        if (this.type === 'amount') {
+            if (!v) {
+                this.displayAmount = '';
+                return;
+            }
+            /* Comparación NUMÉRICA: el round-trip del consumer con toFixed ("1" →
+               "1.00") no debe reformatear ni mover el cursor mientras se escribe. */
+            const currentClean = this.displayAmount.replace(/,/g, '');
+            const sameAmount = parseFloat(currentClean) === parseFloat(v) && this.displayAmount !== '';
+            if (sameAmount)
+                return;
+            this.displayAmount = sanitizeAmount(String(v));
+            return;
+        }
+        if (this.type === 'card') {
+            const incoming = v.replace(/\D/g, '').slice(0, CARD_MAX_DIGITS);
+            if (this.displayCard.replace(/\D/g, '') === incoming)
+                return;
+            this.displayCard = formatCardDigits(incoming);
+            return;
+        }
+        this.displayAmount = '';
+        this.displayCard = '';
+    }
+    // ── Public methods ───────────────────────────────────────────────────────
+    /** Limpia el valor y enfoca el input. */
+    async clearValue() {
+        this.value = '';
+        this.displayAmount = '';
+        this.displayCard = '';
+        this.valueChange.emit('');
+        if (this.inputEl) {
+            this.inputEl.value = '';
+            this.inputEl.focus();
+        }
+    }
+    /**
+     * Tap fuera del host → blur para cerrar el teclado de iOS. Escucha
+     * pointerdown + touchstart + mousedown porque iOS no siempre propaga
+     * pointerdown con el teclado abierto. Cada guard salió de un bug real en iOS:
+     *  1. El tap no puede caer DENTRO del host.
+     *  2. El tap no puede ir a otro campo de texto: el navegador mueve el foco
+     *     solo, y adelantarle un blur cierra y reabre el teclado (se comía el
+     *     doble tap para seleccionar una palabra de otro campo).
+     *  3. El target no puede ser un ANCESTRO del host: al mantener el dedo para
+     *     seleccionar texto, WebKit emite eventos con target `body`/`html`, y el
+     *     campo se hacía blur a sí mismo (no se podía seleccionar texto).
+     *  4. Con una selección viva no se toca el foco: es un gesto en curso.
+     * Y solo hace blur si el foco vive dentro de este host: con un blur
+     * incondicional, los OTROS inputs de la página cerraban el teclado.
+     */
+    onDocumentTap(event) {
+        var _a, _b;
+        if (!this.closeOnOutsideClick)
+            return;
+        const host = this.el;
+        const target = event.target;
+        if (!target || host.contains(target))
+            return;
+        if (recibeTexto(target))
+            return;
+        if ((_a = target.contains) === null || _a === void 0 ? void 0 : _a.call(target, host))
+            return;
+        const sel = (_b = document.getSelection) === null || _b === void 0 ? void 0 : _b.call(document);
+        if (sel && !sel.isCollapsed)
+            return;
+        const active = document.activeElement;
+        if (active && host.contains(active))
+            active.blur();
+    }
+    /** Solo dígitos (type=number / card). */
+    onlyNumbers(event) {
+        if (SuiInput.CONTROL_KEYS.includes(event.key) || event.ctrlKey || event.metaKey)
+            return;
+        if (!/^\d$/.test(event.key))
+            event.preventDefault();
+    }
+    /** Dígitos, + (solo en posición 0), espacio y guion (type=tel). */
+    onlyTel(event) {
+        const key = event.key;
+        if (SuiInput.CONTROL_KEYS.includes(key) || event.ctrlKey || event.metaKey)
+            return;
+        if (key === '+') {
+            if (event.target.selectionStart !== 0)
+                event.preventDefault();
+            return;
+        }
+        if (key === ' ' || key === '-')
+            return;
+        if (!/^\d$/.test(key))
+            event.preventDefault();
+    }
+    /** Dígitos + un solo punto decimal (type=amount). */
+    onlyNumbersAndPoints(event) {
+        const key = event.key;
+        if (SuiInput.CONTROL_KEYS.includes(key) || event.ctrlKey || event.metaKey)
+            return;
+        if (key === '.') {
+            if (event.target.value.includes('.'))
+                event.preventDefault();
+            return;
+        }
+        if (!/\d/.test(key))
+            event.preventDefault();
+    }
+    // ── Amount mask (Ontop v3) ──────────────────────────────────────────────
+    /** Nueva posición del cursor compensando las comas agregadas/removidas. */
+    calcAmountCursorPos(original, pos, formatted) {
+        const commasBefore = (s, p) => { var _a; return ((_a = s.slice(0, p).match(/,/g)) !== null && _a !== void 0 ? _a : []).length; };
+        const diff = commasBefore(formatted, pos) - commasBefore(original, pos);
+        let newPos = pos + diff;
+        if (diff < 0 && formatted[newPos] === ',')
+            newPos -= 1;
+        else if (diff > 0 && formatted[newPos - 1] === ',')
+            newPos += 1;
+        if (newPos > 0 && formatted[newPos - 1] === ',')
+            newPos -= 1;
+        return newPos;
+    }
+    formatAmountOnInput(e) {
+        var _a, _b;
+        const el = e.target;
+        const original = el.value;
+        const cursor = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : original.length;
+        const formatted = formatAmountLive(original);
+        el.value = formatted;
+        const newCursor = this.calcAmountCursorPos(original, cursor, formatted);
+        (_b = el.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(el, newCursor, newCursor);
+        const clean = formatted.replace(/,/g, '');
+        this.displayAmount = formatted;
+        this.value = clean;
+        this.valueChange.emit(clean);
+    }
+    applyAmountBlur() {
+        const el = this.inputEl;
+        if (!el)
+            return;
+        const formatted = formatAmountOnBlur(el.value);
+        el.value = formatted;
+        const clean = formatted.replace(/,/g, '');
+        this.displayAmount = formatted;
+        this.value = clean;
+        this.valueChange.emit(clean);
+    }
+    // ── Card mask ────────────────────────────────────────────────────────────
+    formatCardOnInput(e) {
+        var _a, _b;
+        const el = e.target;
+        const original = el.value;
+        const cursor = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : original.length;
+        const digits = original.replace(/\D/g, '').slice(0, CARD_MAX_DIGITS);
+        const formatted = formatCardDigits(digits);
+        el.value = formatted;
+        const newCursor = this.calcCardCursorPos(original, cursor, formatted);
+        (_b = el.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(el, newCursor, newCursor);
+        this.displayCard = formatted;
+        this.value = digits;
+        this.valueChange.emit(digits);
+    }
+    calcCardCursorPos(original, pos, formatted) {
+        const spacesBefore = (s, p) => { var _a; return ((_a = s.slice(0, p).match(/ /g)) !== null && _a !== void 0 ? _a : []).length; };
+        const diff = spacesBefore(formatted, pos) - spacesBefore(original, pos);
+        let newPos = pos + diff;
+        if (newPos > 0 && formatted[newPos - 1] === ' ' && diff > 0)
+            newPos += 1;
+        return Math.max(0, Math.min(newPos, formatted.length));
+    }
+    // ── Render ───────────────────────────────────────────────────────────────
+    render() {
+        var _a, _b, _c, _d, _e;
+        const showClearBtn = this.showClear && !!this.value && !this.disabled && !this.readonly;
+        const showEye = this.type === 'password-toggle' && !this.disabled;
+        const lead = this.hasLeadingDivider;
+        const trail = this.hasTrailingDivider;
+        const hint = this.hintMessage;
+        return (h(Host, { key: 'ef7b9261efd9117f520c43b2cb8bf8635d9fa02c', "data-sui-size": this.size, "data-sui-type": this.type, "data-sui-error": this.error ? '' : null, "data-sui-disabled": this.disabled ? '' : null, "data-sui-readonly": this.readonly ? '' : null, "data-sui-full-radius": this.fullRadius ? '' : null, "data-sui-leading-divider": lead ? '' : null, "data-sui-trailing-divider": trail ? '' : null, "data-sui-leading-control": this.leadingControl ? '' : null, "data-sui-trailing-control": this.trailingControl ? '' : null }, this.label && (h("sui-form-label", { key: '59caa13dc7f588d1f12b504daf3e899d67a61afc', class: "sui-input__label-host", label: this.label, sublabel: this.sublabel, required: this.required, tooltip: this.tooltip, size: this.labelSize, disabled: this.disabled, htmlFor: this.controlId })), h("div", { key: 'bdc04ba494b4c5855897ed869020cae8205efd1b', class: {
+                'sui-input__field': true,
+                'sui-input__field--error': this.error,
+                'sui-input__field--disabled': this.disabled,
+                'sui-input__field--readonly': this.readonly,
+                'sui-input__field--split': lead || trail,
+                'sui-input__field--split-leading': lead,
+                'sui-input__field--split-trailing': trail,
+                'sui-input__field--button': this.type === 'button',
+            } }, h("slot", { key: 'd3a8c37f3a8972c3155f1723e76934f15e9a1823', name: "start" }), h("div", { key: 'caf43cafdd42999b3cdde308949414bea473779d', class: "sui-input__inner" }, this.icon && this.iconPosition === 'left' && (h("span", { key: '5230e90a1ef8a19e9c9db858532c4ce115258193', class: "sui-input__icon sui-input__icon--left" }, h("sui-icon", { key: 'b416ec6f498da47b5b2925763cca9aaa8ce170c7', name: this.icon, size: 20 }))), this.inputPrefix && h("span", { key: '4a7743dfb0224df755750abf46eef03d5413cd56', class: "sui-input__prefix" }, this.inputPrefix), h("input", { key: '4f39854344aa12c149c19c0faf052bcfb19fcbcc', class: "sui-input__control", id: this.controlId, ref: (el) => (this.inputEl = el), "aria-invalid": this.error ? 'true' : null, "aria-describedby": hint ? this.hintId : null, type: this.nativeType, inputmode: (_a = this.resolvedInputMode) !== null && _a !== void 0 ? _a : undefined, enterkeyhint: (_b = this.resolvedEnterKeyHint) !== null && _b !== void 0 ? _b : undefined, value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autocomplete: (_c = this.autocomplete) !== null && _c !== void 0 ? _c : undefined, maxLength: (_d = this.effectiveMaxlength) !== null && _d !== void 0 ? _d : undefined, min: this.type === 'number' && this.min != null ? this.min : undefined, max: this.type === 'number' && this.max != null ? this.max : undefined, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onPaste: this.onPaste })), h("slot", { key: 'c08b1e70af62aeb12425b5585ebcbb18e83fb421', name: "end" }), showClearBtn && (h("button", { key: 'fcf2d3693af5f3861f384d68c8d4b2a5e1f20260', type: "button", class: "sui-input__clear", "aria-label": "Limpiar", onClick: this.onClearClick }, h("sui-icon", { key: 'b5a9e7b603b0533fd41126ae3ee2157464ac7cf4', name: "close-circle-line", size: this.clearPx }))), showEye && (h("button", { key: 'bcccf5157a41002aff508ca03a541690208413d5', type: "button", class: "sui-input__eye", "aria-label": this.showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña', onClick: this.togglePassword }, h("sui-icon", { key: '6b1a594a60f12dadf720386903a2f412ec356709', name: this.showPassword ? 'eye-off-line' : 'eye-line', size: 20 }))), this.icon && this.iconPosition === 'right' && (h("span", { key: 'd82694c6cc82684515496584b8c34c169263a660', class: "sui-input__icon sui-input__icon--right" }, h("sui-icon", { key: '69ffa07e53dbf12bd3e50bb21d1df2afeff1bfc0', name: this.icon, size: 20 })))), hint && (h("sui-form-hint", { key: '868ce0f162002aa77b76acc1b41e47052195a6a7', id: this.hintId, class: "sui-input__hint-host", message: hint, variant: this.error ? 'error' : 'neutral', icon: this.error ? undefined : ((_e = this.hintIcon) !== null && _e !== void 0 ? _e : undefined) }))));
+    }
+    static get is() { return "sui-input"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiInputSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\"",
+                    "references": {
+                        "SuiInputSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-input/sui-input.tsx",
+                            "id": "src/components/sui-input/sui-input.tsx::SuiInputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del field. Default `medium` (40px). `large` 48 y `xlarge` 52."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiInputType",
+                    "resolved": "\"amount\" | \"button\" | \"card\" | \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"password-toggle\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\"",
+                    "references": {
+                        "SuiInputType": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-input/sui-input.tsx",
+                            "id": "src/components/sui-input/sui-input.tsx::SuiInputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo l\u00F3gico del input (controla nativeType + inputmode + m\u00E1scaras + filtros). Default `text`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el field (bg-weak-50, sin border, no editable). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Solo lectura (bg-weak-50, border suave, no editable pero seleccionable). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "fullRadius": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Esquinas de p\u00EDldora (999px) en vez del radio por tama\u00F1o. Opt-in: para un\nbuscador arriba de una lista o un filtro al lado de chips. Mismo nombre que\nen `sui-compact-button` y en Figma (\u00ABfullRadius\u00BB). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-radius",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Activa borde rojo + muestra `errorMessage`. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensaje de error (reemplaza al hint cuando `error`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "null"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del label arriba del field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "null"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensaje de ayuda debajo del field (se oculta cuando hay error)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "null"
+            },
+            "hintIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00CDcono Remix del hint neutral (ej. 'information-fill', como en Figma\n266:5251). `null` (default) = sin \u00EDcono. En error no aplica: el hint de\nerror conserva su \u00EDcono default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint-icon",
+                "defaultValue": "null"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor del attr `autocomplete` del `<input>`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "null"
+            },
+            "inputmode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiInputMode | null",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | null",
+                    "references": {
+                        "SuiInputMode": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-input/sui-input.tsx",
+                            "id": "src/components/sui-input/sui-input.tsx::SuiInputMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Teclado que pide el campo. Por defecto lo deduce el `type`; esto es el\nescape hatch (un DNI es `type=\"text\"` pero quiere teclado num\u00E9rico)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputmode",
+                "defaultValue": "null"
+            },
+            "enterkeyhint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiInputEnterKeyHint | null",
+                    "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | null",
+                    "references": {
+                        "SuiInputEnterKeyHint": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-input/sui-input.tsx",
+                            "id": "src/components/sui-input/sui-input.tsx::SuiInputEnterKeyHint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00CDcono de la tecla de acci\u00F3n del teclado. Por defecto `search` en\n`type=\"search\"`; se pasa a mano en un flujo (`next` en un formulario de\nvarios pasos, `send` en un chat)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enterkeyhint",
+                "defaultValue": "null"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto secundario del label (ej. \"Opcional\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sublabel",
+                "defaultValue": "null"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra asterisco rojo en el label. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip (\u00EDcono info) en el label. Default `null` \u2192 sin \u00EDcono info."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip",
+                "defaultValue": "null"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor del input. Controlled: el consumer escucha `valueChange` y reescribe\neste prop. Para type=amount/card contiene el valor CLEAN (sin comas /\nsin espacios) \u2014 el display formateado vive en estado interno."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "maxlength del `<input>`. Para type=card el efectivo es 19 si no se setea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength",
+                "defaultValue": "null"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "min del `<input>` (solo type=number)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "null"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "max del `<input>` (solo type=number)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "null"
+            },
+            "paste": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si `false` y type=number/amount, bloquea el paste. Default `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "paste",
+                "defaultValue": "true"
+            },
+            "inputPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefijo inline, ej. \"S/\", \"$\", \"%\". Atributo `input-prefix` (ver divergencia 2)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-prefix",
+                "defaultValue": "null"
+            },
+            "showClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra bot\u00F3n X que limpia el valor. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-clear",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de \u00EDcono Remix para el slot de \u00EDcono built-in."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "null"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiInputIconPosition",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {
+                        "SuiInputIconPosition": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-input/sui-input.tsx",
+                            "id": "src/components/sui-input/sui-input.tsx::SuiInputIconPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posici\u00F3n del \u00EDcono built-in. Default `left`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "closeOnOutsideClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tocar espacio muerto de la pantalla baja el teclado (blur del input si el\nfoco vive en este host). Default `true`. Pas\u00E1 `false` si el consumer maneja\nel blur."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-outside-click",
+                "defaultValue": "true"
+            },
+            "leadingDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Divisor vertical a la izquierda de la zona de input (Phone Input + afijo leading)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "leading-divider",
+                "defaultValue": "false"
+            },
+            "trailingDivider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Divisor vertical a la derecha de la zona de input. `type='button'` lo activa solo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trailing-divider",
+                "defaultValue": "false"
+            },
+            "leadingControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca el slot `start` como control interactivo (ej. country select): le quita el lockdown 20\u00D720 + pointer-events:none. Implica divisor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "leading-control",
+                "defaultValue": "false"
+            },
+            "trailingControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca el slot `end` como control interactivo. Implica divisor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trailing-control",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showPassword": {},
+            "displayAmount": {},
+            "displayCard": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite con el valor CLEAN al cambiar el input (sin comas/espacios para amount/card)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "suiBlur",
+                "name": "suiBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite en blur (espejo del `onTouched` del CVA Angular)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "suiFocus",
+                "name": "suiFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite en focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clearValue": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Limpia el valor y enfoca el input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "type",
+                "methodName": "onTypeChange"
+            }];
+    }
+}
+// ── Key filters (Ontop-derived) ─────────────────────────────────────────
+SuiInput.CONTROL_KEYS = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];