@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,749 @@
+import { Host, h, } from "@stencil/core";
+/** Contador por instancia para los ids de label/hint (a11y, 04-10-2026). */
+let nextId = 0;
+/**
+ * `<sui-tag-input>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-tag-input/). Misma API
+ * pública (size/placeholder/disabled/error/errorMessage/rightIcon/
+ * label/sublabel/required/tooltip/hint/commaSeparator/allowDuplicates/maxTags/
+ * addOnBlur/value + eventos tagAdded/tagRemoved), TODAS las variantes/sizes/
+ * states de la matriz Figma, el mismo comportamiento (Enter/coma commitea,
+ * Backspace en vacío quita el último, click en la X quita, click en el field
+ * enfoca el input, addOnBlur) y los mismos VALORES exactos vía tokens del DS
+ * (NO hex). El accent del DS es NARANJA brand (#fa7319), NUNCA el azul de Figma
+ * — aunque este componente, como el tag, trabaja solo con tokens neutros
+ * (soft-200 / strong-950 / weak-50 / error-base) + ring focus, igual que el
+ * Angular original. El naranja no aparece en ninguna variante.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set "Tag Input [1.1]"
+ *   (frame 428:4860). Matriz: State(6: Default/Hover/Focus/Filled/Disabled/
+ *   Error) x Size(3: Medium 40 / Small 36 / X-Small 32).
+ *
+ * EXACT (verificado pixel/token vs Figma, copiado del .ts/.scss Angular):
+ *   Sizes (input box "Basic"):
+ *   - xsmall (X-Small 32): py=6, pl=10, pr=6, gap=6, radius=8
+ *   - small  (Small 36):   py=8, pl=10, pr=8, gap=8, radius=8
+ *   - medium (Medium 40):  py=10, pl=12, pr=10, gap=8, radius=10 (default)
+ *   - large  (48, extensión SUI 03-10-2026): py=12−1, pl=14, pr=12, gap=10, radius=12
+ *   - xlarge (52, extensión SUI 03-10-2026): py=14−1, pl=16, pr=14, gap=10, radius=12
+ *     (mismos valores que `sui-input` large/xlarge; texto 16/24). En large/xlarge
+ *     los chips acompañan (tag large/xlarge) y el label queda en medium.
+ *
+ * Homologado con el SUI Angular (05-11-2026): sizes large/xlarge, `rightIcon`
+ * string|boolean, ids a11y (label `for`, `aria-describedby`, `aria-invalid`),
+ * strip del `title` nativo del host y placeholder en español. Se omiten
+ * `ControlValueAccessor` y `provideSuiTextos` (Angular-only): los textos van
+ * fijos en español, sobreescribibles con `placeholder`.
+ *
+ *   El alto se deriva del line-height(20) del texto + 2xpy. min-height fija
+ *   el alto canon (32/36/40) para evitar reflow en iOS Safari.
+ *
+ *   State tokens (verified node-by-node):
+ *     Default  -> bg white-0 / border soft-200 / shadow regular-x-small / placeholder soft-400
+ *     Hover    -> bg weak-50  / SIN border        / SIN shadow            / placeholder sub-600
+ *     Focus    -> bg white-0 / border strong-950 / ring 2px white + 4px slate-alpha-16
+ *     Filled   -> bg white-0 / border soft-200 / shadow regular-x-small / texto strong-950
+ *     Disabled -> bg weak-50 / SIN border / texto disabled-300 / cursor not-allowed
+ *     Error    -> bg white-0 / border error-base / shadow / hint en error-base
+ *
+ *   DISTINCION CLAVE vs Input Basic: el hover del Tag Input mueve bg->weak-50 y
+ *   QUITA el border (igual que disabled), mientras que el Input Basic solo
+ *   cambia border-color (soft-200 -> sub-300). No confundir (Figma 428:4920).
+ *
+ *   Tags row (frame "Tags"): fila aparte debajo del input box, pt=4 gap=8,
+ *   wrap a multiples lineas. Cada pill es un <sui-tag tag-style="stroke"
+ *   dismissible> (radius 6, padding propio definido en sui-tag).
+ *
+ *   Trailing icon (Figma rightIcon / pickRight, node 428:4819): cuando
+ *   rightIcon=true, el field renderea un icono 20x20 info-custom-fill coloreado
+ *   text-soft-400 en su posicion trailing. El consumer puede sustituir el
+ *   contenido proyectando markup en el slot `right` (equivalente pickRight).
+ *
+ *   Hint icon (Figma Hint Text node 428:4900): el hint neutral renderea el icono
+ *   16x16 information-fill (sub-600); el error conserva su icono default
+ *   (error-warning-line). Se logra pasando icon='information-fill' a
+ *   sui-form-hint en la variante neutral.
+ *
+ * ── DIVERGENCIAS vs el stack Angular (justificadas) ─────────────────────────
+ *  1. `model<string[]>` + `ControlValueAccessor` no existen en Stencil. Se
+ *     reemplazan por `@Prop({ mutable: true }) value: string[]` (controlled) +
+ *     `@Event() valueChange`. El consumer escucha `valueChange` y reescribe el
+ *     prop `value` (idéntico al modo `[(value)]` del Angular en uso normal).
+ *     El componente igual muta su prop local para feel inmediato (como sui-input).
+ *  2. El `_disabledByForm` del CVA no aplica (sin Forms API). `isDisabled` ==
+ *     `disabled` a secas.
+ *  3. El Angular usa `<ng-content select="[slot=right]">` con fallback. En
+ *     Stencil `scoped` el `<slot name="right">` admite fallback content.
+ *  4. El click-to-focus del field usa `onMouseDown` (espejo de `onFieldPointerDown`)
+ *     con el mismo guard de no robar el click de input/sui-tag.
+ *
+ * `scoped: true` (light DOM, NO shadow): igual que sui-input/sui-tag. Permite
+ * stylear el contenido proyectado (slot right) y que los <sui-tag>/<sui-icon>/
+ * <sui-form-label>/<sui-form-hint> internos hereden tokens/fonts sin pelear con
+ * shadow boundaries. Misma estrategia que el Angular (sin shadow DOM).
+ *
+ * Slots:
+ *  - `right` -> contenido trailing del field cuando rightIcon=true (sustituye al
+ *    info-custom-fill default; equivalente al `pickRight` del Figma).
+ */
+export class SuiTagInput {
+    constructor() {
+        // ── Core props (espejan los input() del Angular) ─────────────────────────
+        /** Tamaño del field. Default `medium` (40px). */
+        this.size = 'medium';
+        /** Placeholder del input de texto libre. */
+        this.placeholder = 'Agrega una etiqueta…';
+        /** Deshabilita el control (bg-weak-50, sin border, no editable). Default `false`. */
+        this.disabled = false;
+        /** Activa borde rojo + muestra `errorMessage`. Default `false`. */
+        this.error = false;
+        /** Mensaje de error (se muestra cuando `error`). */
+        this.errorMessage = null;
+        /**
+         * Renderiza el icono trailing del frame "Basic" (Figma `rightIcon`, node
+         * 428:4819). Default: `info-custom-fill` 20x20 coloreado text-soft-400. Para
+         * sustituir el contenido proyectá markup en el slot `right` (equivalente
+         * `pickRight`).
+         */
+        this.rightIcon = false;
+        /** a11y: ids propios por instancia. */
+        this.controlId = `sui-tag-input-${++nextId}`;
+        this.hintId = `${this.controlId}-hint`;
+        // ── Label props (delegados a sui-form-label) ─────────────────────────────
+        /** Texto del label arriba del field. */
+        this.label = null;
+        /** Sublabel opcional (texto secundario después del label). */
+        this.sublabel = null;
+        /** Muestra asterisco rojo de requerido en el label. Default `false`. */
+        this.required = false;
+        /** Tooltip (ícono info) en el label. Default `null` → sin ícono info. */
+        this.tooltip = null;
+        // ── Hint (delegado a sui-form-hint) ──────────────────────────────────────
+        /** Mensaje de ayuda debajo del field (se oculta cuando hay error). */
+        this.hint = null;
+        // ── Behavior props (custom — no en Figma) ────────────────────────────────
+        /** Permite que la coma además de Enter agregue un tag. Default `false` (solo Enter). */
+        this.commaSeparator = false;
+        /** Permite tags duplicados. Default `false` (dedupe case-sensitive). */
+        this.allowDuplicates = false;
+        /** Máximo de tags. `null` = sin tope. */
+        this.maxTags = null;
+        /** Commitea el texto pendiente como tag al perder el foco. Default `false`. */
+        this.addOnBlur = false;
+        /**
+         * Lista de tags — el value expuesto. Controlled: el consumer escucha
+         * `valueChange` y reescribe este prop. El componente igual lo muta localmente
+         * para feel inmediato (espejo del `model<string[]>` del Angular). El texto
+         * pendiente del input NO forma parte del value hasta commitearse como tag.
+         * Default `[]`.
+         */
+        this.value = [];
+        // ── Estado interno ───────────────────────────────────────────────────────
+        /** Texto pendiente en el input (no forma parte del value hasta commitearse). */
+        this.draft = '';
+        // ── Event handlers (espejan los del Angular) ─────────────────────────────
+        this.onInput = (e) => {
+            if (this.isDisabled)
+                return;
+            this.draft = e.target.value;
+        };
+        this.onKeydown = (e) => {
+            if (this.isDisabled)
+                return;
+            if (e.key === 'Enter' || (this.commaSeparator && e.key === ',')) {
+                e.preventDefault();
+                this.commitDraft();
+                return;
+            }
+            // Backspace con el input vacío → quita el último tag.
+            if (e.key === 'Backspace' && this.draft.length === 0 && this.value.length > 0) {
+                e.preventDefault();
+                this.removeLast();
+            }
+        };
+        this.onBlur = () => {
+            if (this.addOnBlur && !this.isDisabled) {
+                this.commitDraft();
+            }
+        };
+        /**
+         * Click en el field → focusea el input. UX nativa de tag inputs: tocar
+         * cualquier zona del campo (incluido el padding) lleva el caret al input.
+         * Espejo de `onFieldPointerDown` del Angular.
+         */
+        this.onFieldMouseDown = (e) => {
+            var _a;
+            if (this.isDisabled)
+                return;
+            // Solo redirige si el target no es ya un control interactivo (input/close).
+            const target = e.target;
+            if (target.closest('.sui-tag-input__control') || target.closest('sui-tag'))
+                return;
+            e.preventDefault();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        /**
+         * iOS WKWebView: un <div> NO recibe mousedown sintetizado a partir de touch
+         * a menos que tenga un listener de click explícito. onTouchStart replica la
+         * misma lógica de redirección al input para que el focus-on-padding funcione
+         * en mobile. El closeButton de <sui-tag> ya trae sus propios onTouchStart/
+         * onTouchEnd internamente — no hace falta coordinarlos desde acá.
+         */
+        this.onFieldTouchStart = (e) => {
+            var _a;
+            if (this.isDisabled)
+                return;
+            const target = e.target;
+            if (target.closest('.sui-tag-input__control') || target.closest('sui-tag'))
+                return;
+            e.preventDefault();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    /** Nombre resuelto del icono trailing (null = no se renderiza). */
+    get rightIconCfg() {
+        const r = this.rightIcon;
+        if (r === true || r === 'true' || r === '')
+            return 'info-custom-fill';
+        if (typeof r === 'string' && r.length > 0 && r !== 'false')
+            return r;
+        return null;
+    }
+    /** El label no crece con el campo: en large/xlarge queda en medium. */
+    get labelSize() {
+        const s = this.size;
+        return s === 'large' || s === 'xlarge' ? 'medium' : s;
+    }
+    /** Los chips acompañan al campo grande: large/xlarge → tag large/xlarge; resto medium. */
+    get tagSize() {
+        const s = this.size;
+        return s === 'large' || s === 'xlarge' ? s : 'medium';
+    }
+    // ── Computeds (getters — espejan los `computed` del Angular) ─────────────
+    /** `isDisabled` del Angular (sin `_disabledByForm` — Stencil no tiene Forms API). */
+    get isDisabled() {
+        return this.disabled;
+    }
+    /** True cuando hay al menos un tag (para renderizar la fila de tags). */
+    get hasTags() {
+        return this.value.length > 0;
+    }
+    // ── Core mutations (espejan los del Angular) ─────────────────────────────
+    /** Commitea el draft actual como tag (trim, dedupe, cap). Limpia el input. */
+    commitDraft() {
+        const raw = this.draft.trim();
+        if (!raw) {
+            this.draft = '';
+            return;
+        }
+        this.addTagInternal(raw);
+        this.draft = '';
+        if (this.inputEl)
+            this.inputEl.value = '';
+    }
+    /** Agrega un tag respetando dedupe y maxTags. Devuelve true si se agregó. */
+    addTagInternal(tag) {
+        const value = tag.trim();
+        if (!value)
+            return false;
+        const current = this.value;
+        const cap = this.maxTags;
+        if (cap !== null && current.length >= cap)
+            return false;
+        if (!this.allowDuplicates && current.includes(value))
+            return false;
+        const next = [...current, value];
+        this.value = next;
+        this.valueChange.emit(next);
+        this.tagAdded.emit(value);
+        return true;
+    }
+    /** Quita el tag en `index`. */
+    removeAtInternal(index) {
+        if (this.isDisabled)
+            return;
+        const current = this.value;
+        if (index < 0 || index >= current.length)
+            return;
+        const removed = current[index];
+        const next = current.filter((_, i) => i !== index);
+        this.value = next;
+        this.valueChange.emit(next);
+        this.tagRemoved.emit(removed);
+    }
+    /** Quita el último tag (usado por Backspace en input vacío). */
+    removeLast() {
+        this.removeAtInternal(this.value.length - 1);
+    }
+    // ── Public methods (API imperativa — espejan métodos públicos del Angular) ─
+    /** Agrega un tag programáticamente. Devuelve true si se agregó (dedupe/cap). */
+    async addTag(tag) {
+        return this.addTagInternal(tag);
+    }
+    /** Quita el tag en `index`. */
+    async removeAt(index) {
+        this.removeAtInternal(index);
+    }
+    /** Strip del `title` nativo del host (evita el tooltip gris del OS; regla del DS). */
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    render() {
+        var _a, _b;
+        /* Detecta si el consumer proyectó contenido en slot="right". En Stencil
+           `scoped` el slot NO renderea fallback content de forma confiable, así que
+           replicamos la semántica del `<ng-content select="[slot=right]">` con
+           fallback del Angular consultando el light DOM (patrón canon del proyecto,
+           ver sui-empty-state). Si no hay nada proyectado, dibujamos el ícono default. */
+        const hasProjectedRight = !!this.el.querySelector('[slot="right"]');
+        const rightIconName = this.rightIconCfg;
+        const hintMessage = this.error ? this.errorMessage : this.hint;
+        return (h(Host, { key: '5189b03b310ba1e028dde91e09da0c07fbeefd1e', "data-sui-size": this.size, "data-sui-error": this.error ? '' : null, "data-sui-disabled": this.isDisabled ? '' : null }, this.label && (h("sui-form-label", { key: '81e5e41fa21b5163434d2d42b7281f616fa0fac1', class: "sui-tag-input__label-host", label: this.label, sublabel: (_a = this.sublabel) !== null && _a !== void 0 ? _a : undefined, required: this.required, tooltip: (_b = this.tooltip) !== null && _b !== void 0 ? _b : undefined, size: this.labelSize, htmlFor: this.controlId })), h("div", { key: 'a1fb973940895d7c6428f78ba8e5617da856cfcb', class: {
+                'sui-tag-input__field': true,
+                'sui-tag-input__field--error': this.error,
+                'sui-tag-input__field--disabled': this.isDisabled,
+            }, onMouseDown: this.onFieldMouseDown, onTouchStart: this.onFieldTouchStart }, h("input", { key: '40ed79febd8530d64345d7622acc46281c34d79d', class: "sui-tag-input__control", id: this.controlId, "aria-invalid": this.error ? 'true' : null, "aria-describedby": hintMessage ? this.hintId : null, ref: (el) => (this.inputEl = el), type: "text", placeholder: this.placeholder, disabled: this.isDisabled, value: this.draft, autocomplete: "off", onInput: this.onInput, onKeyDown: this.onKeydown, onBlur: this.onBlur }), rightIconName && (h("span", { key: 'a1189c6ba8f01d2c6c2f065501791747d063b044', class: "sui-tag-input__right" }, h("slot", { key: 'f360ffbf1daffe91ba02752d27effc5c33238c2a', name: "right" }), !hasProjectedRight && h("sui-icon", { key: 'af59a0a4272ea9779818a6aff9e4c3edc0910a5c', name: rightIconName, size: 20 })))), this.hasTags && (h("div", { key: 'ecbfb208a8cf6021b52dbf3be60e6fec1d3505af', class: "sui-tag-input__tags", role: "list" }, this.value.map((tag, index) => (h("sui-tag", { role: "listitem", tagStyle: "stroke", size: this.tagSize, dismissible: true, disabled: this.isDisabled, dismissLabel: `Quitar ${tag}`, onDismiss: () => this.removeAtInternal(index) }, tag))))), hintMessage && (h("sui-form-hint", { key: 'f49eac5d26c16637ae596d4fbbfa6e0a367ae4f2', class: "sui-tag-input__hint-host", id: this.hintId, message: hintMessage, variant: this.error ? 'error' : 'neutral', icon: this.error ? undefined : 'information-fill' }))));
+    }
+    static get is() { return "sui-tag-input"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-tag-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-tag-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiTagInputSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\"",
+                    "references": {
+                        "SuiTagInputSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-tag-input/sui-tag-input.tsx",
+                            "id": "src/components/sui-tag-input/sui-tag-input.tsx::SuiTagInputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del field. Default `medium` (40px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder del input de texto libre."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Agrega una etiqueta\u2026'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el control (bg-weak-50, sin border, no editable). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "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 (se muestra cuando `error`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message",
+                "defaultValue": "null"
+            },
+            "rightIcon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renderiza el icono trailing del frame \"Basic\" (Figma `rightIcon`, node\n428:4819). Default: `info-custom-fill` 20x20 coloreado text-soft-400. Para\nsustituir el contenido proyect\u00E1 markup en el slot `right` (equivalente\n`pickRight`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-icon",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sublabel opcional (texto secundario despu\u00E9s del label)."
+                },
+                "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 de requerido 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"
+            },
+            "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"
+            },
+            "commaSeparator": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permite que la coma adem\u00E1s de Enter agregue un tag. Default `false` (solo Enter)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "comma-separator",
+                "defaultValue": "false"
+            },
+            "allowDuplicates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permite tags duplicados. Default `false` (dedupe case-sensitive)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-duplicates",
+                "defaultValue": "false"
+            },
+            "maxTags": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "M\u00E1ximo de tags. `null` = sin tope."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-tags",
+                "defaultValue": "null"
+            },
+            "addOnBlur": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Commitea el texto pendiente como tag al perder el foco. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "add-on-blur",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de tags \u2014 el value expuesto. Controlled: el consumer escucha\n`valueChange` y reescribe este prop. El componente igual lo muta localmente\npara feel inmediato (espejo del `model<string[]>` del Angular). El texto\npendiente del input NO forma parte del value hasta commitearse como tag.\nDefault `[]`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "draft": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite con la lista completa de tags al cambiar (add/remove)."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "tagAdded",
+                "name": "tagAdded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite con el tag agregado."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tagRemoved",
+                "name": "tagRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite con el tag removido."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "addTag": {
+                "complexType": {
+                    "signature": "(tag: string) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "tag",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Agrega un tag program\u00E1ticamente. Devuelve true si se agreg\u00F3 (dedupe/cap).",
+                    "tags": []
+                }
+            },
+            "removeAt": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Quita el tag en `index`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}