@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-radio-label/sui-radio-label.js

@@ -0,0 +1,514 @@
+import { Host, h } from "@stencil/core";
+let nextId = 0;
+/**
+ * `<sui-radio-label>` — SUI Design System 2.0.
+ *
+ * Portado desde el `SuiRadioLabel` Angular (sui-design-system).
+ * Figma: 8p1k72aKKvzJV4XcvPS4VO — set "Radio Label [1.1]" (515:4282), 8 variants
+ * Active × Description × Flip. Anatomía de la familia label (igual que
+ * sui-checkbox-label): radio + label/sublabel/badge, descripción y Link Button.
+ *
+ * Semántica de GRUPO (patrón sui-radio-card):
+ *  - Dentro de `<sui-radio-group>` el group manda: el label emite el evento
+ *    burbujeante `suiRadioSelect` con su `value` y el group lo marca vía
+ *    `setChecked()`. Un radio marcado no se desmarca al re-click.
+ *  - Teclado en grupo (roving): un solo tab stop —el marcado o el primero
+ *    habilitado— y las flechas mueven foco y selección (lo resuelve el group).
+ *  - Standalone: `checked` mutable + reflect, `suiChange` (boolean) y `selected`
+ *    (value) al seleccionar.
+ *  - El `<sui-radio>` interno es solo visual (`inert`, `aria-hidden`,
+ *    pointer-events none): una sola fuente de selección.
+ *
+ * A11y: el `role="radio"` vive en el contenedor interno
+ * `.sui-radio-label__control` (círculo + textos) y el Link Button va FUERA de
+ * él, como hermano, para no anidar un botón dentro de un radio (axe
+ * nested-interactive). El click de toda la fila sigue en el host.
+ *
+ * `badge` y `link` aceptan string (shorthand) u objeto; el objeto se pasa por
+ * propiedad JS. Con `link.href` el Link Button renderiza un `<a>` real y
+ * `target="_blank"` agrega `rel="noopener noreferrer"`.
+ */
+export class SuiRadioLabel {
+    constructor() {
+        this.labelId = `sui-radio-label-${++nextId}`;
+        this.descriptionId = `${this.labelId}-desc`;
+        /** Texto principal del label. */
+        this.label = '';
+        /** Sublabel opcional (12/16 sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción opcional debajo del title (variant «with description»). */
+        this.description = null;
+        /** Badge junto al label — string ('NEW') u objeto `{ label, color?, variant?, size? }`. */
+        this.badge = null;
+        /**
+         * Link Button bajo la descripción (solo con `description`) — string (solo
+         * label, emite `linkClick`) u objeto `{ label, href?, target?, rel? }`.
+         */
+        this.link = null;
+        /**
+         * Tamaño. `medium` (Figma): control 20, label 14/20. `large`: control 24,
+         * label 16/24, badge medium. `xlarge`: control 28. `2xlarge`: fila de 44 como
+         * mínimo (piso táctil), control 28. Sublabel y descripción quedan en 12/16.
+         */
+        this.size = 'medium';
+        /** Si true, invierte el orden: [contenido] [radio]. */
+        this.flip = false;
+        /** Deshabilita el radio y la fila. */
+        this.disabled = false;
+        /** Estado marcado. Standalone: lo fija el click; en grupo lo gobierna el group. */
+        this.checked = false;
+        /** True cuando vive dentro de un `<sui-radio-group>`. Autodetectado. */
+        this.inGroup = false;
+        /**
+         * Roving del grupo: `true` = este es el único tab stop, `false` = fuera del
+         * Tab (se llega con flechas). `null` = el group no lo fijó: queda enfocable.
+         */
+        this.tabStop = null;
+        this.onKeydown = (event) => {
+            if (event.key !== ' ' && event.key !== 'Enter')
+                return;
+            event.preventDefault();
+            this.select();
+        };
+        this.onLinkClick = (event) => {
+            var _a, _b;
+            event.stopPropagation();
+            const mouse = event.detail;
+            (_a = mouse === null || mouse === void 0 ? void 0 : mouse.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(mouse);
+            if (this.disabled) {
+                (_b = mouse === null || mouse === void 0 ? void 0 : mouse.preventDefault) === null || _b === void 0 ? void 0 : _b.call(mouse);
+                return;
+            }
+            this.linkClick.emit(mouse);
+        };
+    }
+    componentWillLoad() {
+        this.inGroup = !!this.el.closest('sui-radio-group');
+    }
+    /**
+     * API interna del DS: el `<sui-radio-group>` fija el checked exclusivo y,
+     * si lo pasa, si esta opción es el tab stop del grupo. No emite eventos.
+     */
+    async setChecked(checked, tabStop) {
+        this.checked = checked;
+        if (tabStop !== undefined)
+            this.tabStop = tabStop;
+    }
+    /** iOS WKWebView: la presencia del touchstart (pasivo) engancha el `:active`. */
+    onTouchStart() {
+        /* no-op a propósito */
+    }
+    /** touchend.blur() suelta el foco del control al instante en iOS. */
+    onTouchEnd() {
+        var _a;
+        (_a = this.el.querySelector('.sui-radio-label__control')) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    onLabelClick(event) {
+        if (event.target.closest('sui-link-button'))
+            return;
+        this.select();
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        if (this.inGroup) {
+            this.suiRadioSelect.emit(this.value);
+        }
+        else {
+            this.checked = true;
+            this.suiChange.emit(true);
+        }
+        this.selected.emit(this.value);
+    }
+    /** Size del sui-radio interno: `2xlarge` es un alto de fila, el control queda en 28. */
+    get controlSize() {
+        return this.size === '2xlarge' ? 'xlarge' : this.size;
+    }
+    /** Badge default por tamaño: medium → small · large → medium · xlarge/2xlarge → large. */
+    get badgeSize() {
+        if (this.size === 'medium')
+            return 'small';
+        return this.size === 'large' ? 'medium' : 'large';
+    }
+    get badgeCfg() {
+        const b = this.badge;
+        return b ? (typeof b === 'string' ? { label: b } : b) : null;
+    }
+    get linkCfg() {
+        var _a;
+        const l = this.link;
+        if (!l)
+            return null;
+        const cfg = typeof l === 'string' ? { label: l } : l;
+        if (!cfg.label)
+            return null;
+        return Object.assign(Object.assign({}, cfg), { rel: (_a = cfg.rel) !== null && _a !== void 0 ? _a : (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) });
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const hasDesc = !!this.description;
+        const badge = this.badgeCfg;
+        const link = hasDesc ? this.linkCfg : null;
+        return (h(Host, { key: '763e3736e58f060e1ba96f841c7aaeca65ca9c87', "data-sui-checked": this.checked ? '' : null, "data-sui-size": this.size, "data-sui-flip": this.flip ? '' : null, "data-sui-with-description": hasDesc ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, h("div", { key: '232ea994b88aa83701838324e8e9616ff336534c', class: "sui-radio-label__control", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": this.labelId, "aria-describedby": hasDesc ? this.descriptionId : null, tabindex: this.disabled || (this.inGroup && this.tabStop === false) ? '-1' : '0', onKeyDown: this.onKeydown }, h("sui-radio", { key: '93a7ba36d4437f9a67f37a31f43ef20a804b3ff3', class: "sui-radio-label__radio", size: this.controlSize, checked: this.checked, disabled: this.disabled, focusable: false, "aria-hidden": "true", inert: true }), h("div", { key: 'fc778e806053370d4a4c3d559575a35d7d7ddaa2', class: "sui-radio-label__content" }, h("div", { key: '59451d3f56cd58d66fecf4e29d42b4c6f86acb5a', class: "sui-radio-label__text" }, h("div", { key: '0d8b8d885905961f68682b1bb599919e31aeea9a', class: "sui-radio-label__title" }, h("span", { key: '0b7490a53dac3b1976137ddaebe77be3b203921a', class: "sui-radio-label__label", id: this.labelId }, this.label), this.sublabel && h("span", { key: 'b86dd8cf019b8a48c4598d1bd9aa68f081027e6e', class: "sui-radio-label__sublabel" }, this.sublabel), badge && (h("sui-badge", { key: 'bdc8c68bc0fb76e8ea242d289c57a2b21d9470a9', class: "sui-radio-label__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'orange', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'light', size: (_c = badge.size) !== null && _c !== void 0 ? _c : this.badgeSize }, badge.label))), hasDesc && (h("p", { key: '641984cb98c5ae633f2287f712b4973f7e3a2fc1', class: "sui-radio-label__description", id: this.descriptionId }, this.description))))), link && (h("sui-link-button", { key: 'dd1287a7f10e094809c7dc59e3c84c0209ffca7b', class: "sui-radio-label__link", variant: "primary", size: this.size === 'medium' ? 'small' : 'medium', disabled: this.disabled, href: (_d = link.href) !== null && _d !== void 0 ? _d : null, target: (_e = link.target) !== null && _e !== void 0 ? _e : null, rel: (_f = link.rel) !== null && _f !== void 0 ? _f : null, onClicked: this.onLinkClick }, link.label))));
+    }
+    static get is() { return "sui-radio-label"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-radio-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-radio-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor que representa esta opci\u00F3n dentro del grupo. Requerido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto principal del label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sublabel opcional (12/16 sub-600 al lado del label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sublabel",
+                "defaultValue": "null"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Descripci\u00F3n opcional debajo del title (variant \u00ABwith description\u00BB)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "null"
+            },
+            "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 junto al label \u2014 string ('NEW') u objeto `{ label, color?, variant?, size? }`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "null"
+            },
+            "link": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiLinkConfig | string | null",
+                    "resolved": "SuiLinkConfig | null | string",
+                    "references": {
+                        "SuiLinkConfig": {
+                            "location": "import",
+                            "path": "../sui-link-button/sui-link-button",
+                            "id": "src/components/sui-link-button/sui-link-button.tsx::SuiLinkConfig",
+                            "referenceLocation": "SuiLinkConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link Button bajo la descripci\u00F3n (solo con `description`) \u2014 string (solo\nlabel, emite `linkClick`) u objeto `{ label, href?, target?, rel? }`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link",
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiRadioLabelSize",
+                    "resolved": "\"2xlarge\" | \"large\" | \"medium\" | \"xlarge\"",
+                    "references": {
+                        "SuiRadioLabelSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-radio-label/sui-radio-label.tsx",
+                            "id": "src/components/sui-radio-label/sui-radio-label.tsx::SuiRadioLabelSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o. `medium` (Figma): control 20, label 14/20. `large`: control 24,\nlabel 16/24, badge medium. `xlarge`: control 28. `2xlarge`: fila de 44 como\nm\u00EDnimo (piso t\u00E1ctil), control 28. Sublabel y descripci\u00F3n quedan en 12/16."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "flip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si true, invierte el orden: [contenido] [radio]."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "flip",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el radio y la fila."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado marcado. Standalone: lo fija el click; en grupo lo gobierna el group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inGroup": {},
+            "tabStop": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "suiChange",
+                "name": "suiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Standalone: emite `true` al seleccionarse (\u2248 `checkedChange` del model Angular)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "selected",
+                "name": "selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite el `value` cuando se selecciona (\u2248 output `selected` del Angular)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "linkClick",
+                "name": "linkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en el Link Button (no selecciona)."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "suiRadioSelect",
+                "name": "suiRadioSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento burbujeante que captura el `<sui-radio-group>` padre. `detail` = `value`."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setChecked": {
+                "complexType": {
+                    "signature": "(checked: boolean, tabStop?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "checked",
+                            "type": "boolean",
+                            "docs": ""
+                        }, {
+                            "name": "tabStop",
+                            "type": "boolean | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "API interna del DS: el `<sui-radio-group>` fija el checked exclusivo y,\nsi lo pasa, si esta opci\u00F3n es el tab stop del grupo. No emite eventos.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    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": "onLabelClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}