@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-dropdown-search/sui-dropdown-search.css

@@ -0,0 +1,101 @@
+@charset "UTF-8";
+/* === SUI Dropdown Search — SUI Design System 2.0 =====================================
+ * Port 1:1 del Angular homologado (master-pedidos). Specs pulled de
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — frame 414:8031 (Search input del top de un
+ * dropdown menu). Nodes 414:8030 (Default), 414:8048 (Active).
+ *
+ * Container: bg-white, padding 8, gap 8, width 100% box-sizing. Sin border, sin
+ *            radius (es parte del menu). Hover (no disabled): bg weak-50.
+ *
+ * `scoped: true`: el `<sui-icon>` interno vive en light DOM bajo el host, asi
+ * que `:host(...) .sui-dropdown-search__*` lo alcanza sin pelear con shadow DOM.
+ *
+ * El "Active" de Figma es el estado con valor escrito (data-sui-has-value), no
+ * un bg distinto: el valor escrito sale en strong-950 y aparece el clear button.
+ * El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ * ========================================================================== */
+:host {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  background: var(--sui-bg-white-0, #fff);
+  box-sizing: border-box;
+  overflow: clip;
+  transition: background 100ms ease-out;
+  /* Hover state — Figma Search/Hover usa bg weak-50 en el container. */
+}
+:host:hover:not([data-sui-disabled]) {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+
+:host([data-sui-disabled]) {
+  cursor: not-allowed;
+}
+
+.sui-dropdown-search__icon {
+  flex-shrink: 0;
+  color: var(--sui-icon-soft-400, #a3a3a3);
+}
+
+/* Hover/Active (con valor): la lupa oscurece a sub-600 — Figma 414:8031 usa
+   soft-400 solo en Default y sub-600 en Hover/Active/Active-Hover. */
+:host(:hover:not([data-sui-disabled])) .sui-dropdown-search__icon,
+:host([data-sui-has-value]) .sui-dropdown-search__icon {
+  color: var(--sui-icon-sub-600);
+}
+
+.sui-dropdown-search__input {
+  flex: 1 0 0;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  font-family: var(--sui-font-sans, sans-serif);
+  font-size: var(--sui-type-paragraph-sm-size, 14px);
+  line-height: var(--sui-type-paragraph-sm-line, 20px);
+  letter-spacing: var(--sui-type-paragraph-sm-spacing, -0.006em);
+  font-weight: var(--sui-type-paragraph-sm-weight, 400);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+  color: var(--sui-text-strong-950, #171717);
+  /* ≤767 px el texto sube a 16: con menos, iOS hace zoom al enfocar (mismo
+     criterio que sui-input). */
+}
+@media (max-width: 767px) {
+  .sui-dropdown-search__input {
+    font-size: 16px;
+  }
+}
+.sui-dropdown-search__input::placeholder {
+  color: var(--sui-text-soft-400, #a3a3a3);
+}
+.sui-dropdown-search__input:disabled {
+  cursor: not-allowed;
+  color: var(--sui-text-disabled-300, #d1d1d1);
+}
+
+.sui-dropdown-search__clear {
+  appearance: none;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--sui-icon-soft-400, #a3a3a3);
+  cursor: pointer;
+  border-radius: var(--sui-radius-4, 4px);
+  transition: color 100ms;
+}
+.sui-dropdown-search__clear:hover {
+  color: var(--sui-icon-strong-950, #171717);
+}
+.sui-dropdown-search__clear:focus-visible {
+  outline: 2px solid var(--sui-primary-base, #fa7319);
+  outline-offset: 2px;
+}

package/dist/collection/components/sui-dropdown-search/sui-dropdown-search.js

@@ -0,0 +1,235 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-dropdown-search>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-dropdown-search/). Misma
+ * API pública (value / placeholder / disabled + eventos valueChange y cleared),
+ * TODOS los estados visuales (Default / Hover / Active / disabled), mismo
+ * comportamiento (estado inferido del value, clear vacía el value + refocus) y
+ * mismos VALORES exactos (tokens del DS, no hex). Reusa el primitivo `<sui-icon>`
+ * ya portado (NO re-implementa iconos). El accent del DS es NARANJA brand
+ * (#fa7319), NO el azul de Figma.
+ *
+ * Search input minimal usado en el TOP de un dropdown menu para filtrar items
+ * (country picker, command palette, large select). NO es `<sui-input>` — tiene
+ * anatomy diferente: sin border, sin radius prominente, integrado al menu.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Frame: 414:8031 ("Dropdown Misc Items [1.1]") — variant Search × 4 states
+ *   Default / Hover / Active / Active Hover.
+ * Nodes pulled for verification: 414:8030 (Default), 414:8048 (Active).
+ *
+ * EXACT specs:
+ *   Container:
+ *     bg white-0, padding 8, gap 8, flex items-center, width 100%
+ *     (el Angular usaba w-320 de Figma; aca default 100% box-sizing como el
+ *     SCSS homologado — el consumer override con el width del menu),
+ *     overflow-clip, sin border, sin radius (es parte del menu).
+ *     Hover (no disabled): bg weak-50.
+ *   Default:
+ *     search icon 20x20 leading, color icon-soft-400.
+ *     placeholder «Buscar…» color text-soft-400 (16 px en ≤767 por el zoom de iOS).
+ *   Active (con valor escrito -> data-sui-has-value):
+ *     search icon: icon-sub-600 (oscurece vs el soft-400 de Default; también en hover).
+ *     text input: text-strong-950 (el valor escrito en negro).
+ *     close icon 20x20 trailing para clear (icon-soft-400 -> strong-950 hover).
+ *   disabled [extra feature, no en Figma]: input disabled, cursor not-allowed,
+ *     texto disabled-300, :hover bg weak-50 skipeado.
+ *   Typography: Inter Regular 14/20/-0.6% (Paragraph/Small).
+ *
+ * `scoped: true` (light DOM, NO shadow): asi los selectores `:host([data-sui-*])`
+ * y el `<sui-icon>` interno heredan los tokens del global sin pelear con shadow
+ * DOM. Misma estrategia que el Angular original (sin shadow).
+ *
+ * GOTCHA Stencil: el componente Angular usa `model()` (two-way binding nativo de
+ * Angular). Aca se replica el contrato controlado idiomatico de web components
+ * (igual que `<sui-command-menu-search>`): el consumer escucha `valueChange` y
+ * vuelve a setear el @Prop `value`. El input nativo refleja `value` siempre.
+ */
+export class SuiDropdownSearch {
+    constructor() {
+        /** Texto actual del input. Mutable como el `model()` del Angular: escribir o
+         *  limpiar lo actualiza solo, y además emite `valueChange`. Default ''. */
+        this.value = '';
+        /** Placeholder del input. Default `Buscar…`. */
+        this.placeholder = 'Buscar…';
+        /** Nombre accesible del campo. Sin pasarlo, el lector anuncia el placeholder. */
+        this.ariaLabel = null;
+        /** Deshabilita el input (extra feature, no en Figma). Default `false`. */
+        this.disabled = false;
+        this.onInput = (event) => {
+            this.value = event.target.value;
+            this.valueChange.emit(this.value);
+        };
+        this.onClear = (event) => {
+            var _a;
+            event.stopPropagation();
+            this.value = '';
+            this.valueChange.emit('');
+            this.cleared.emit();
+            // Refocus del input nativo (espeja el patron del cmd-search homologado).
+            (_a = this.el.querySelector('.sui-dropdown-search__input')) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    /** True cuando hay texto -> estado "Active" de Figma (muestra el clear button). */
+    get hasValue() {
+        return this.value.length > 0;
+    }
+    /** iOS :active del botón de limpiar (SuiToque del Angular): listeners pasivos. */
+    onTouchStart() { }
+    onTouchEnd(ev) {
+        var _a, _b;
+        (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.closest('.sui-dropdown-search__clear')) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+    render() {
+        return (h(Host, { key: 'f5d261267872f238f23f971a8633ade8a4f3c07b', "data-sui-has-value": this.hasValue ? '' : undefined, "data-sui-disabled": this.disabled ? '' : undefined }, h("sui-icon", { key: '18d3b8fbdbec459c72e80b56dddaa41aaa70de91', name: "search-2-line", size: 20, class: "sui-dropdown-search__icon" }), h("input", { key: '481395069a8ebfc17436c137e56a2885c877defb', type: "text", class: "sui-dropdown-search__input", value: this.value, placeholder: this.placeholder, "aria-label": this.ariaLabel || this.placeholder,
+            // Lupa en el teclado; SIN inputmode="search" (mata la lupa en Android).
+            enterkeyhint: "search", disabled: this.disabled, onInput: this.onInput, autocomplete: "off", spellcheck: "false" }), this.hasValue && (h("button", { key: '3bb81a28f3c5450fc4e99d28b21427aa19948de3', type: "button", class: "sui-dropdown-search__clear", "aria-label": "Limpiar b\u00FAsqueda", onClick: this.onClear }, h("sui-icon", { key: 'a0d482becac8eac6d809335b59a254516991227c', name: "close-line", size: 20 })))));
+    }
+    static get is() { return "sui-dropdown-search"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-dropdown-search.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-dropdown-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto actual del input. Mutable como el `model()` del Angular: escribir o\nlimpiar lo actualiza solo, y adem\u00E1s emite `valueChange`. Default ''."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder del input. Default `Buscar\u2026`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Buscar\u2026'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre accesible del campo. Sin pasarlo, el lector anuncia el placeholder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el input (extra feature, no en Figma). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite el nuevo texto en cada input. Espeja el output `valueChanged` del Angular."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "cleared",
+                "name": "cleared",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite al presionar el icono de clear (X). Espeja el output `cleared` del Angular."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    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
+            }];
+    }
+}

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

@@ -0,0 +1,59 @@
+@charset "UTF-8";
+/* ═══ SUI Emoji — Fluent UI animated emoji wrapper (SUI Design System 2.0) ═══════════
+ * Port 1:1 del Angular homologado (master-pedidos). PNG raster
+ * (multi-color), NO responde a currentColor — los emojis Fluent son raster
+ * a color, sin filtros.
+ * Tamaños: xs 16 · sm 20 · md 24 (default) · lg 32 · xl 48 · full 100%.
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  /* No filtros de color — los emojis Fluent son raster a color. */
+}
+
+.sui-emoji__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  /* Suavizar el upscale de PNG raster */
+  image-rendering: -webkit-optimize-contrast;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+:host([data-sui-size=xs]) {
+  width: 16px;
+  height: 16px;
+}
+
+:host([data-sui-size=sm]) {
+  width: 20px;
+  height: 20px;
+}
+
+:host([data-sui-size=md]) {
+  width: 24px;
+  height: 24px;
+}
+
+:host([data-sui-size=lg]) {
+  width: 32px;
+  height: 32px;
+}
+
+:host([data-sui-size=xl]) {
+  width: 48px;
+  height: 48px;
+}
+
+/* full: ocupa 100% del padre — útil para empty-states/heros donde el container
+   ya define las dimensiones (ej. ilustración 120×120). Sin esto el emoji queda
+   en el default md=24px y se ve minúsculo dentro del cuadro de ilustración. */
+:host([data-sui-size=full]) {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/sui-emoji/sui-emoji.data.js

@@ -0,0 +1,89 @@
+/**
+ * Datos del catálogo de emojis Fluent UI animados del SUI Design System.
+ * Separado de `sui-emoji.tsx` porque Stencil prohíbe `export const/function/enum`
+ * en archivos que contienen un `@Component`. Los tipos (`export type`) sí pueden
+ * quedar en el .tsx; los valores de runtime viven aquí.
+ */
+/**
+ * Base CDN de los emojis Fluent UI animados (PNG raster a color).
+ * Source: github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis
+ */
+export const FLUENT_EMOJI_BASE = 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis';
+/**
+ * Catálogo de emojis disponibles. Cada key mapea a un path relativo a
+ * `FLUENT_EMOJI_BASE`. Categorías típicas: Smilies, Objects,
+ * Travel%20and%20places, People, Symbols, etc.
+ * Encoding: usa `%20` para espacios en el path.
+ *
+ * Es la fuente de verdad del DS — cuando se agrega un emoji nuevo, se registra
+ * acá (NO crear un dict paralelo en otros componentes).
+ */
+export const SUI_EMOJI_MAP = {
+    // Smilies
+    'thinking-face': 'Smilies/Thinking%20Face.png',
+    'grinning-face': 'Smilies/Grinning%20Face.png',
+    'smiling-face-hearts': 'Smilies/Smiling%20Face%20with%20Hearts.png',
+    'face-with-rolling-eyes': 'Smilies/Face%20with%20Rolling%20Eyes.png',
+    'face-screaming': 'Smilies/Face%20Screaming%20in%20Fear.png',
+    'partying-face': 'Smilies/Partying%20Face.png',
+    'star-struck': 'Smilies/Star-Struck.png',
+    'sleeping-face': 'Smilies/Sleeping%20Face.png',
+    // CSAT 5-level scale (usado por sui-rating type='emoji')
+    'pensive-face': 'Smilies/Pensive%20Face.png',
+    'confused-face': 'Smilies/Confused%20Face.png',
+    'neutral-face': 'Smilies/Neutral%20Face.png',
+    'slightly-smiling-face': 'Smilies/Slightly%20Smiling%20Face.png',
+    'grinning-face-smiling-eyes': 'Smilies/Grinning%20Face%20with%20Smiling%20Eyes.png',
+    // Objects
+    'package': 'Objects/Package.png',
+    'receipt': 'Objects/Receipt.png',
+    'money-bag': 'Objects/Money%20Bag.png',
+    'money-with-wings': 'Objects/Money%20with%20Wings.png',
+    'shopping-cart': 'Objects/Shopping%20Cart.png',
+    'shopping-bags': 'Objects/Shopping%20Bags.png',
+    'card-index-dividers': 'Objects/Card%20Index%20Dividers.png',
+    'bell': 'Objects/Bell.png',
+    'bell-with-slash': 'Objects/Bell%20with%20Slash.png',
+    'pushpin': 'Objects/Round%20Pushpin.png',
+    'mobile-phone': 'Objects/Mobile%20Phone.png',
+    'gear': 'Objects/Gear.png',
+    'locked': 'Objects/Locked.png',
+    'unlocked': 'Objects/Unlocked.png',
+    'wrench': 'Objects/Wrench.png',
+    'hammer': 'Objects/Hammer.png',
+    'magnifying-glass-tilted-left': 'Objects/Magnifying%20Glass%20Tilted%20Left.png',
+    'label': 'Objects/Label.png',
+    'spiral-calendar': 'Objects/Spiral%20Calendar.png',
+    'bar-chart': 'Objects/Bar%20Chart.png',
+    // Travel & Places
+    'delivery-truck': 'Travel%20and%20places/Delivery%20Truck.png',
+    'motorcycle': 'Travel%20and%20places/Motorcycle.png',
+    'rocket': 'Travel%20and%20places/Rocket.png',
+    'house': 'Travel%20and%20places/House.png',
+    'office-building': 'Travel%20and%20places/Office%20Building.png',
+    'shop': 'Travel%20and%20places/Convenience%20Store.png',
+    'dollar-banknote': 'Objects/Dollar%20Banknote.png',
+    'glowing-star': 'Travel%20and%20places/Glowing%20Star.png',
+    'kick-scooter': 'Travel%20and%20places/Kick%20Scooter.png',
+    // Symbols
+    'check-mark': 'Symbols/Check%20Mark.png',
+    'check-mark-button': 'Symbols/Check%20Mark%20Button.png',
+    'cross-mark': 'Symbols/Cross%20Mark.png',
+    'warning': 'Symbols/Warning.png',
+    'no-entry': 'Symbols/No%20Entry.png',
+    // Activities
+    'sparkles': 'Activities/Sparkles.png',
+    'party-popper': 'Activities/Party%20Popper.png',
+    // People & Body (hand gestures viven en la carpeta "Hand gestures", no "People")
+    'waving-hand': 'Hand%20gestures/Waving%20Hand.png',
+    'thumbs-up': 'Hand%20gestures/Thumbs%20Up.png',
+    'clapping-hands': 'Hand%20gestures/Clapping%20Hands.png',
+    'handshake': 'Hand%20gestures/Handshake.png',
+    // People (usado por sui-empty-state 'users')
+    'busts-in-silhouette': 'People/Busts%20in%20Silhouette.png',
+    // Food
+    'pizza': 'Food/Pizza.png',
+    'hamburger': 'Food/Hamburger.png',
+    'taco': 'Food/Taco.png',
+    'birthday-cake': 'Food/Birthday%20Cake.png',
+};