@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,775 @@
+import { Host, h } from "@stencil/core";
+import { suiRovingIndex } from "../../utils/roving-focus";
+import { soltarToque } from "../../utils/sui-toque";
+import { buildRatingCells, ratingBarIconName, ratingIconName, ratingIconPx, ratingReviewCountLabel, ratingValueLabel, SUI_RATING_DEFAULT_EMOJIS, } from "./sui-rating.data";
+import { suiHrefClick } from "../sui-href/sui-href";
+/**
+ * `<sui-rating>` — SUI Design System (SUI Design System 2.0). COMPUESTO + complejo.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-rating/). Misma API
+ * publica, TODAS las appearances (4) x types (4) x sizes (3) x states, mismo
+ * comportamiento (overlays/estados por celda, hover preview, half-step display,
+ * re-click no-op, textarea cohesivo en bar-area, teclado/a11y radiogroup) y
+ * mismos VALORES exactos (tokens del DS, no hex). Reusa los primitivos
+ * `<sui-icon>` y `<sui-emoji>` ya portados (NO re-implementa iconos ni emojis).
+ * El accent del DS es NARANJA brand (#fa7319) para los focus rings; star sigue
+ * dorado (yellow-500) y heart rojo (error-base) por canon Figma del rating.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Nodes verificados:
+ *   532:4137  Rating Items [1.0]   (empty-line / empty-filled / half / full x star/heart)
+ *   532:4160  Rating Cell [1.1]    (cell card: icon 32, pad 12, radius 10, shadow x-small)
+ *   532:4340  Rating Review [1.0]  (inline display: stars + value text + review link)
+ *   535:4535  Rating Bar Items     (cell de bar: emoji/number/star/heart x default/hover/selected)
+ *   535:4658  Rating Bar [1.1]     (5 cells horizontal segmented bar)
+ *   535:5057  Rating Bar Area [1.1] (card rounded-12 132px = bar 36px + input 96px)
+ *
+ * Cuatro appearances:
+ *   - 'inline'   -> 5 iconos inline bare, gap 2px. Display read-only de promedio o
+ *     input compacto. Soporta half-step si readonly. Sin card.
+ *   - 'cell'     -> 5 iconos envueltos en card individual (pad 12, radius 10, icon 32,
+ *     shadow x-small). default/selected -> bg white + border + shadow; hover -> bg weak-50.
+ *   - 'bar'      -> 5 cells horizontales segmentadas (border + dividers). Input de
+ *     formulario. Permite type emoji/number ademas de star/heart.
+ *   - 'bar-area' -> PIEZA UNICA: card rounded-12 que integra la bar arriba + el
+ *     textarea «Cuéntanos por qué» abajo. El textarea vive dentro del card y se enlaza a
+ *     `reason`. Las cells crecen flex. Captura value + reason de una sola interaccion.
+ *
+ * Estados por celda (bar/bar-area) — Figma Rating Bar Items 535:4535:
+ *   default -> empty-line gris | hover -> EMPTY FILLED gris (relleno neutro) |
+ *   selected -> full dorado/rojo. number: hover Y selected usan strong-950; selected
+ *   agrega bg weak-50. emoji: solo selected sale de grayscale.
+ *
+ * Tamaños (icon size): small 16 / medium 20 (default) / large 24 / xlarge 28 /
+ * 2xlarge 32 en un botón de 44 (piso táctil del teléfono). En cell siempre 32px.
+ * En bar 20px (2xlarge sube la celda a 44 de alto).
+ *
+ * ── Modelo de datos (equivalente al CVA + two-way del Angular) ───────────
+ * Stencil no tiene ControlValueAccessor. El contrato se mapea a:
+ *   - `value`  (@Prop mutable) + evento `valueChange` -> two-way del numero 1..max.
+ *     0 = sin seleccion. El consumer hace `el.value = n` o escucha `valueChange`.
+ *   - `disabled` (@Prop) -> equivalente a setDisabledState: bloquea clicks/hover
+ *     igual que readonly, con affordance visual (opacity .5 + pointer-events none).
+ *   - `reason` (@Prop mutable) + evento `reasonChange` -> two-way del textarea de
+ *     bar-area. Canal SEPARADO del value (igual que el Angular: el value primario
+ *     es el numero, reason es independiente).
+ *
+ * a11y (04-10-2026, igual que el Angular): readonly es una NOTA, no una pregunta
+ * → host `role="img"` con «Calificación: 4,5 de 5, 120 calificaciones» (o `group`
+ * si trae link de reseñas, para que el link siga alcanzable) y las celdas
+ * aria-hidden. Interactivo: `radiogroup` con un solo tab stop (la nota elegida o
+ * la 1) y flechas ← ↑ / → ↓ / Home / End, sin vuelta.
+ *
+ * iOS `:active`: listeners touchstart/touchend PASIVOS en el host (homólogo del
+ * `SuiToque` del Angular); el touchend suelta el foco del botón tocado.
+ *
+ * `scoped: true` (light DOM, NO shadow): los `<sui-icon>`/`<sui-emoji>` internos
+ * heredan font/tokens del global y los selectores `:host([data-*])` funcionan.
+ */
+export class SuiRating {
+    constructor() {
+        /** Apariencia. Default `inline`. */
+        this.appearance = 'inline';
+        /** Tipo visual. Default `star`. emoji/number solo aplican en bar/bar-area. */
+        this.type = 'star';
+        /** Value actual 0..max (mutable, two-way via evento `valueChange`). */
+        this.value = 0;
+        /** Numero de cells. Default `5`. */
+        this.max = 5;
+        /** Tamaño del icon. Default `medium`. Ignorado en cell (32); en bar solo 2xlarge cambia la celda. */
+        this.size = 'medium';
+        /** Deshabilita clicks (display only). */
+        this.readonly = false;
+        /**
+         * Equivalente al setDisabledState del CVA Angular: deshabilita por completo
+         * (atenua + bloquea cursor) igual que readonly, pero semanticamente distinto
+         * (readonly = display intencional; disabled = el form/consumer lo apago).
+         */
+        this.disabled = false;
+        /** inline + readonly: renderiza half-fill basado en value decimal. */
+        this.halfStep = false;
+        /** inline: muestra "4.5" al lado de los iconos. */
+        this.showValue = false;
+        /** inline: muestra "5.2K Ratings" al lado (formato corto). */
+        this.reviewCount = null;
+        /** inline: link "18 reviews" al lado. Lleva objeto -> pasar como property. */
+        this.reviewLink = null;
+        /** inline: alineacion del bloque meta. Default `inline`. */
+        this.alignment = 'inline';
+        /**
+         * Lista de emoji names para type='emoji' (default: 5 caras CSAT). Cada string
+         * debe ser un `name` valido del catalogo de `<sui-emoji>`. Lleva array -> pasar
+         * como property (`el.emojis = [...]`).
+         */
+        this.emojis = SUI_RATING_DEFAULT_EMOJIS;
+        /** Nombre accesible del grupo (en Angular sale de provideSuiTextos). */
+        this.ariaLabel = 'Calificación';
+        /** bar-area: texto del reason (textarea). Mutable, two-way via `reasonChange`. */
+        this.reason = '';
+        /** bar-area: placeholder del textarea (en Angular sale de provideSuiTextos). */
+        this.reasonPlaceholder = 'Cuéntanos por qué';
+        /** bar-area: filas iniciales del textarea (el min-height lo fija el CSS = 72px). */
+        this.reasonRows = 3;
+        /** Hover preview (desktop). En mobile no se setea — touch va directo al click. */
+        this.hoverIndex = null;
+        this.onCellClick = (index) => {
+            if (!this.isInteractive)
+                return;
+            // Re-click en la celda seleccionada es no-op (no resetea a 0).
+            if (this.value === index)
+                return;
+            this.value = index;
+            this.valueChange.emit(index);
+        };
+        this.onCellEnter = (index) => {
+            if (!this.isInteractive)
+                return;
+            this.hoverIndex = index;
+        };
+        this.onCellLeave = () => {
+            if (!this.isInteractive)
+                return;
+            this.hoverIndex = null;
+        };
+        this.onReasonInput = (event) => {
+            var _a, _b;
+            const v = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+            this.reason = v;
+            this.reasonChange.emit(v);
+        };
+        /**
+         * `ariaLabel` está atado al atributo `aria-label` del host: lo que se escribe ahí
+         * vuelve al prop. Como el nombre de solo lectura es más largo que el prop
+         * («Calificación: 4,5 de 5»), escribirlo desde el render lo realimentaba y
+         * crecía sin fin. El nombre base del consumer se guarda aparte y el atributo
+         * se escribe después del render.
+         */
+        this.nombreBase = 'Calificación';
+        this.ultimoNombre = null;
+    }
+    /** Limpia el hover cuando se vuelve no-interactive (evita estado pegado). */
+    onInteractiveChange() {
+        if (!this.isInteractive)
+            this.hoverIndex = null;
+    }
+    /** True cuando acepta interaccion: NO readonly Y NO disabled. */
+    get isInteractive() {
+        return !this.readonly && !this.disabled;
+    }
+    /** Vista pre-computada de cells (delegada al helper puro del .data.ts). */
+    get cells() {
+        return buildRatingCells(this.max, this.value, this.hoverIndex, this.isInteractive, this.appearance, this.halfStep, this.readonly, this.emojis);
+    }
+    get iconPx() {
+        return ratingIconPx(this.appearance, this.size);
+    }
+    alTocar() {
+        /* presencia del listener = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    alSoltar(event) {
+        soltarToque(event, 'button');
+    }
+    /** Índice (1..max) de la celda con tabindex 0: la elegida, o la primera. */
+    get tabStopIndex() {
+        const v = this.value;
+        return Number.isInteger(v) && v >= 1 && v <= this.max ? v : 1;
+    }
+    /**
+     * Patrón radiogroup (interactivo): ← ↑ bajan la nota, → ↓ la suben, Home/End
+     * van a 1 / max. Las flechas eligen. Sin vuelta.
+     */
+    onKeydown(event) {
+        var _a;
+        if (!this.isInteractive)
+            return;
+        const cur = this.tabStopIndex - 1;
+        const next = suiRovingIndex(event.key, this.value >= 1 ? cur : -1, this.max, 'both', false);
+        if (next === null)
+            return;
+        event.preventDefault();
+        // Sin nota elegida, la primera flecha elige la 1 (no salta a la 2).
+        const target = this.value >= 1 ? next + 1 : event.key === 'End' ? this.max : 1;
+        this.onCellClick(target);
+        (_a = this.el
+            .querySelectorAll('button.sui-rating__icon, button.sui-rating__bar-cell')[target - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /** Rol del host: `img` para la nota de solo lectura (o `group` si trae link), `radiogroup` para pedirla. */
+    get hostRole() {
+        if (!this.readonly)
+            return 'radiogroup';
+        return this.reviewLink ? 'group' : 'img';
+    }
+    componentWillLoad() {
+        this.nombreBase = this.ariaLabel || 'Calificación';
+    }
+    onAriaLabelChange(v) {
+        if (v !== this.ultimoNombre)
+            this.nombreBase = v || 'Calificación';
+    }
+    componentDidRender() {
+        /* En un microtask: escribir el atributo dentro del ciclo de render cuenta
+           como «prop cambiado durante el render» (warning de Stencil). */
+        queueMicrotask(() => {
+            const nombre = this.hostAriaLabel;
+            if (this.el.getAttribute('aria-label') !== nombre) {
+                this.ultimoNombre = nombre;
+                this.el.setAttribute('aria-label', nombre);
+            }
+        });
+    }
+    /** Nombre accesible: interactivo = `ariaLabel`; readonly = «Calificación: 4,5 de 5, 120 calificaciones». */
+    get hostAriaLabel() {
+        const base = this.nombreBase;
+        if (!this.readonly)
+            return base;
+        const v = this.value;
+        const num = Number.isInteger(v) ? String(v) : v.toFixed(1).replace(/\.0$/, '').replace('.', ',');
+        const n = this.reviewCount;
+        const count = n === null || n === undefined ? '' : `, ${n} ${n === 1 ? 'calificación' : 'calificaciones'}`;
+        return `${base}: ${num} de ${this.max}${count}`;
+    }
+    /**
+     * En appearance='cell' el EMPTY es el glyph RELLENO gris (Figma Rating Cell
+     * 532:4160 «Empty Filled»), no el outline del inline.
+     */
+    cellIconName(fill) {
+        if (this.appearance === 'cell' && fill === 'empty')
+            return ratingIconName(this.type, 'full');
+        return ratingIconName(this.type, fill);
+    }
+    // ── Render helpers ────────────────────────────────────────────────────
+    /** Single icon (appearance='inline' y 'cell'). */
+    renderIconCell(cell) {
+        const ariaChecked = this.value === cell.index ? 'true' : 'false';
+        const ariaLabel = `${cell.index} de ${this.max}`;
+        if (this.readonly) {
+            return (h("span", { class: "sui-rating__icon", "data-fill": cell.fill, "data-cell-state": cell.cellState, "aria-hidden": "true" }, h("sui-icon", { name: this.cellIconName(cell.fill), size: this.iconPx })));
+        }
+        return (h("button", { type: "button", class: "sui-rating__icon", "data-fill": cell.fill, "data-cell-state": cell.cellState, "data-selected": this.value === cell.index ? '' : null, disabled: this.disabled, role: "radio", "aria-checked": ariaChecked, "aria-label": ariaLabel, tabindex: cell.index === this.tabStopIndex ? 0 : -1, onClick: () => this.onCellClick(cell.index), onMouseEnter: () => this.onCellEnter(cell.index), onMouseLeave: () => this.onCellLeave() }, h("sui-icon", { name: this.cellIconName(cell.fill === 'empty' ? 'empty' : 'full'), size: this.iconPx })));
+    }
+    /** Contenido de una cell de bar/bar-area segun type. */
+    renderCellContent(cell) {
+        if (this.type === 'emoji') {
+            /* Cinco APNG de ~1 MB en bucle traban el scroll: copia estática, como el Angular. */
+            return h("sui-emoji", { class: "sui-rating__emoji", name: cell.emoji, size: "sm", animated: false });
+        }
+        if (this.type === 'number') {
+            return h("span", { class: "sui-rating__number" }, cell.index);
+        }
+        // star | heart
+        return h("sui-icon", { name: ratingBarIconName(this.type, cell.cellState), size: 20 });
+    }
+    /** Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. */
+    renderBarRow() {
+        return (h("div", { class: "sui-rating__bar", onMouseLeave: () => this.onCellLeave() }, this.cells.map((cell) => {
+            const ariaChecked = this.value === cell.index ? 'true' : 'false';
+            const ariaLabel = `${cell.index} de ${this.max}`;
+            if (this.readonly) {
+                return (h("div", { class: "sui-rating__bar-cell", "data-fill": cell.fill, "data-cell-state": cell.cellState, "aria-hidden": "true" }, this.renderCellContent(cell)));
+            }
+            return (h("button", { type: "button", class: "sui-rating__bar-cell", "data-fill": cell.fill, "data-cell-state": cell.cellState, "data-selected": this.value === cell.index ? '' : null, disabled: this.disabled, role: "radio", "aria-checked": ariaChecked, "aria-label": ariaLabel, tabindex: cell.index === this.tabStopIndex ? 0 : -1, onClick: () => this.onCellClick(cell.index), onMouseEnter: () => this.onCellEnter(cell.index) }, this.renderCellContent(cell)));
+        })));
+    }
+    /** Meta (value + reviewCount + link), inline vertical/horizontal. */
+    renderMeta() {
+        const link = this.reviewLink;
+        return [
+            this.showValue && h("span", { class: "sui-rating__value" }, ratingValueLabel(this.value)),
+            this.showValue && this.reviewCount !== null && (h("span", { class: "sui-rating__sep", "aria-hidden": "true" }, "\u2219")),
+            this.reviewCount !== null && (h("span", { class: "sui-rating__count" }, ratingReviewCountLabel(this.reviewCount), " ", this.reviewCount === 1 ? 'calificación' : 'calificaciones')),
+            link &&
+                (link.href ? (h("a", { class: "sui-rating__link", href: link.href, onClick: (ev) => suiHrefClick(ev, link.href) }, link.label)) : (h("button", { type: "button", class: "sui-rating__link" }, link.label))),
+        ];
+    }
+    renderInline() {
+        const hasMeta = this.showValue || this.reviewCount !== null || !!this.reviewLink;
+        if (this.alignment === 'vertical' || this.alignment === 'horizontal') {
+            return [
+                h("div", { class: "sui-rating__icons" }, this.cells.map((c) => this.renderIconCell(c))),
+                hasMeta && (h("div", { class: `sui-rating__meta sui-rating__meta--${this.alignment}` }, this.renderMeta())),
+            ];
+        }
+        // alignment 'inline' (default): solo los iconos bare.
+        return this.cells.map((c) => this.renderIconCell(c));
+    }
+    /** Contenido interno segun appearance (todo lo que va dentro del Host). */
+    renderInner() {
+        if (this.appearance === 'inline') {
+            return this.renderInline();
+        }
+        if (this.appearance === 'cell') {
+            return (h("div", { class: "sui-rating__cells", onMouseLeave: () => this.onCellLeave() }, this.cells.map((c) => this.renderIconCell(c))));
+        }
+        if (this.appearance === 'bar') {
+            return this.renderBarRow();
+        }
+        // appearance === 'bar-area'
+        return (h("div", { class: "sui-rating__area" }, this.renderBarRow(), h("div", { class: "sui-rating__area-input" }, this.readonly ? (h("p", { class: {
+                'sui-rating__area-text': true,
+                'sui-rating__area-text--placeholder': !this.reason,
+            } }, this.reason || this.reasonPlaceholder)) : (h("textarea", { class: "sui-rating__area-textarea", rows: this.reasonRows, value: this.reason, placeholder: this.reasonPlaceholder, disabled: this.disabled, "aria-label": this.reasonPlaceholder, onInput: this.onReasonInput })))));
+    }
+    render() {
+        return (h(Host, { key: '600e025b70200a406f6d31a9a978035c9092a36a', role: this.hostRole, "aria-readonly": !this.readonly && !this.isInteractive ? 'true' : null, "aria-disabled": !this.readonly && this.disabled ? 'true' : null, "data-appearance": this.appearance, "data-type": this.type, "data-size": this.size, "data-alignment": this.alignment, "data-disabled": this.disabled ? '' : null }, this.renderInner()));
+    }
+    static get is() { return "sui-rating"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-rating.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiRatingAppearance",
+                    "resolved": "\"bar\" | \"bar-area\" | \"cell\" | \"inline\"",
+                    "references": {
+                        "SuiRatingAppearance": {
+                            "location": "import",
+                            "path": "./sui-rating.data",
+                            "id": "src/components/sui-rating/sui-rating.data.ts::SuiRatingAppearance",
+                            "referenceLocation": "SuiRatingAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apariencia. Default `inline`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "appearance",
+                "defaultValue": "'inline'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiRatingType",
+                    "resolved": "\"emoji\" | \"heart\" | \"number\" | \"star\"",
+                    "references": {
+                        "SuiRatingType": {
+                            "location": "import",
+                            "path": "./sui-rating.data",
+                            "id": "src/components/sui-rating/sui-rating.data.ts::SuiRatingType",
+                            "referenceLocation": "SuiRatingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo visual. Default `star`. emoji/number solo aplican en bar/bar-area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'star'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value actual 0..max (mutable, two-way via evento `valueChange`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Numero de cells. Default `5`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiRatingSize",
+                    "resolved": "\"2xlarge\" | \"large\" | \"medium\" | \"small\" | \"xlarge\"",
+                    "references": {
+                        "SuiRatingSize": {
+                            "location": "import",
+                            "path": "./sui-rating.data",
+                            "id": "src/components/sui-rating/sui-rating.data.ts::SuiRatingSize",
+                            "referenceLocation": "SuiRatingSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del icon. Default `medium`. Ignorado en cell (32); en bar solo 2xlarge cambia la celda."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita clicks (display only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Equivalente al setDisabledState del CVA Angular: deshabilita por completo\n(atenua + bloquea cursor) igual que readonly, pero semanticamente distinto\n(readonly = display intencional; disabled = el form/consumer lo apago)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "halfStep": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "inline + readonly: renderiza half-fill basado en value decimal."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "half-step",
+                "defaultValue": "false"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "inline: muestra \"4.5\" al lado de los iconos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "reviewCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "inline: muestra \"5.2K Ratings\" al lado (formato corto)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "review-count",
+                "defaultValue": "null"
+            },
+            "reviewLink": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiRatingReviewLink | null",
+                    "resolved": "SuiRatingReviewLink | null",
+                    "references": {
+                        "SuiRatingReviewLink": {
+                            "location": "import",
+                            "path": "./sui-rating.data",
+                            "id": "src/components/sui-rating/sui-rating.data.ts::SuiRatingReviewLink",
+                            "referenceLocation": "SuiRatingReviewLink"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "inline: link \"18 reviews\" al lado. Lleva objeto -> pasar como property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiRatingAlignment",
+                    "resolved": "\"horizontal\" | \"inline\" | \"vertical\"",
+                    "references": {
+                        "SuiRatingAlignment": {
+                            "location": "import",
+                            "path": "./sui-rating.data",
+                            "id": "src/components/sui-rating/sui-rating.data.ts::SuiRatingAlignment",
+                            "referenceLocation": "SuiRatingAlignment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "inline: alineacion del bloque meta. Default `inline`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "alignment",
+                "defaultValue": "'inline'"
+            },
+            "emojis": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de emoji names para type='emoji' (default: 5 caras CSAT). Cada string\ndebe ser un `name` valido del catalogo de `<sui-emoji>`. Lleva array -> pasar\ncomo property (`el.emojis = [...]`)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n  'pensive-face',\n  'confused-face',\n  'neutral-face',\n  'slightly-smiling-face',\n  'grinning-face-smiling-eyes',\n]"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre accesible del grupo (en Angular sale de provideSuiTextos)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Calificaci\u00F3n'"
+            },
+            "reason": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "bar-area: texto del reason (textarea). Mutable, two-way via `reasonChange`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reason",
+                "defaultValue": "''"
+            },
+            "reasonPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "bar-area: placeholder del textarea (en Angular sale de provideSuiTextos)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reason-placeholder",
+                "defaultValue": "'Cu\u00E9ntanos por qu\u00E9'"
+            },
+            "reasonRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "bar-area: filas iniciales del textarea (el min-height lo fija el CSS = 72px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reason-rows",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hoverIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite con el index 1..max cuando el user selecciona (0 nunca, re-click es no-op)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "reasonChange",
+                "name": "reasonChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite con el texto del reason (bar-area) en cada input."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "readonly",
+                "methodName": "onInteractiveChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "onInteractiveChange"
+            }, {
+                "propName": "ariaLabel",
+                "methodName": "onAriaLabelChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "alTocar",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "alSoltar",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}