@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,494 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * `<sui-accordion>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-accordion/). Misma API
+ * pública, TODAS las variantes/estados (default | active, flipIcon off/on,
+ * leftIcon on/off, badge new/upd/old), mismo comportamiento (lazy mount,
+ * animación CSS keyframes estilo Radix con ResizeObserver, two-way open via
+ * evento, focus ring, ARIA region) y mismos VALORES exactos (tokens del DS,
+ * NO hex). Reusa el primitivo `<sui-icon>` ya portado. El accent del DS es
+ * NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO. Node 210:4022 (component-set "Accordion 11").
+ *
+ * EXACT (pulled from Figma 210:4022):
+ *   - Padding 14px todos los lados · Gap 10px entre icono/texto/toggle
+ *   - items-start (iconos al top) · Border-radius 10px (--sui-radius-10)
+ *   - Default (collapsed): bg-white-0 + 1px stroke-soft-200 + shadow-x-small,
+ *     toggle icon add-line
+ *   - Hover (collapsed): bg-weak-50 + sin border + sin shadow, toggle add-line
+ *   - Active (expanded): bg-weak-50 + sin border + sin shadow, toggle subtract-line,
+ *     descripción visible con gap interno 6px
+ *   - Title "Label/Small": Inter Medium 500, 14/20, letter-spacing
+ *     --sui-type-label-sm-spacing (-0.006em), color text-strong-950
+ *   - Description "Paragraph/Small" (solo active): Inter Regular 400, 14/20,
+ *     letter-spacing --sui-type-paragraph-sm-spacing (-0.006em), color text-sub-600
+ *   - Icons: container 20×20, color icon-sub-600. left default question-line,
+ *     toggle add-line / subtract-line
+ *
+ * Animación: CSS @keyframes (approach Radix UI). El componente expone
+ * `--sui-accordion-content-height` mantenida por un ResizeObserver sobre el
+ * inner. Timing 280ms con easing diferenciado open/close (open
+ * cubic-bezier(0.65,0,0.35,1); close cubic-bezier(0.32,0.72,0,1) estilo Apple).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * y el `<sui-icon>` interno heredan font/tokens del global. Misma estrategia
+ * que el Angular original.
+ *
+ * GOTCHAS Stencil (vs el Angular original):
+ *  - El `model<boolean> open` del Angular → @Prop mutable+reflect `open` +
+ *    @Event `openChange` (idiom de two-way binding en web components).
+ *  - El @Input `title` del Angular es nombre reservado del DOM (tooltip nativo
+ *    gris) → renombrado a `heading`. Además se stripea el atributo `title` del
+ *    Host (removeAttribute en componentWillLoad), patrón canon Ontop.
+ *  - El botón trigger interno lleva onTouchStart/onTouchEnd (fix iOS :active
+ *    stuck) — los @Listen del host no aplican a botones internos.
+ *
+ * Slots:
+ *  - default → contenido arbitrario del body (reemplaza el [sui-accordion-body]
+ *    + ng-content default del Angular; scoped slot único). Con lazy=true no se
+ *    monta hasta el primer open, y permanece tras cerrar (preserva state).
+ */
+export class SuiAccordion {
+    constructor() {
+        /**
+         * Id del título, usado como `aria-labelledby` del body con `role="region"`.
+         * Per ARIA 1.2 una region landmark DEBE tener accessible name.
+         */
+        this.titleId = `sui-accordion-title-${++SuiAccordion._nextId}`;
+        /**
+         * Texto del título (header del accordion).
+         * Renombrado desde el `title` del Angular: `title` es reservado del DOM
+         * (dispara el tooltip nativo gris). En HTML el atributo es `heading`.
+         */
+        this.heading = '';
+        /** Texto de la descripción: va en el header bajo el título y aparece animada al abrir. */
+        this.description = '';
+        /**
+         * Estado expandido. Two-way: @Prop mutable+reflect + @Event `openChange`.
+         * - false → muestra solo título + toggle (+)
+         * - true  → muestra título + descripción + toggle (−)
+         */
+        this.open = false;
+        /**
+         * Si `true`, el contenido del slot no se monta en el DOM hasta que el
+         * accordion se abra por primera vez. Una vez montado queda en el DOM
+         * (no se desmonta al cerrar) para conservar state interno y evitar re-medir.
+         * Default `false`.
+         */
+        this.lazy = false;
+        /**
+         * Posición del toggle.
+         * - 'off' (default) → toggle a la derecha, slot del leftIcon disponible
+         * - 'on'            → toggle a la izquierda, NO hay slot leftIcon
+         * En HTML el atributo es `flip-icon`.
+         */
+        this.flipIcon = 'off';
+        /**
+         * Icono izquierdo (solo aplica con `flipIcon=off`):
+         * - `true` (default) → icono default `question-line`
+         * - string           → nombre custom del Remix Icon (sin prefijo `ri-`)
+         * - `false`          → sin icono (en HTML: `left-icon="false"`)
+         */
+        this.leftIcon = true;
+        /**
+         * Badge opcional en el header — string (`badge="New"`) o `SuiBadgeConfig`
+         * ({ label, color?, variant?, size? }, por propiedad JS). `null` = sin badge.
+         * Se renderiza con `<sui-badge>`; defaults: color `green`, variant `lighter`,
+         * size `small`.
+         */
+        this.badge = null;
+        /**
+         * Tracking interno: ¿este accordion ya fue abierto al menos una vez?
+         * Una vez true, queda true para siempre. Usado cuando lazy=true para decidir
+         * si proyectar el slot.
+         */
+        this.hasBeenOpened = false;
+        /**
+         * El state que efectivamente se aplica al data-state del DOM. Cuando lazy=true
+         * y es el primer open, marcamos hasBeenOpened=true para montar el contenido
+         * pero NO seteamos resolvedOpen=true hasta haber medido la altura del inner y
+         * seteado la CSS variable — sino la keyframe sui-accordion-down arranca con
+         * var(--height) sin definir y no anima en el primer open.
+         */
+        this.resolvedOpen = false;
+        this.onTriggerClick = () => {
+            this.setOpen(!this.open);
+        };
+    }
+    /** ¿Renderizar el contenido del slot? (lazy gating). */
+    get shouldRenderContent() {
+        return !this.lazy || this.hasBeenOpened;
+    }
+    /** State del data-attribute (default | active) — usa resolvedOpen para
+     *  consistencia visual con el data-state del body. */
+    get state() {
+        return this.resolvedOpen ? 'active' : 'default';
+    }
+    /** Nombre resuelto del icono izquierdo; `null` = no renderizar el slot. */
+    get leftIconResolved() {
+        const v = this.leftIcon;
+        /* string | boolean es `any` para Stencil: el atributo llega como texto crudo. */
+        if (v === false || v === 'false')
+            return null;
+        if (v === true || v === 'true' || v === '')
+            return 'question-line';
+        return v || null;
+    }
+    /** Config resuelta del badge (string → { label }; vacío → null). */
+    get badgeCfg() {
+        var _a;
+        const b = this.badge;
+        if (!b)
+            return null;
+        const cfg = typeof b === 'string' ? { label: b } : b;
+        return Object.assign(Object.assign({}, cfg), { color: (_a = cfg.color) !== null && _a !== void 0 ? _a : 'green' });
+    }
+    /** Nombre del icono toggle según estado. */
+    get toggleIconName() {
+        return this.resolvedOpen ? 'subtract-line' : 'add-line';
+    }
+    /**
+     * Sincroniza resolvedOpen con open, con delay especial para el primer open
+     * en modo lazy (espejo del effect `syncOpen` del Angular):
+     *   - Cierra (open=false): resolvedOpen=false inmediato (el RO ya tiene la
+     *     altura previa, la keyframe up arranca bien).
+     *   - Abre Y lazy && !hasBeenOpened: triggear mount, NO setear resolvedOpen
+     *     ahora; observeContent lo setea tras montar+medir el inner.
+     *   - Abre Y ya montado: resolvedOpen=true inmediato.
+     */
+    onOpenChange(open) {
+        if (!open) {
+            this.resolvedOpen = false;
+            return;
+        }
+        if (this.lazy && !this.hasBeenOpened) {
+            this.hasBeenOpened = true;
+            return;
+        }
+        this.resolvedOpen = true;
+    }
+    componentWillLoad() {
+        /* `<Host>` no borra un title puesto por el consumer: se quita
+           a mano para que no salga el tooltip nativo gris (en Angular, '[attr.title]': 'null').
+           shortcut: solo al montar; un title agregado después queda, subir a MutationObserver si hace falta. */
+        this.el.removeAttribute('title');
+        // Estado inicial coherente si abre montado (no lazy o ya abierto).
+        if (this.open) {
+            if (this.lazy && !this.hasBeenOpened) {
+                this.hasBeenOpened = true;
+            }
+            else {
+                this.resolvedOpen = true;
+            }
+        }
+    }
+    componentDidLoad() {
+        this.captureRefs();
+        this.observeContent();
+    }
+    /**
+     * Tras cada render Stencil re-captura refs (el inner puede haber montado por
+     * lazy) y re-mide. Equivale a la combinación viewChild + effect del Angular.
+     */
+    componentDidRender() {
+        this.captureRefs();
+        this.observeContent();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    captureRefs() {
+        var _a, _b;
+        this.bodyEl = (_a = this.el.querySelector('.sui-accordion__body')) !== null && _a !== void 0 ? _a : undefined;
+        this.innerEl =
+            (_b = this.el.querySelector('.sui-accordion__body-inner')) !== null && _b !== void 0 ? _b : undefined;
+    }
+    /**
+     * Mide el inner y mantiene --sui-accordion-content-height actualizada. Si
+     * veníamos esperando el first lazy open (open=true pero resolvedOpen aún
+     * false), lo libera ahora — garantiza que el primer open SÍ anima en lazy.
+     * Después instala un ResizeObserver para mantener la var si el contenido
+     * cambia (responsive, lazy data load).
+     */
+    observeContent() {
+        var _a;
+        const body = this.bodyEl;
+        const inner = this.innerEl;
+        if (!body || !inner)
+            return;
+        // Medición síncrona inicial (mismo tick que el mount del inner).
+        const h = inner.offsetHeight;
+        body.style.setProperty('--sui-accordion-content-height', `${h}px`);
+        // Libera el first lazy open si estaba pendiente.
+        if (this.open && !this.resolvedOpen) {
+            this.resolvedOpen = true;
+        }
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = new ResizeObserver(() => {
+            /* offsetHeight = altura renderizada COMPLETA (incluye padding). No usar
+               entry.contentRect.height: excluye el padding y recortaba 14px abajo. */
+            body.style.setProperty('--sui-accordion-content-height', `${inner.offsetHeight}px`);
+        });
+        this.resizeObserver.observe(inner);
+    }
+    /** Togglea el estado expandido (API pública). */
+    async toggle() {
+        this.setOpen(!this.open);
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        this.openChange.emit(value);
+    }
+    render() {
+        var _a, _b;
+        const flipped = this.flipIcon === 'on';
+        const leftIcon = flipped ? null : this.leftIconResolved;
+        const bcfg = this.badgeCfg;
+        const toggleIcon = (h("span", { key: 'ba65fac860ec68778ff97b991dcc1bc8fdff4f6f', class: "sui-accordion__icon sui-accordion__icon--toggle", "aria-hidden": "true" }, h("sui-icon", { key: '2ebcf9b983f51528d940fd53b99c31950da7c526', name: this.toggleIconName, size: 20 })));
+        return (h(Host, { key: 'a0ed7304337759537ef051a304f129fa9d9c63c5', "data-sui-state": this.state, "data-sui-flip-icon": this.flipIcon }, h("button", { key: 'c4048a150d0747348d2f2ad397b21b7800d189c8', type: "button", class: "sui-accordion__trigger", "aria-expanded": this.resolvedOpen ? 'true' : 'false', onClick: this.onTriggerClick, onTouchStart: () => undefined, onTouchEnd: (e) => e.currentTarget.blur() }, flipped
+            ? toggleIcon
+            : leftIcon ? (h("span", { class: "sui-accordion__icon sui-accordion__icon--left", "aria-hidden": "true" }, h("sui-icon", { name: leftIcon, size: 20 }))) : undefined, h("span", { key: 'c00b6b6b26e41a3a03a6168e728e260e646aff0e', class: "sui-accordion__text" }, bcfg ? (h("span", { class: "sui-accordion__title-row" }, h("span", { class: "sui-accordion__title", id: this.titleId }, this.heading), h("sui-badge", { class: "sui-accordion__badge", color: bcfg.color, variant: (_a = bcfg.variant) !== null && _a !== void 0 ? _a : 'lighter', size: (_b = bcfg.size) !== null && _b !== void 0 ? _b : 'small' }, bcfg.label))) : (h("span", { class: "sui-accordion__title", id: this.titleId }, this.heading)), this.description ? (
+        /* desc-wrap anima la aparición con grid-template-rows 0fr→1fr (CSS-only).
+           aria-hidden cuando cerrado: fuera del lector de pantalla, sigue en el
+           DOM para poder animar su altura. */
+        h("span", { class: "sui-accordion__desc-wrap", "aria-hidden": this.resolvedOpen ? null : 'true' }, h("span", { class: "sui-accordion__description" }, this.description))) : undefined), !flipped && toggleIcon), h("div", { key: 'a06e8bca8b8cdcfeeb1a5cc2b8a1947299d985cc', class: "sui-accordion__body", role: "region", "aria-labelledby": this.titleId, "data-state": this.resolvedOpen ? 'open' : 'closed', "aria-hidden": this.resolvedOpen ? 'false' : 'true' }, h("div", { key: 'd45cbaeb2e00b1d996b87dab89141d108f3c99c9', class: "sui-accordion__body-inner" }, this.shouldRenderContent && h("slot", { key: 'f258a734feb5e01ea9f4989352deffd516aa3477' })))));
+    }
+    static get is() { return "sui-accordion"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del t\u00EDtulo (header del accordion).\nRenombrado desde el `title` del Angular: `title` es reservado del DOM\n(dispara el tooltip nativo gris). En HTML el atributo es `heading`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de la descripci\u00F3n: va en el header bajo el t\u00EDtulo y aparece animada al abrir."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "Prop",
+                            "text": "mutable+reflect +"
+                        }, {
+                            "name": "Event",
+                            "text": "`openChange`.\n- false \u2192 muestra solo t\u00EDtulo + toggle (+)\n- true  \u2192 muestra t\u00EDtulo + descripci\u00F3n + toggle (\u2212)"
+                        }],
+                    "text": "Estado expandido. Two-way:"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si `true`, el contenido del slot no se monta en el DOM hasta que el\naccordion se abra por primera vez. Una vez montado queda en el DOM\n(no se desmonta al cerrar) para conservar state interno y evitar re-medir.\nDefault `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy",
+                "defaultValue": "false"
+            },
+            "flipIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiAccordionFlipIcon",
+                    "resolved": "\"off\" | \"on\"",
+                    "references": {
+                        "SuiAccordionFlipIcon": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-accordion/sui-accordion.tsx",
+                            "id": "src/components/sui-accordion/sui-accordion.tsx::SuiAccordionFlipIcon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posici\u00F3n del toggle.\n- 'off' (default) \u2192 toggle a la derecha, slot del leftIcon disponible\n- 'on'            \u2192 toggle a la izquierda, NO hay slot leftIcon\nEn HTML el atributo es `flip-icon`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "flip-icon",
+                "defaultValue": "'off'"
+            },
+            "leftIcon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icono izquierdo (solo aplica con `flipIcon=off`):\n- `true` (default) \u2192 icono default `question-line`\n- string           \u2192 nombre custom del Remix Icon (sin prefijo `ri-`)\n- `false`          \u2192 sin icono (en HTML: `left-icon=\"false\"`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-icon",
+                "defaultValue": "true"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiBadgeConfig | string | null",
+                    "resolved": "SuiBadgeConfig | null | string",
+                    "references": {
+                        "SuiBadgeConfig": {
+                            "location": "import",
+                            "path": "../sui-badge/sui-badge",
+                            "id": "src/components/sui-badge/sui-badge.tsx::SuiBadgeConfig",
+                            "referenceLocation": "SuiBadgeConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge opcional en el header \u2014 string (`badge=\"New\"`) o `SuiBadgeConfig`\n({ label, color?, variant?, size? }, por propiedad JS). `null` = sin badge.\nSe renderiza con `<sui-badge>`; defaults: color `green`, variant `lighter`,\nsize `small`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasBeenOpened": {},
+            "resolvedOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Se emite cada vez que cambia `open` (two-way binding)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Togglea el estado expandido (API p\u00FAblica).",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}
+/** Contador estático para ids únicos por instancia (accessible name del region). */
+SuiAccordion._nextId = 0;