@ajuarezso/sui-design-system 0.18.1 → 0.18.3

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -10084,7 +10084,22 @@ class SuiInput {
             return 'text'; // split-field: control es un text input normal
         return t;
     }, ...(ngDevMode ? [{ debugName: "nativeType" }] : /* istanbul ignore next */ []));
-    /** Teclado que le corresponde a cada `type` cuando nadie pidió otro. */
+    /**
+     * Teclado que le corresponde a cada `type` cuando nadie pidió otro.
+     *
+     * Los que están acá cambian el teclado de verdad: `numeric`, `decimal`,
+     * `tel`, `email` y `url` eligen otra grilla de teclas.
+     *
+     * `search` NO está, y es a propósito: en Android no cambia ninguna tecla y
+     * además ROMPE la tecla de acción. Chromium, cuando el campo trae un
+     * `inputmode` que no sabe convertir en teclado —`search` y `text` son los
+     * dos casos—, lo manda igual pero marcándolo como campo de VARIAS LÍNEAS
+     * (`TYPE_TEXT_FLAG_MULTI_LINE`, rama `default` de
+     * `ImeUtils.computeEditorInfo`). Un campo de varias líneas necesita la tecla
+     * de salto de línea, así que el teclado dibuja la flecha de enter y descarta
+     * la lupa aunque se la hayan pedido. Sin `inputmode`, el mismo campo llega
+     * como de una sola línea y la lupa aparece.
+     */
     _inputModeAuto = computed(() => {
         const t = this.type();
         if (t === 'number')
@@ -10099,8 +10114,6 @@ class SuiInput {
             return 'email';
         if (t === 'url')
             return 'url';
-        if (t === 'search')
-            return 'search';
         return null;
     }, ...(ngDevMode ? [{ debugName: "_inputModeAuto" }] : /* istanbul ignore next */ []));
     /** `inputmode` que termina en el DOM: gana lo que pidió el consumer. */
@@ -10108,21 +10121,16 @@ class SuiInput {
     /**
      * Un campo de búsqueda abre con LUPA en la tecla de acción, siempre.
      *
-     * Va por default y no queda a cargo de cada pantalla porque el caso correcto
-     * NO sale solo, y en Android el propio `inputmode` lo empeora. Chromium le
-     * pide la lupa al teclado únicamente si el campo es `type=search` Y NO trae
-     * `inputmode` propio (`ImeUtils.getImeAction`). Como acá sí lo trae
-     * —`_inputModeAuto` le pone `search` para elegir el teclado— esa regla se
-     * saltea, el campo cae en la rama genérica y la tecla queda en la acción por
-     * descarte en vez de la lupa. Dicho de otra forma: emitir solo `inputmode`
-     * deja el teclado PEOR que no emitir nada.
+     * Va por default y no queda a cargo de cada pantalla porque pedirla es la
+     * mitad del trabajo: la otra mitad es NO pedir `inputmode="search"`, que es
+     * lo que la tapaba (ver `_inputModeAuto`). Las dos decisiones viven juntas
+     * acá para que no se puedan separar por accidente en una pantalla.
      *
-     * iOS llega al mismo lugar por otro camino: sin `enterkeyhint` solo pone la
-     * lupa si el campo vive dentro de un `form` con `action`, y acá no vive.
+     * En Android el atributo alcanza solo: Chromium lo traduce a la acción
+     * SEARCH del teclado sin mirar el type ni el form.
      *
-     * `enterkeyhint` es lo único que decide el ícono sin mirar nada más —ni el
-     * type, ni el inputmode, ni el form— así que se emite desde el componente y
-     * ninguna pantalla tiene que acordarse.
+     * En iOS hace falta igual, porque ahí la lupa sale sola únicamente si el
+     * campo vive dentro de un `form` con `action`, y acá no vive.
      */
     _enterKeyHintAuto = computed(() => this.type() === 'search' ? 'search' : null, ...(ngDevMode ? [{ debugName: "_enterKeyHintAuto" }] : /* istanbul ignore next */ []));
     /** `enterkeyhint` que termina en el DOM: gana lo que pidió el consumer. */
@@ -14616,7 +14624,7 @@ class SuiSelect {
                 useExisting: forwardRef(() => SuiSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag() && selectedLabel() !== null) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag() && selectedLabel() !== null) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiFormLabel, selector: "sui-form-label", inputs: ["label", "sublabel", "required", "tooltip", "link", "size", "disabled", "for"], outputs: ["linkClick"] }, { kind: "component", type: SuiFormHint, selector: "sui-form-hint", inputs: ["message", "variant", "icon"] }, { kind: "component", type: SuiDropdownMenu, selector: "sui-dropdown-menu", inputs: ["matchWidth", "flexibleDimensions", "push", "minWidth", "position", "viewportMargin", "panelClass", "disabled", "popupRole", "origin"], outputs: ["openedChange"], exportAs: ["suiDropdownMenu"] }, { kind: "directive", type: SuiDropdownPanel, selector: "ng-template[suiDropdownPanel]" }, { kind: "component", type: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiFlag, selector: "sui-flag", inputs: ["name", "size", "ariaLabel"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSelect, decorators: [{
             type: Component,
@@ -14644,7 +14652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-error]': 'error() ? "" : null',
                         '[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
                         '[attr.data-sui-open]': 'isOpen() ? "" : null',
-                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag() && selectedLabel() !== null) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8)}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12)}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
+                    }, template: "@if (label()) {\n  <sui-form-label\n    [label]=\"label()!\"\n    [sublabel]=\"sublabel()\"\n    [required]=\"required()\"\n    [tooltip]=\"tooltip()\"\n    [size]=\"labelSize()\"\n    class=\"sui-select__label-host\"\n    (click)=\"toggleOpen()\"\n  />\n}\n\n<div\n  #triggerEl\n  class=\"sui-select__trigger\"\n  [class.sui-select__trigger--error]=\"error()\"\n  [class.sui-select__trigger--disabled]=\"isDisabled()\"\n  [class.sui-select__trigger--open]=\"isOpen()\"\n  [class.sui-select__trigger--filled]=\"selectedLabel() !== null\"\n  role=\"combobox\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n  [attr.tabindex]=\"isDisabled() ? '-1' : '0'\"\n  (click)=\"toggleOpen()\"\n>\n  <!--\n    Left decoration (Figma Select[1.1] Type variant). Prioridad:\n      1. slot proyectado [slot=leading] (custom total)\n      2. imageUrl (avatar/logo del filled state)\n      3. flag (type=country, SOLO con selecci\u00F3n hecha \u2014 vac\u00EDo muestra globo)\n      4. RemixIcon por type (leadingIcon=true) o custom (leadingIcon=string)\n    Solo se renderea si leadingIcon est\u00E1 activo O hay imageUrl/flag.\n  -->\n  @if (showLeading()) {\n    <span class=\"sui-select__leading\">\n      <ng-content select=\"[slot=leading]\" />\n      @if (showLeadingImage()) {\n        @if (type() === 'avatar') {\n          <sui-avatar size=\"xs\" [src]=\"imageUrl()\" />\n        } @else {\n          <img class=\"sui-select__leading-img\" [src]=\"imageUrl()\" alt=\"\" />\n        }\n      } @else if (type() === 'country' && flag() && selectedLabel() !== null) {\n        <sui-flag class=\"sui-select__leading-flag\" [name]=\"flag()!\" size=\"md\" />\n      } @else {\n        <sui-icon class=\"sui-select__leading-icon\" [name]=\"leadingIconName()\" [size]=\"20\" />\n      }\n    </span>\n  }\n\n  <span class=\"sui-select__value\">\n    @if (selectedLabel()) {\n      {{ selectedLabel() }}\n    } @else {\n      <span class=\"sui-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </span>\n\n  <!-- Badge inline opcional (Figma: entre value y chevron). sui-badge real \u2014\n       defaults orange/lighter/medium replican el chip del Figma (brand naranja). -->\n  @if (badgeCfg(); as bcfg) {\n    <sui-badge\n      class=\"sui-select__badge\"\n      [color]=\"bcfg.color ?? 'orange'\"\n      [variant]=\"bcfg.variant ?? 'lighter'\"\n      [size]=\"bcfg.size ?? 'medium'\"\n    >{{ bcfg.label }}</sui-badge>\n  }\n\n  <!-- Figma: arrow-down-s-line at 20\u00D720 (size-[20px]) \u2014 verified nodeId 270:1091 -->\n  <sui-icon\n    class=\"sui-select__chevron\"\n    name=\"arrow-down-s-line\"\n    [size]=\"20\"\n    aria-hidden=\"true\"\n  />\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n  <sui-form-hint\n    [message]=\"error() ? errorMessage() : hint()\"\n    [variant]=\"error() ? 'error' : 'neutral'\"\n    class=\"sui-select__hint-host\"\n  />\n}\n\n<!--\n  Overlay menu \u2014 delegado a sui-dropdown-menu via [origin]=triggerEl.\n  El sui-dropdown-menu encapsula CDK Overlay, positioning, backdrop,\n  ResizeObserver y detachments. El trigger lo maneja este componente.\n-->\n<sui-dropdown-menu\n  [origin]=\"triggerEl\"\n  [disabled]=\"isDisabled()\"\n  [matchWidth]=\"true\"\n  panelClass=\"sui-select__overlay-pane\"\n  (openedChange)=\"onMenuOpenedChange($event)\"\n>\n  <ng-template suiDropdownPanel>\n    <div\n      class=\"sui-select__panel\"\n      [class.sui-select__panel--xsmall]=\"size() === 'xsmall'\"\n      [class.sui-select__panel--small]=\"size() === 'small'\"\n      [class.sui-select__panel--medium]=\"size() === 'medium'\"\n      role=\"listbox\"\n      [attr.aria-label]=\"label() || placeholder()\"\n    >\n      @for (option of options(); track option.value; let i = $index) {\n        <sui-dropdown-item\n          mode=\"option\"\n          [label]=\"option.label\"\n          [selected]=\"option.value === value()\"\n          [highlighted]=\"highlightedIndex() === i\"\n          [disabled]=\"!!option.disabled\"\n          (clicked)=\"select(option)\"\n          (mouseenter)=\"highlightedIndex.set(i)\"\n        />\n      }\n    </div>\n  </ng-template>\n</sui-dropdown-menu>\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host{display:block;margin-bottom:4px;cursor:default}.sui-select__trigger{display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-size=xsmall]) .sui-select__trigger{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-select__trigger,:host(:not([data-sui-size])) .sui-select__trigger{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}:host([data-sui-disabled]) .sui-select__leading{color:var(--sui-icon-disabled-300);opacity:.48}.sui-select__leading-icon{display:inline-flex}.sui-select__leading-img{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag,.sui-select__badge{flex-shrink:0}:host([data-sui-disabled]) .sui-select__badge{opacity:.48}.sui-select__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}:host([data-sui-disabled]) .sui-select__value{color:var(--sui-text-disabled-300)}.sui-select__placeholder{color:var(--sui-text-sub-600)}:host([data-sui-disabled]) .sui-select__placeholder{color:var(--sui-text-disabled-300)}.sui-select__chevron{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}:host([data-sui-open]) .sui-select__chevron{transform:rotate(180deg)}:host([data-sui-disabled]) .sui-select__chevron{color:var(--sui-icon-disabled-300)}.sui-select__hint-host{display:block;margin-top:4px}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]