@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-store-card/sui-store-card.js

@@ -0,0 +1,432 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-store-card>` — SUI Design System (SUI Design System 2.0).
+ *
+ * COMPUESTO homologado con el SUI Angular (sui-design-system,
+ * lib/sui-store-card). Misma API (`store` + `isFavorite` + `disableLink` +
+ * `linkBase` + `size` + `deliveryText` / `distanceText`), TODOS los estados
+ * (cliente abierto/cerrado/suspendido + owner-preview draft/pending/rejected),
+ * mismo comportamiento (link gateado, fav toggle, nota que NO navega) y mismos
+ * tokens. El accent del DS es NARANJA brand (--sui-primary-base).
+ *
+ * Mapeo Angular → web component:
+ *  - `store` (input.required)   → `@Prop() store` (objeto, por property; o el
+ *    atributo `store-json` para HTML plano / Storybook).
+ *  - `toggleFavorite` / `ratingClicked` → eventos con el mismo nombre.
+ *  - `routerLink` → `<a href>` (`linkBase/:id`). El consumer con router propio
+ *    intercepta el click; `null` → no navega (suspendido / disableLink).
+ *  - `suiImgRetry` (reintentos de carga) no existe en Stencil: el `<img>` del
+ *    cover hace fade-in al cargar y, si falla, se oculta y queda el placeholder.
+ *
+ * La tarjeta DIBUJA, no decide: el costo de envío y la distancia los escribe
+ * quien la usa (`deliveryText` / `distanceText`); deducirlos acá fue un bug
+ * real (la tarjeta decía un precio y el checkout cobraba otro).
+ *
+ * Estados:
+ *  - suspendido: opacity .6, cursor not-allowed, link bloqueado, pill roja
+ *    "No disponible", click preventDefault.
+ *  - cerrado (no abierto, no suspendido, no preview): cover en grayscale.
+ *  - owner-preview: SIN grayscale, SIN fav, cursor default, pill custom
+ *    (Borrador / En revisión con dot pulse / Rechazado), meta reducida a
+ *    Ubicación + Envío.
+ *
+ * `scoped: true` (light DOM, NO shadow), como el resto del DS.
+ */
+export class SuiStoreCard {
+    constructor() {
+        /** Marca el local como favorito (corazón relleno). Default `false`. */
+        this.isFavorite = false;
+        /** Si true, NO se navega al detalle (el padre puede sobreescribir). Default `false`. */
+        this.disableLink = false;
+        /**
+         * Ruta base del detalle: la tarjeta enlaza a `linkBase/:id`. El default es la
+         * ruta del cliente de Master Pedidos; otra app pasa la suya.
+         */
+        this.linkBase = '/cliente/restaurante';
+        /**
+         * Corazón de favorito: `small` 36 (default) · `medium` 40 · `large` 44 para
+         * el teléfono (además la nota se toca en 44 de alto).
+         */
+        this.size = 'small';
+        /** Tap del corazón: no navega, emite al padre. */
+        this.onFavClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.toggleFavorite.emit(event);
+        };
+        /** Click de la card: bloquea navegación si está suspendido. */
+        this.onCardClick = (event) => {
+            if (this.data.isSuspended)
+                event.preventDefault();
+        };
+        /** Tap de la calificación: no navega ni dispara el link de la card, emite al padre. */
+        this.onRatingClick = (event) => {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            const s = this.data;
+            const detail = { id: s.id, name: s.name, logoUrl: (_a = s.logoUrl) !== null && _a !== void 0 ? _a : null };
+            this.ratingClicked.emit(detail);
+        };
+        /** iOS WKWebView fix del stat clickeable (Calificación): blur al touchend. */
+        this.onRatingTouchEnd = (event) => {
+            const t = event.currentTarget;
+            t === null || t === void 0 ? void 0 : t.blur();
+        };
+        /** Imagen rota (cover o logo): se oculta por CSS y queda el placeholder / el fondo. */
+        this.onImgError = (event) => {
+            var _a;
+            (_a = event.target) === null || _a === void 0 ? void 0 : _a.setAttribute('data-sui-img-dead', '');
+        };
+        /** Fade-in del cover al cargar. */
+        this.onCoverLoad = (event) => {
+            var _a;
+            (_a = event.target) === null || _a === void 0 ? void 0 : _a.classList.add('sui-img-loaded');
+        };
+    }
+    /** Resuelve `store` priorizando el objeto; cae al parse de `store-json`. */
+    get data() {
+        if (this.store)
+            return this.store;
+        if (this.storeJson) {
+            try {
+                return JSON.parse(this.storeJson);
+            }
+            catch (_a) {
+                /* JSON inválido → cae al objeto vacío de abajo. */
+            }
+        }
+        // Defensa: nunca romper el render si no llegó data. Espeja un local mínimo.
+        return { id: '', name: '' };
+    }
+    /** Path del detalle, o null cuando el link está bloqueado (suspendido / disableLink). */
+    get link() {
+        const s = this.data;
+        if (this.disableLink || s.isSuspended)
+            return null;
+        return `${this.linkBase}/${s.id}`;
+    }
+    /** Inicial del nombre, fallback del logo. */
+    get initial() {
+        var _a, _b;
+        return (_b = (_a = this.data.name) === null || _a === void 0 ? void 0 : _a.charAt(0)) !== null && _b !== void 0 ? _b : '';
+    }
+    /**
+     * El puntaje con cuántas opiniones lo sostienen: «4.67 (12)». Hasta DOS
+     * decimales y sin cero de relleno («4.6», «5.0»), con punto (Perú). Sin
+     * opiniones dice «5.0 (0)»: el cero se tiene que ver, para que un 5 sin
+     * reseñas no pase por reputación ganada.
+     */
+    get ratingLabel() {
+        var _a;
+        const s = this.data;
+        const nota = (s.rating != null && s.rating > 0 ? s.rating : 5).toFixed(2).replace(/0$/, '');
+        return `${nota} (${(_a = s.reviewCount) !== null && _a !== void 0 ? _a : 0})`;
+    }
+    /** Distancia: la que pasaron, o la deducida de `distanceKm`. `null` = sin columna. */
+    get distanceLabel() {
+        if (this.distanceText !== undefined)
+            return this.distanceText;
+        const km = this.data.distanceKm;
+        if (km == null)
+            return '—';
+        return km < 1 ? `${Math.round(km * 1000)} m` : `${km.toFixed(1)} km`;
+    }
+    /**
+     * Badge custom de owner-preview (Borrador/En revisión/Rechazado). Null en
+     * modo cliente normal.
+     */
+    get previewBadge() {
+        const s = this.data;
+        if (!s.isOwnerPreview)
+            return null;
+        switch (s.ownerPreviewStatus) {
+            case 'draft':
+                return { label: 'Borrador', variant: 'draft' };
+            case 'pending_approval':
+                return { label: 'En revisión', variant: 'pending' };
+            case 'rejected':
+                return { label: 'Rechazado', variant: 'rejected' };
+            default:
+                return { label: 'En revisión', variant: 'pending' };
+        }
+    }
+    /** Envío: el que pasaron, o la etiqueta corta deducida (Gratis/Recojo/Courier/S/X). `null` = sin columna. */
+    get deliveryLabel() {
+        if (this.deliveryText !== undefined)
+            return this.deliveryText;
+        const s = this.data;
+        switch (s.deliveryType) {
+            case 'free':
+                return 'Gratis';
+            case 'pickup':
+                return 'Recojo';
+            case 'courier':
+                return 'Courier';
+            default:
+                return s.deliveryFee != null ? `S/ ${s.deliveryFee}` : '—';
+        }
+    }
+    /** Stat de Ubicación: el distrito es el único dato de largo variable, por eso es el que cede. */
+    renderUbicacion(district) {
+        return (h("div", { class: "store__stat store__stat--elastico" }, h("span", { class: "store__stat-label" }, "Ubicaci\u00F3n"), h("span", { class: "store__stat-value" }, h("sui-icon", { name: "map-pin-line", size: 13, color: "var(--sui-primary-base, #fa7319)" }), h("span", { class: "store__stat-texto" }, district || '—'))));
+    }
+    render() {
+        const s = this.data;
+        const pb = this.previewBadge;
+        const href = this.link;
+        const isClosed = !s.isOpen && !s.isSuspended && !s.isOwnerPreview;
+        const delivery = this.deliveryLabel;
+        const distance = this.distanceLabel;
+        /* `null` = la columna no existe (ni guion ni hueco). */
+        const envio = delivery !== null && (h("div", { key: 'f7a285533d5e632a663bfb52bc6ccb5cf294b287', class: "store__stat" }, h("span", { key: 'c1fc144330610747ce7ccde5c8bf3c0a2b2083e6', class: "store__stat-label" }, "Env\u00EDo"), h("span", { key: '1d7f4299c47b5beb9afc7c0cb2482155dd8837a0', class: "store__stat-value" }, delivery)));
+        return (h(Host, { key: 'e1f8cc81ab7f9d842453bd13bea9a4e933b62572', "data-sui-size": this.size }, h("a", { key: '901b14745149947fdf53c7922a6b18815cb55e53', class: {
+                store: true,
+                'store--suspended': !!s.isSuspended,
+                'store--closed': isClosed,
+                'store--preview': !!s.isOwnerPreview,
+            }, href: href !== null && href !== void 0 ? href : undefined, onClick: this.onCardClick }, h("div", { key: '56ab9b3ca8125716c99d929181a09d0f7331b144', class: { store__cover: true, 'store__cover--fallback': !s.coverUrl } }, s.coverUrl && (h("img", { key: s.coverUrl, class: "store__cover-img", src: s.coverUrl, alt: "", loading: "lazy", decoding: "async", onLoad: this.onCoverLoad, onError: this.onImgError })), h("div", { key: '135af01061b3b88cec303e00c5fd0c8d18a4d1f2', class: "store__cover-grad" }), !s.isOwnerPreview && (h("button", { key: '69d210af7dc432ff4f05c3305a4ea00ee7a390cf', type: "button", class: { store__fav: true, 'store__fav--active': this.isFavorite }, onClick: this.onFavClick, "aria-label": "Favorito", "aria-pressed": this.isFavorite ? 'true' : 'false' }, h("sui-icon", { key: '0ce744a468524f52a31e6ddcf3764a7f2504a915', name: this.isFavorite ? 'heart-fill' : 'heart-line', size: this.size === 'small' ? 18 : 20, color: "var(--sui-primary-base, #fa7319)" }))), s.isSuspended ? (h("span", { class: "store__status store__status--suspended" }, "No disponible")) : pb ? (h("span", { class: {
+                store__status: true,
+                'store__status--draft': pb.variant === 'draft',
+                'store__status--pending': pb.variant === 'pending',
+                'store__status--rejected': pb.variant === 'rejected',
+            } }, pb.label)) : (h("span", { class: {
+                store__status: true,
+                'store__status--open': !!s.isOpen,
+                'store__status--closed': !s.isOpen,
+            } }, s.isOpen ? 'Abierto' : 'Cerrado'))), h("div", { key: 'd9a2dd054806ea5be69b0d995d1ca6e6592c2881', class: "store__body" }, h("div", { key: '82e4b121118f8307d8dc9c5a6b71c081b483ac1f', class: "store__logo" }, s.logoUrl ? (h("img", { key: s.logoUrl, src: s.logoUrl, alt: s.name, onError: this.onImgError })) : (this.initial)), h("div", { key: '966f4ea37056c0d92ea831da1074574daf886737', class: "store__info" }, h("h3", { key: '17ba9e49efd4cf82c40555a0518640025384d69f', class: "store__name" }, s.name), h("p", { key: '21a2f0620ac1cd4c0a05034a8f127c5ea2545311', class: "store__type" }, s.businessType)), s.isOwnerPreview ? (
+        /* Modo preview: solo Ubicación + Envío. Nota y Distancia no
+           aplican antes de aprobar. */
+        h("div", { class: "store__meta store__meta--preview" }, this.renderUbicacion(s.district), envio)) : (h("div", { class: "store__meta" }, h("button", { type: "button", class: "store__stat store__stat--clickable", onClick: this.onRatingClick, onTouchStart: () => undefined, onTouchEnd: this.onRatingTouchEnd, "aria-label": "Ver las opiniones y la informaci\u00F3n del local" }, h("span", { class: "store__stat-label" }, "Calificaci\u00F3n"), h("span", { class: "store__stat-value" }, h("sui-icon", { name: "star-fill", size: 13, color: "var(--sui-primary-base, #fa7319)" }), this.ratingLabel, h("sui-icon", { class: "store__stat-chevron", name: "arrow-right-s-line", size: 14 }))), this.renderUbicacion(s.district), envio, distance !== null && (h("div", { class: "store__stat store__stat--distancia" }, h("span", { class: "store__stat-label" }, "Distancia"), h("span", { class: "store__stat-value" }, distance)))))))));
+    }
+    static get is() { return "sui-store-card"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-store-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-store-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "store": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiStoreCardData",
+                    "resolved": "SuiStoreCardData | undefined",
+                    "references": {
+                        "SuiStoreCardData": {
+                            "location": "import",
+                            "path": "./sui-store-card.data",
+                            "id": "src/components/sui-store-card/sui-store-card.data.ts::SuiStoreCardData",
+                            "referenceLocation": "SuiStoreCardData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Datos del local. Equivalente del `input.required<SuiStoreCardData>()` de\nAngular. Se setea por property binding (`el.store = {...}`). Para uso HTML\nplano / Storybook, usar el atributo `store-json` (string JSON) que este\ncomponente parsea como fallback."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "storeJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fallback string-JSON para setear `store` desde un atributo HTML."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "store-json"
+            },
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca el local como favorito (coraz\u00F3n relleno). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-favorite",
+                "defaultValue": "false"
+            },
+            "disableLink": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si true, NO se navega al detalle (el padre puede sobreescribir). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-link",
+                "defaultValue": "false"
+            },
+            "linkBase": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ruta base del detalle: la tarjeta enlaza a `linkBase/:id`. El default es la\nruta del cliente de Master Pedidos; otra app pasa la suya."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link-base",
+                "defaultValue": "'/cliente/restaurante'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiStoreCardSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "SuiStoreCardSize": {
+                            "location": "import",
+                            "path": "./sui-store-card.data",
+                            "id": "src/components/sui-store-card/sui-store-card.data.ts::SuiStoreCardSize",
+                            "referenceLocation": "SuiStoreCardSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Coraz\u00F3n de favorito: `small` 36 (default) \u00B7 `medium` 40 \u00B7 `large` 44 para\nel tel\u00E9fono (adem\u00E1s la nota se toca en 44 de alto)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'small'"
+            },
+            "deliveryText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de Env\u00EDo ya escrito por quien llama. Sin pasar (`undefined`) la\ntarjeta lo deduce de `deliveryType` / `deliveryFee`; un string se muestra\ntal cual; `null` (solo por property) quita la columna."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delivery-text"
+            },
+            "distanceText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de Distancia ya escrito por quien llama (\u00ABmenos de 500 m\u00BB). Mismos\ntres estados que `deliveryText`: sin pasar se deduce de `distanceKm`,\nstring tal cual, `null` quita la columna."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "distance-text"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleFavorite",
+                "name": "toggleFavorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite cuando el usuario toca el coraz\u00F3n (preventDefault + stopPropagation ya aplicados)."
+                },
+                "complexType": {
+                    "original": "globalThis.Event",
+                    "resolved": "Event",
+                    "references": {
+                        "globalThis": {
+                            "location": "global",
+                            "id": "global::globalThis"
+                        }
+                    }
+                }
+            }, {
+                "method": "ratingClicked",
+                "name": "ratingClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite cuando el usuario toca la nota. El padre abre el modal de opiniones\ncon `{ id, name, logoUrl }`."
+                },
+                "complexType": {
+                    "original": "SuiStoreRatingClickDetail",
+                    "resolved": "SuiStoreRatingClickDetail",
+                    "references": {
+                        "SuiStoreRatingClickDetail": {
+                            "location": "import",
+                            "path": "./sui-store-card.data",
+                            "id": "src/components/sui-store-card/sui-store-card.data.ts::SuiStoreRatingClickDetail",
+                            "referenceLocation": "SuiStoreRatingClickDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/sui-swatch/sui-swatch.css

@@ -0,0 +1,35 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 120px;
+  font-family: var(--sui-font-sans);
+}
+
+.swatch__chip {
+  display: block;
+  width: 100%;
+  height: 56px;
+  border-radius: var(--sui-radius-10);
+  box-shadow: inset 0 0 0 1px var(--sui-stroke-soft-200);
+}
+
+.swatch__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.swatch__label {
+  font-size: var(--sui-type-label-xs-size);
+  font-weight: var(--sui-font-weight-medium);
+  line-height: var(--sui-type-label-xs-line);
+  color: var(--sui-text-strong-950);
+}
+
+.swatch__value {
+  font-size: var(--sui-type-paragraph-xs-size);
+  line-height: var(--sui-type-paragraph-xs-line);
+  color: var(--sui-text-soft-400);
+  font-variant-numeric: tabular-nums;
+}

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

@@ -0,0 +1,88 @@
+import { h, Host } from "@stencil/core";
+/**
+ * `<sui-swatch>` — Celda de color para documentar la paleta de tokens del DS.
+ *
+ * Componente utilitario mínimo (foundations). Renderiza un bloque de color
+ * con su nombre de token y el valor resuelto. Pensado para la story
+ * "Foundations/Tokens", no para uso en producto.
+ */
+export class SuiSwatch {
+    render() {
+        var _a;
+        const swatchLabel = (_a = this.label) !== null && _a !== void 0 ? _a : this.token.replace(/^--sui-/, '');
+        return (h(Host, { key: '37e6c093e35104edf3dd6c52827d8274f8763893' }, h("span", { key: '7a947428e7041e9cd7b5cc3357067febbc02bccb', class: "swatch__chip", style: { background: `var(${this.token})` }, part: "chip" }), h("span", { key: '992e32a6d9f4f1b099d98647e8d26c9eb5edfd11', class: "swatch__meta", part: "meta" }, h("span", { key: 'f45ab5737fc903f4ce51a10e033b096851fbb649', class: "swatch__label" }, swatchLabel), this.value ? h("span", { class: "swatch__value" }, this.value) : null)));
+    }
+    static get is() { return "sui-swatch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-swatch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-swatch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "token": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre del token CSS, ej. `--sui-primary-base`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "token"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Etiqueta legible (default: el nombre del token sin el prefijo `--sui-`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor literal a mostrar debajo (ej. `#fa7319`). Opcional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+}