@ajuarezso/sui-design-system 0.18.2 → 0.18.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14624,7 +14624,7 @@ class SuiSelect {
|
|
|
14624
14624
|
useExisting: forwardRef(() => SuiSelect),
|
|
14625
14625
|
multi: true,
|
|
14626
14626
|
},
|
|
14627
|
-
], 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 });
|
|
14627
|
+
], 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:20px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:20px}: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:20px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:24px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:24px}.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 });
|
|
14628
14628
|
}
|
|
14629
14629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSelect, decorators: [{
|
|
14630
14630
|
type: Component,
|
|
@@ -14652,7 +14652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14652
14652
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
14653
14653
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
14654
14654
|
'[attr.data-sui-open]': 'isOpen() ? "" : null',
|
|
14655
|
-
}, 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"] }]
|
|
14655
|
+
}, 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:20px}:host([data-sui-size=small]) .sui-select__trigger{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:20px}: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:20px}:host([data-sui-size=large]) .sui-select__trigger{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:24px}:host([data-sui-size=xlarge]) .sui-select__trigger{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:24px}.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"] }]
|
|
14656
14656
|
}], 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: [{
|
|
14657
14657
|
type: HostListener,
|
|
14658
14658
|
args: ['keydown', ['$event']]
|