@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-inline-select/sui-inline-select.js

@@ -0,0 +1,702 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * `<sui-inline-select>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026). Misma API
+ * publica conceptual, las 2 variantes (icon / country), los 4 states (default /
+ * hover-focus / open / disabled), mismo comportamiento (overlay anclado al host,
+ * teclado Enter/Space/Escape/Arrow/Home/End, focus visual via color, lazy mount
+ * del panel, auto-flip al viewport) y mismos VALORES exactos (tokens del DS). El
+ * accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — Inline Select [1.1] 332:4537.
+ *   Selector inline SIN padding/border/bg — vive dentro de texto u otros
+ *   componentes como parte de una frase. 2 types x 4 states.
+ *   Typography: Paragraph/Small Regular 14/20 -0.6%, ss11.
+ *   Gap por type: country 6 / icon 4 (Figma exact).
+ *   Color states:
+ *     - icon default (sin hover/focus/open): text-sub-600 (muted).
+ *     - icon hover/focus/open: text-strong-950.
+ *     - country: siempre text-strong-950 (excepto disabled).
+ *     - disabled (ambos): text-disabled-300, flag opacity 0.48.
+ *
+ * El host ES el trigger visual inline (con su propio click/keydown handler).
+ * Cuando se le pasan `items`, el componente renderea su propio panel flotante
+ * (position absolute relativo al host) replicando el visual de
+ * `sui-dropdown-item mode="option"` (bg primary-alpha-10 + check icon + texto
+ * primary cuando selected) y delega selection + keyboard nav + close-on-outside +
+ * auto-flip. Cuando NO se le pasan items, funciona en modo trigger-only (solo
+ * emite `clicked`) y el consumer monta su propio overlay.
+ *
+ * Diferencias de PORT vs el Angular original (y por que):
+ *  - El Angular delegaba el overlay a `sui-dropdown-menu` (CDK Overlay) + items a
+ *    `sui-dropdown-item`. Aqui el panel + items se renderean inline (la pieza
+ *    minima necesaria) replicando el look de `sui-dropdown-item mode="option"`,
+ *    misma estrategia que los hermanos `sui-compact-select` y
+ *    `sui-compact-select-for-input` en este repo (que tambien delegaban a
+ *    dropdown-menu en Angular y se portaron con panel inline). Mismo look, sin la
+ *    fragilidad de wirear un custom element externo como origin.
+ *  - El Angular usaba ControlValueAccessor (formControl) + model() two-way para
+ *    `selected`. En web components el binding es por `value` prop + evento
+ *    `selectedChange`. `value` resuelve el item con `value === value` (incluido el
+ *    caso async: si los items llegan despues, un Watch re-resuelve el pending
+ *    value — replica el effect del Angular que reintenta cuando items cambia).
+ *  - `selected` no se expone como model two-way (no existe model() en Stencil); se
+ *    deriva internamente del `value`. El item seleccionado completo viaja en el
+ *    payload del evento `selectedChange`.
+ *  - El Angular mergeaba `disabled` con `_formDisabled` (setDisabledState del CVA).
+ *    Sin CVA, solo queda el `disabled` prop directo.
+ *
+ * GOTCHAS de API (renombres / Stencil):
+ *  - El @Prop `type` NO colisiona con DOM (el host es div-like, no input). `value`,
+ *    `icon` y `flag` tampoco colisionan.
+ *  - El `title` nativo se quita del host en componentWillLoad (convención del DS).
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend (la presencia del
+ * binding engage el touch pipeline; touchend blur fuerza la deseleccion del
+ * :active stuck en los items clickeables custom del panel).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio (replican el color-state matrix del Angular) y el panel flotante
+ * se monta dentro del subtree del host sin pelear con shadow DOM. Misma estrategia
+ * que sui-compact-select / sui-tooltip / sui-popover.
+ *
+ * Eventos:
+ *  - `clicked`: Event — siempre emite cuando el host se clickea (modo 1 + 2).
+ *  - `selectedChange`: SuiInlineSelectItem — solo en modo items, cuando el user
+ *    selecciona un item.
+ */
+export class SuiInlineSelect {
+    constructor() {
+        /* ── Variantes ── */
+        /** Tipo del trigger: icon (RemixIcon leading) / country (sui-flag leading). Default `icon`. */
+        this.type = 'icon';
+        /* ── Contenido / valor ── */
+        /**
+         * Valor seleccionado (matchea `item.value`). En modo items, resuelve el item con
+         * `value === value` para pintar el display. En modo trigger-only es el texto que
+         * se muestra directamente. Default `''`.
+         */
+        this.value = '';
+        /** RemixIcon name del leading estatico (type='icon', modo trigger-only). `''`/null = sin icono. */
+        this.icon = null;
+        /** Slug de bandera del leading estatico (type='country', modo trigger-only). `''`/null = sin bandera. */
+        this.flag = null;
+        /* ── Modo items (self-managed overlay) ── */
+        /** Items del menu. Si tiene length > 0, el componente gestiona su propio panel. Default `[]`. */
+        this.items = [];
+        /* ── Estados ── */
+        /** Deshabilitado (no abre, no emite, no clickeable). Default `false`. */
+        this.disabled = false;
+        /* ── Estado interno ── */
+        /** Panel abierto. Refleja a `data-sui-open` para el visual state del host. */
+        this.open = false;
+        /** Item resuelto desde `value` (o null). Se deriva en updateSelected(). */
+        this.selected = null;
+        /** Indice keyboard-highlighted dentro del panel (-1 = ninguno). */
+        this.highlightedIndex = -1;
+        /** Auto-flip arriba cuando no cabe abajo (replica fallback positions del CDK). */
+        this.flipUp = false;
+        /* ── Host interaction (el host ES el trigger inline) ── */
+        this.onHostClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            // Ignorar clicks que se originan DENTRO del panel (los maneja onOptionClick).
+            const target = event.target;
+            if (target === null || target === void 0 ? void 0 : target.closest('.sui-inline-select__menu'))
+                return;
+            this.clicked.emit(event);
+            if (this.hasItems)
+                this.toggleMenu();
+        };
+        this.onHostKeydown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                // Si el panel esta abierto y hay un item highlighted, seleccionarlo.
+                if (this.open && this.highlightedIndex >= 0) {
+                    event.preventDefault();
+                    const item = this.items[this.highlightedIndex];
+                    if (item)
+                        this.selectItem(item);
+                    return;
+                }
+                event.preventDefault();
+                this.clicked.emit(event);
+                if (this.hasItems)
+                    this.toggleMenu();
+                return;
+            }
+            if (!this.hasItems)
+                return;
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                if (!this.open)
+                    this.openMenu();
+                this.moveHighlight(1);
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                if (!this.open)
+                    this.openMenu();
+                this.moveHighlight(-1);
+            }
+            else if (event.key === 'Escape') {
+                if (this.open) {
+                    event.preventDefault();
+                    this.closeMenu();
+                }
+            }
+            else if (event.key === 'Home' && this.open) {
+                event.preventDefault();
+                this.highlightedIndex = this.firstEnabledIndex();
+            }
+            else if (event.key === 'End' && this.open) {
+                event.preventDefault();
+                this.highlightedIndex = this.lastEnabledIndex();
+            }
+        };
+        this.onOptionClick = (event, item) => {
+            event.stopPropagation();
+            this.selectItem(item);
+        };
+    }
+    componentWillLoad() {
+        /* Sin title nativo en el host (tooltip gris del navegador). */
+        this.el.removeAttribute('title');
+        this.updateSelected();
+    }
+    onValueChange() {
+        this.updateSelected();
+    }
+    onItemsChange() {
+        this.updateSelected();
+    }
+    onDisabledChange(value) {
+        if (value && this.open)
+            this.closeMenu();
+    }
+    /**
+     * Resuelve `selected` desde `value`. Si el value no matchea ningun item (items
+     * aun no llegaron), cuando items cambie el Watch (`onItemsChange`) reintenta.
+     * Replica el `writeValue` + effect del Angular.
+     */
+    updateSelected() {
+        const value = this.value;
+        if (value === '' || value === null || value === undefined) {
+            this.selected = null;
+            return;
+        }
+        const match = this.items.find((i) => i.value === value);
+        if (match) {
+            this.selected = match;
+        }
+        else {
+            this.selected = null;
+        }
+    }
+    /* ── Derived (getters) ── */
+    get hasItems() {
+        return this.items.length > 0;
+    }
+    /** Icon del arrow trailing: down (closed) / up (open). Replica `arrowIcon` del Angular. */
+    get arrowIcon() {
+        return this.open ? 'arrow-up-s-line' : 'arrow-down-s-line';
+    }
+    /** Texto mostrado: label del item seleccionado, sino el value crudo. */
+    get displayValue() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '';
+    }
+    /** Icon mostrado (type='icon'): del item seleccionado, sino el input estatico. */
+    get displayIcon() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : this.icon) !== null && _c !== void 0 ? _c : null;
+    }
+    /** Flag mostrado (type='country'): del item seleccionado, sino el input estatico. */
+    get displayFlag() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.flag) !== null && _b !== void 0 ? _b : this.flag) !== null && _c !== void 0 ? _c : null;
+    }
+    /* ── iOS :active fix (presencia del binding engage el touch pipeline) ── */
+    onTouchStart() {
+        /* no-op a proposito; la presencia del listener engage el touch pipeline iOS. */
+    }
+    onTouchEnd(event) {
+        const t = event.target;
+        const opt = t === null || t === void 0 ? void 0 : t.closest('.sui-inline-select__option');
+        if (opt)
+            opt.blur();
+        else
+            this.el.blur();
+    }
+    /** Avanza el highlight saltando items disabled. dir = +1 (down) / -1 (up). */
+    moveHighlight(dir) {
+        var _a;
+        const n = this.items.length;
+        if (n === 0)
+            return;
+        let i = this.highlightedIndex;
+        for (let step = 0; step < n; step++) {
+            i = (i + dir + n) % n;
+            if (i < 0)
+                i = n - 1;
+            if (!((_a = this.items[i]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                this.highlightedIndex = i;
+                return;
+            }
+        }
+    }
+    firstEnabledIndex() {
+        return this.items.findIndex((it) => !it.disabled);
+    }
+    lastEnabledIndex() {
+        var _a;
+        for (let i = this.items.length - 1; i >= 0; i--) {
+            if (!((_a = this.items[i]) === null || _a === void 0 ? void 0 : _a.disabled))
+                return i;
+        }
+        return -1;
+    }
+    /* ── Outside / scroll / escape close (replica scrollStrategy + backdrop CDK) ── */
+    onDocumentClick(event) {
+        if (!this.open)
+            return;
+        const target = event.target;
+        if (target && !this.el.contains(target))
+            this.closeMenu();
+    }
+    onDocumentKeydown(event) {
+        if (this.open && event.key === 'Escape')
+            this.closeMenu();
+    }
+    onWindowScroll() {
+        if (this.open)
+            requestAnimationFrame(() => this.flipIfClipped());
+    }
+    onWindowResize() {
+        if (this.open)
+            requestAnimationFrame(() => this.flipIfClipped());
+    }
+    /* ── Open / close (API publica — espeja open()/close()/toggle() del Angular) ── */
+    /** Abre el panel imperativamente (no hace nada en modo trigger-only). */
+    async openMenu() {
+        if (this.disabled || !this.hasItems || this.open)
+            return;
+        this.open = true;
+        // Posicionar el highlight inicial en el selected (o el primero habilitado).
+        const selIdx = this.selected
+            ? this.items.findIndex((i) => i.value === this.selected.value)
+            : -1;
+        this.highlightedIndex = selIdx >= 0 ? selIdx : this.firstEnabledIndex();
+        requestAnimationFrame(() => this.flipIfClipped());
+    }
+    /** Cierra el panel imperativamente. */
+    async closeMenu() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.highlightedIndex = -1;
+        this.flipUp = false;
+    }
+    /** Alterna el panel imperativamente. */
+    async toggleMenu() {
+        if (this.open)
+            await this.closeMenu();
+        else
+            await this.openMenu();
+    }
+    /** Estado actual del panel (read-only). Espeja `isOpen()` del Angular. */
+    async isOpen() {
+        return this.open;
+    }
+    /* ── Selection ── */
+    selectItem(item) {
+        if (item.disabled)
+            return;
+        this.value = item.value;
+        this.selected = item;
+        this.selectedChange.emit(item);
+        this.closeMenu();
+    }
+    /* ── Auto-flip si el panel se sale del viewport inferior ── */
+    flipIfClipped() {
+        const panel = this.el.querySelector('.sui-inline-select__menu');
+        if (!panel)
+            return;
+        const hostRect = this.el.getBoundingClientRect();
+        const panelHeight = panel.offsetHeight;
+        const spaceBelow = window.innerHeight - hostRect.bottom;
+        const spaceAbove = hostRect.top;
+        const flip = spaceBelow < panelHeight + 8 && spaceAbove > spaceBelow;
+        if (flip !== this.flipUp)
+            this.flipUp = flip;
+    }
+    /* ── Render helpers ── */
+    renderLeading() {
+        if (this.type === 'country') {
+            const name = this.displayFlag;
+            if (!name)
+                return null;
+            return h("sui-flag", { class: "sui-inline-select__flag", name: name, size: "xs" });
+        }
+        if (this.type === 'icon') {
+            const name = this.displayIcon;
+            if (!name)
+                return null;
+            return h("sui-icon", { class: "sui-inline-select__icon", name: name, size: 20 });
+        }
+        return null;
+    }
+    /** Option del panel — replica el visual de `sui-dropdown-item mode="option"`. */
+    renderOption(item, index) {
+        const isSelected = !!this.selected && item.value === this.selected.value;
+        const isHighlighted = index === this.highlightedIndex;
+        return (h("div", { class: {
+                'sui-inline-select__option': true,
+                'sui-inline-select__option--selected': isSelected,
+                'sui-inline-select__option--highlighted': isHighlighted && !isSelected,
+                'sui-inline-select__option--disabled': !!item.disabled,
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : undefined, "data-sui-selected": isSelected ? '' : undefined, tabindex: item.disabled ? -1 : 0, onClick: (e) => this.onOptionClick(e, item), onMouseEnter: () => {
+                if (!item.disabled)
+                    this.highlightedIndex = index;
+            } }, h("span", { class: "sui-inline-select__option-leading" }, item.flag ? (h("sui-flag", { name: item.flag, size: "sm" })) : item.icon ? (h("sui-icon", { name: item.icon, size: 20 })) : null), h("span", { class: "sui-inline-select__option-text" }, h("span", { class: "sui-inline-select__option-label" }, item.label), item.sublabel && (h("span", { class: "sui-inline-select__option-sublabel" }, item.sublabel))), isSelected && (h("sui-icon", { class: "sui-inline-select__option-check", name: "check-line", size: 20 }))));
+    }
+    render() {
+        return (h(Host, { key: 'deabbfd766f692f16bfced93c211c2d37a78f527', role: "button", tabindex: this.disabled ? -1 : 0, "data-sui-type": this.type, "data-sui-disabled": this.disabled ? '' : null, "data-sui-open": this.open ? '' : null, "data-sui-flip": this.flipUp ? '' : null, "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": this.hasItems ? 'listbox' : null, onClick: this.onHostClick, onKeyDown: this.onHostKeydown }, this.renderLeading(), h("span", { key: '46b815db2fc1f900c4e40604d46553dc27678625', class: "sui-inline-select__text" }, h("span", { key: 'abbb24225d4133fd5b7409d19c64394374c17a10', class: "sui-inline-select__value" }, this.displayValue), h("sui-icon", { key: '206df618c0a91d08e08af3ddd5d80cf1957e5dad', class: "sui-inline-select__arrow", name: this.arrowIcon, size: 20 })), this.open && this.hasItems && (h("div", { key: '58f7ab527cf3ca479045c2d5339e16f8dfe353b2', class: "sui-inline-select__menu", role: "listbox", onClick: (e) => e.stopPropagation() }, this.items.map((item, index) => this.renderOption(item, index))))));
+    }
+    static get is() { return "sui-inline-select"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-inline-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-inline-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiInlineSelectType",
+                    "resolved": "\"country\" | \"icon\"",
+                    "references": {
+                        "SuiInlineSelectType": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-inline-select/sui-inline-select.tsx",
+                            "id": "src/components/sui-inline-select/sui-inline-select.tsx::SuiInlineSelectType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo del trigger: icon (RemixIcon leading) / country (sui-flag leading). Default `icon`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'icon'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor seleccionado (matchea `item.value`). En modo items, resuelve el item con\n`value === value` para pintar el display. En modo trigger-only es el texto que\nse muestra directamente. Default `''`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RemixIcon name del leading estatico (type='icon', modo trigger-only). `''`/null = sin icono."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "null"
+            },
+            "flag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFlagName | null",
+                    "resolved": "\"abkhazia\" | \"afghanistan\" | \"aland-islands\" | \"albania\" | \"algeria\" | \"american-samoa\" | \"andorra\" | \"angola\" | \"anguilla\" | \"antigua-and-barbuda\" | \"argentina\" | \"armenia\" | \"aruba\" | \"australia\" | \"austria\" | \"azerbaijan\" | \"azores-islands\" | \"bahamas\" | \"bahrain\" | \"balearic-islands\" | \"bangladesh\" | \"barbados\" | \"basque-country\" | \"belarus\" | \"belgium\" | \"belize\" | \"benin\" | \"bermuda\" | \"bhutan\" | \"bolivia\" | \"bonaire\" | \"bosnia-and-herzegovina\" | \"botswana\" | \"brazil\" | \"british-columbia\" | \"british-indian-ocean-territory\" | \"british-virgin-islands\" | \"brunei\" | \"bulgaria\" | \"burkina-faso\" | \"burundi\" | \"cambodia\" | \"cameroon\" | \"canada\" | \"canary-islands\" | \"cape-verde\" | \"cayman-islands\" | \"central-african-republic\" | \"ceuta\" | \"chad\" | \"chile\" | \"china\" | \"christmas-island\" | \"cocos-island\" | \"colombia\" | \"comoros\" | \"cook-islands\" | \"corsica\" | \"costa-rica\" | \"croatia\" | \"cuba\" | \"curacao\" | \"cyprus\" | \"czech-republic\" | \"democratic-republic-of-congo\" | \"denmark\" | \"djibouti\" | \"dominica\" | \"dominican-republic\" | \"east-timor\" | \"ecuador\" | \"egypt\" | \"el-salvador\" | \"england\" | \"equatorial-guinea\" | \"eritrea\" | \"estonia\" | \"ethiopia\" | \"european-union\" | \"falkland-islands\" | \"faroe-islands\" | \"fiji\" | \"finland\" | \"france\" | \"french-polynesia\" | \"gabon\" | \"galapagos-islands\" | \"gambia\" | \"georgia\" | \"germany\" | \"ghana\" | \"gibraltar\" | \"greece\" | \"greenland\" | \"grenada\" | \"guam\" | \"guatemala\" | \"guernsey\" | \"guinea\" | \"guinea-bissau\" | \"guyana\" | \"haiti\" | \"hawaii\" | \"honduras\" | \"hong-kong\" | \"hungary\" | \"iceland\" | \"india\" | \"indonesia\" | \"iran\" | \"iraq\" | \"ireland\" | \"isle-of-man\" | \"israel\" | \"italy\" | \"ivory-coast\" | \"jamaica\" | \"japan\" | \"jersey\" | \"jordan\" | \"kazakhstan\" | \"kenya\" | \"kiribati\" | \"kosovo\" | \"kuwait\" | \"kyrgyzstan\" | \"laos\" | \"latvia\" | \"lebanon\" | \"lesotho\" | \"liberia\" | \"libya\" | \"liechtenstein\" | \"lithuania\" | \"luxembourg\" | \"macao\" | \"madagascar\" | \"madeira\" | \"malawi\" | \"malaysia\" | \"maldives\" | \"mali\" | \"malta\" | \"marshall-island\" | \"martinique\" | \"mauritania\" | \"mauritus\" | \"melilla\" | \"mexico\" | \"micronesia\" | \"moldova\" | \"monaco\" | \"mongolia\" | \"montenegro\" | \"montserrat\" | \"morocco\" | \"mozambique\" | \"myanmar\" | \"namibia\" | \"nato\" | \"nauru\" | \"nepal\" | \"netherlands\" | \"new-zealand\" | \"nicaragua\" | \"niger\" | \"nigeria\" | \"niue\" | \"norfolk-island\" | \"north-korea\" | \"northern-cyprus\" | \"northern-marianas-islands\" | \"norway\" | \"oman\" | \"orkney-islands\" | \"ossetia\" | \"pakistan\" | \"palau\" | \"palestine\" | \"panama\" | \"papua-new-guinea\" | \"paraguay\" | \"peru\" | \"philippines\" | \"pitcairn-islands\" | \"poland\" | \"portugal\" | \"puerto-rico\" | \"qatar\" | \"rapa-nui\" | \"republic-of-macedonia\" | \"republic-of-the-congo\" | \"romania\" | \"russia\" | \"rwanda\" | \"saba-island\" | \"sahrawi-arab-democratic-republic\" | \"saint-kitts-and-nevis\" | \"samoa\" | \"san-marino\" | \"sao-tome-and-prince\" | \"sardinia\" | \"saudi-arabia\" | \"scotland\" | \"senegal\" | \"serbia\" | \"seychelles\" | \"sierra-leone\" | \"singapore\" | \"sint-eustatius\" | \"sint-maarten\" | \"slovakia\" | \"slovania\" | \"solomon-islands\" | \"somalia\" | \"somaliland\" | \"south-africa\" | \"south-korea\" | \"south-sudan\" | \"spain\" | \"sri-lanka\" | \"st-barts\" | \"st-lucia\" | \"st-vincent-and-the-grenadines\" | \"sudan\" | \"suriname\" | \"swaziland\" | \"sweden\" | \"switzerland\" | \"syria\" | \"taijikistan\" | \"taiwan\" | \"tanzania\" | \"thailand\" | \"tibet\" | \"togo\" | \"tokelau\" | \"tonga\" | \"transnistria\" | \"trinidad-and-tobago\" | \"tunisia\" | \"turkey\" | \"turkmenistan\" | \"turks-and-caicos\" | \"tuvalu\" | \"uganda\" | \"ukraine\" | \"united-arab-emirates\" | \"united-kingdom\" | \"united-nations\" | \"united-states\" | \"uruguay\" | \"uzbekistan\" | \"vanuatu\" | \"vatican-city\" | \"venezuela\" | \"vietnam\" | \"virgin-islands\" | \"wales\" | \"yemen\" | \"zambia\" | \"zimbabwe\" | null",
+                    "references": {
+                        "SuiFlagName": {
+                            "location": "import",
+                            "path": "../sui-flag/sui-flag",
+                            "id": "src/components/sui-flag/sui-flag.tsx::SuiFlagName",
+                            "referenceLocation": "SuiFlagName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slug de bandera del leading estatico (type='country', modo trigger-only). `''`/null = sin bandera."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flag",
+                "defaultValue": "null"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiInlineSelectItem[]",
+                    "resolved": "SuiInlineSelectItem[]",
+                    "references": {
+                        "SuiInlineSelectItem": {
+                            "location": "import",
+                            "path": "./sui-inline-select.data",
+                            "id": "src/components/sui-inline-select/sui-inline-select.data.ts::SuiInlineSelectItem",
+                            "referenceLocation": "SuiInlineSelectItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items del menu. Si tiene length > 0, el componente gestiona su propio panel. Default `[]`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilitado (no abre, no emite, no clickeable). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "selected": {},
+            "highlightedIndex": {},
+            "flipUp": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clicked",
+                "name": "clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en el host (siempre emite, modo 1 + 2). Espeja el output `clicked` del Angular."
+                },
+                "complexType": {
+                    "original": "globalThis.Event",
+                    "resolved": "Event",
+                    "references": {
+                        "globalThis": {
+                            "location": "global",
+                            "id": "global::globalThis"
+                        }
+                    }
+                }
+            }, {
+                "method": "selectedChange",
+                "name": "selectedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Item seleccionado (solo modo items). Espeja `selectedChange` del Angular."
+                },
+                "complexType": {
+                    "original": "SuiInlineSelectItem",
+                    "resolved": "SuiInlineSelectItem",
+                    "references": {
+                        "SuiInlineSelectItem": {
+                            "location": "import",
+                            "path": "./sui-inline-select.data",
+                            "id": "src/components/sui-inline-select/sui-inline-select.data.ts::SuiInlineSelectItem",
+                            "referenceLocation": "SuiInlineSelectItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre el panel imperativamente (no hace nada en modo trigger-only).",
+                    "tags": []
+                }
+            },
+            "closeMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cierra el panel imperativamente.",
+                    "tags": []
+                }
+            },
+            "toggleMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Alterna el panel imperativamente.",
+                    "tags": []
+                }
+            },
+            "isOpen": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Estado actual del panel (read-only). Espeja `isOpen()` del Angular.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "click",
+                "method": "onDocumentClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onDocumentKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "scroll",
+                "method": "onWindowScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}