@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,419 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * `<sui-tabs>` — Pestañas en tres modos (segment, line y vertical); obsoleto, ver `@deprecated`.
+ *
+ * Portado 1:1 desde el `SuiTabs` Angular de antes de partirse. Misma API pública
+ * (tabs/active/variant/size/verticalStyle/dividerLabel + evento de cambio),
+ * mismas variantes/sizes/states, mismo comportamiento (segment indicator
+ * animado vía ResizeObserver, disabled no-op, iOS :active fix) y mismos VALORES
+ * exactos (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319),
+ * NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ *
+ * COMPUESTO: cubre tres componentes de Figma bajo un solo `sui-tabs`:
+ *   - variant='segment'  → "Segmented Control [1.1]" (pill iOS, indicador animado)
+ *   - variant='line'     → "Tab Menu Horizontal [1.1]" (underline tabs)
+ *   - variant='vertical' → "Tab Menu Vertical [1.1]" (sidebar nav, Card|List)
+ *
+ * Reusa el primitivo `<sui-icon>` ya portado para leftIcon / chevron (NO
+ * re-implementa el icono). El badge numérico es markup propio del Tab Menu
+ * (Badge [1.1] inline), igual que en el Angular original.
+ *
+ * EXACT specs (Tab Menu pass, homologado contra Figma):
+ *   Segment container (2604:152): bg-weak-50, padding 4px, gap 4px, radius 10px,
+ *     item padding 4px gap 6px radius 6px icon 20px; indicator bg-white-0 con
+ *     shadow del toggle/switch, animado por transform+width (ResizeObserver).
+ *   Horizontal container (3511:9958): border-t/b 1px stroke-soft-200, py-14px,
+ *     gap-24px, items-start, bg-white-0. Item gap icon↔label 6px, gap label↔badge
+ *     4px; default/off sub-600, hover/off strong-950 (icon queda sub-600),
+ *     active/on strong-950 + indicator line primary-base 2px al ras del borde.
+ *   Vertical item (3515:10327/10341): gap 6px, padding 8px, radius-8, w-full,
+ *     label flex-1; active/on bg-weak-50 + strong-950; hover/off bg-weak-50 +
+ *     strong-950; default/off sub-600 (bg-white-0 en Card, transparent en List).
+ *     Container Card (3516:10412): bg-white-0, border 1px stroke-soft-200, p-10px,
+ *     radius-16, shadow-x-small, gap-8px. List: flat, gap-8px.
+ *
+ * `scoped: true` (light DOM, NO shadow): los `<sui-icon>` proyectados heredan el
+ * `currentColor` del item (tokens text/icon por estado) y el `:host([data-sui-*])`
+ * styling per-variant / per-size / per-vstyle aplica. Misma estrategia que el
+ * Angular original.
+ *
+ * API ↔ Angular:
+ *   - `tabs`          → input.required<SuiTab[]>
+ *   - `active`        → model<T>()  (aquí `@Prop mutable`, string; two-way por
+ *                       lectura de `el.active` tras el evento o seteo directo)
+ *   - `variant`       → input ('line' default)
+ *   - `size`          → input ('medium' default)
+ *   - `verticalStyle` → input ('card' default)
+ *   - `dividerLabel`  → input ('' default)
+ *   - evento          → `tabChange` output → aquí `suiTabChange` CustomEvent
+ *
+ * @deprecated El SUI Angular ya no tiene `sui-tabs`: se partió en componentes
+ * propios, que ya están en este paquete. Para código nuevo usar `<sui-tab-chips>`
+ * (chips de filtro o pestañas), `<sui-segmented-control>` (2-4 opciones
+ * excluyentes de un valor), `<sui-tab-menu-horizontal>` (modo `line`) o
+ * `<sui-tab-menu-vertical>` (modo `vertical`).
+ */
+export class SuiTabs {
+    constructor() {
+        /** Entradas a renderizar (data-driven). Requerido. */
+        this.tabs = [];
+        /** Variante visual. Default `line`. */
+        this.variant = 'line';
+        /**
+         * Tamaño (extra feature SUI; el Tab Menu de Figma no expone eje size).
+         * Solo afecta line/segment. Default `medium`.
+         */
+        this.size = 'medium';
+        /** Estilo del contenedor cuando variant='vertical' (Card|List). Default `card`. */
+        this.verticalStyle = 'card';
+        /**
+         * Label de sección renderizado sobre el menú vertical (prop `divider` del
+         * Figma — ej. 'SELECT MENU'). Vacío = sin divider. Solo variant='vertical'.
+         */
+        this.dividerLabel = '';
+        /** Estilo inline del indicator del segment (transform + width), animado. */
+        this.indicatorStyle = {
+            transform: 'translateX(0)',
+            width: '0',
+        };
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline para que `:active` dispare/se libere correctamente.
+     * `touchend.blur()` empuja la deselección inmediata. Sin esto `:active`
+     * "stickea" 300-500ms en pages standalone. Igual que el Angular original.
+     */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    onTouchEnd(event) {
+        const target = event.target;
+        const btn = target === null || target === void 0 ? void 0 : target.closest('button');
+        if (btn)
+            btn.blur();
+    }
+    componentDidLoad() {
+        // Posicionamiento inicial del indicator + observa el resize del track
+        // (mismo flujo que ngAfterViewInit del Angular: setTimeout 0 + ResizeObserver).
+        if (this.variant !== 'segment')
+            return;
+        this.attachResizeObserver();
+        this.scheduleIndicatorUpdate();
+    }
+    componentDidRender() {
+        // El track puede aparecer/desaparecer al cambiar variant; re-engancha el
+        // observer si hace falta y recoloca el indicator.
+        if (this.variant === 'segment') {
+            this.attachResizeObserver();
+            this.scheduleIndicatorUpdate();
+        }
+        else {
+            this.detachResizeObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.detachResizeObserver();
+    }
+    /** Reposiciona el indicator cuando cambia el tab activo (≈ effect del Angular). */
+    onActiveChange() {
+        if (this.variant === 'segment')
+            this.scheduleIndicatorUpdate();
+    }
+    onTabsChange() {
+        if (this.variant === 'segment')
+            this.scheduleIndicatorUpdate();
+    }
+    attachResizeObserver() {
+        const track = this.el.querySelector('.sui-tabs__segment-track');
+        if (!track)
+            return;
+        if (this.trackEl === track && this.resizeObserver)
+            return;
+        this.detachResizeObserver();
+        this.trackEl = track;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
+        this.resizeObserver.observe(track);
+    }
+    detachResizeObserver() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        this.trackEl = undefined;
+    }
+    /** setTimeout 0 para esperar el layout (igual al Angular). */
+    scheduleIndicatorUpdate() {
+        setTimeout(() => this.updateIndicator(), 0);
+    }
+    /** Mide el item activo vs el track y setea transform/width del indicator. */
+    updateIndicator() {
+        const track = this.el.querySelector('.sui-tabs__segment-track');
+        if (!track)
+            return;
+        const items = Array.from(track.querySelectorAll('.sui-tabs__segment-item'));
+        const idx = this.tabs.findIndex((t) => t.value === this.active);
+        const resolvedIdx = idx >= 0 ? idx : 0;
+        const item = items[resolvedIdx];
+        if (!item)
+            return;
+        const trackRect = track.getBoundingClientRect();
+        const itemRect = item.getBoundingClientRect();
+        this.indicatorStyle = {
+            transform: `translateX(${itemRect.left - trackRect.left}px)`,
+            width: `${itemRect.width}px`,
+        };
+    }
+    isActive(tab) {
+        return this.active === tab.value;
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active = tab.value;
+        this.suiTabChange.emit(tab.value);
+    }
+    renderSegment() {
+        return (h("div", { class: "sui-tabs__segment-track", role: "tablist" }, h("div", { class: "sui-tabs__segment-indicator", style: {
+                transform: this.indicatorStyle.transform,
+                width: this.indicatorStyle.width,
+            } }), this.tabs.map((tab) => {
+            const iconOnly = !!(tab.iconOnly && tab.icon);
+            return (h("button", { key: tab.value, type: "button", class: {
+                    'sui-tabs__segment-item': true,
+                    'sui-tabs__segment-item--active': this.isActive(tab),
+                    'sui-tabs__segment-item--icon-only': iconOnly,
+                }, disabled: tab.disabled, "aria-selected": this.isActive(tab) ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, "aria-label": iconOnly ? tab.label : undefined, role: "tab", onClick: () => this.select(tab) }, tab.icon && h("sui-icon", { name: tab.icon, size: 20 }), !tab.iconOnly && h("span", null, tab.label)));
+        })));
+    }
+    renderVertical() {
+        return (h("div", { class: "sui-tabs__vertical-track", role: "tablist" }, this.dividerLabel && (h("div", { class: "sui-tabs__vertical-divider" }, this.dividerLabel)), this.tabs.map((tab) => (h("button", { key: tab.value, type: "button", class: {
+                'sui-tabs__vertical-item': true,
+                'sui-tabs__vertical-item--active': this.isActive(tab),
+            }, disabled: tab.disabled, "aria-selected": this.isActive(tab) ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, role: "tab", onClick: () => this.select(tab) }, tab.icon && (h("sui-icon", { class: "sui-tabs__vertical-leading", name: tab.icon, size: 20 })), h("span", { class: "sui-tabs__vertical-label" }, tab.label), tab.badge ? h("span", { class: "sui-tabs__badge" }, tab.badge) : null, tab.chevron && (h("span", { class: "sui-tabs__chevron" }, h("sui-icon", { name: "arrow-right-s-line", size: 18 }))))))));
+    }
+    renderLine() {
+        return (h("div", { class: "sui-tabs__line-track", role: "tablist" }, this.tabs.map((tab) => (h("button", { key: tab.value, type: "button", class: {
+                'sui-tabs__line-item': true,
+                'sui-tabs__line-item--active': this.isActive(tab),
+            }, disabled: tab.disabled, "aria-selected": this.isActive(tab) ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, role: "tab", onClick: () => this.select(tab) }, tab.icon && (h("sui-icon", { class: "sui-tabs__line-leading", name: tab.icon, size: 20 })), h("span", { class: "sui-tabs__line-text" }, h("span", { class: "sui-tabs__line-label" }, tab.label), tab.badge ? h("span", { class: "sui-tabs__badge" }, tab.badge) : null), tab.chevron && (h("span", { class: "sui-tabs__line-chevron" }, h("sui-icon", { name: "arrow-right-s-line", size: 18 }))))))));
+    }
+    render() {
+        return (h(Host, { key: '3b9235217a08d9a4f82f07dabdcc6cba162e9e5b', "data-sui-variant": this.variant, "data-sui-size": this.size, "data-sui-vstyle": this.variant === 'vertical' ? this.verticalStyle : null }, this.variant === 'segment'
+            ? this.renderSegment()
+            : this.variant === 'vertical'
+                ? this.renderVertical()
+                : this.renderLine()));
+    }
+    static get is() { return "sui-tabs"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tabs": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "readonly SuiTab[]",
+                    "resolved": "readonly SuiTab[]",
+                    "references": {
+                        "SuiTab": {
+                            "location": "import",
+                            "path": "./sui-tabs.data",
+                            "id": "src/components/sui-tabs/sui-tabs.data.ts::SuiTab",
+                            "referenceLocation": "SuiTab"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Entradas a renderizar (data-driven). Requerido."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "active": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor del tab activo (\u2248 el `model active` de Angular). Mutable: el click\nactualiza `this.active` y emite `suiTabChange`; el consumer puede leerlo o\nsetearlo program\u00E1ticamente."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiTabsVariant",
+                    "resolved": "\"line\" | \"segment\" | \"vertical\"",
+                    "references": {
+                        "SuiTabsVariant": {
+                            "location": "import",
+                            "path": "./sui-tabs.data",
+                            "id": "src/components/sui-tabs/sui-tabs.data.ts::SuiTabsVariant",
+                            "referenceLocation": "SuiTabsVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante visual. Default `line`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'line'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiTabsSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "SuiTabsSize": {
+                            "location": "import",
+                            "path": "./sui-tabs.data",
+                            "id": "src/components/sui-tabs/sui-tabs.data.ts::SuiTabsSize",
+                            "referenceLocation": "SuiTabsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o (extra feature SUI; el Tab Menu de Figma no expone eje size).\nSolo afecta line/segment. Default `medium`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "verticalStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiTabsVerticalStyle",
+                    "resolved": "\"card\" | \"list\"",
+                    "references": {
+                        "SuiTabsVerticalStyle": {
+                            "location": "import",
+                            "path": "./sui-tabs.data",
+                            "id": "src/components/sui-tabs/sui-tabs.data.ts::SuiTabsVerticalStyle",
+                            "referenceLocation": "SuiTabsVerticalStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estilo del contenedor cuando variant='vertical' (Card|List). Default `card`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical-style",
+                "defaultValue": "'card'"
+            },
+            "dividerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label de secci\u00F3n renderizado sobre el men\u00FA vertical (prop `divider` del\nFigma \u2014 ej. 'SELECT MENU'). Vac\u00EDo = sin divider. Solo variant='vertical'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider-label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "indicatorStyle": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "suiTabChange",
+                "name": "suiTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido cuando cambia el tab activo (despu\u00E9s de actualizar `active`)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "onActiveChange"
+            }, {
+                "propName": "tabs",
+                "methodName": "onTabsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}