@ajuarezso/sui-design-system 0.20.0 → 0.22.0
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.
- package/docs/INDEX.md +75 -80
- package/docs/sui-accordion/README.md +171 -0
- package/docs/sui-activity-feed/README.md +155 -0
- package/docs/sui-activity-filter/README.md +100 -0
- package/docs/sui-alert/README.md +13 -0
- package/docs/sui-badge/README.md +17 -0
- package/docs/sui-banner/README.md +190 -0
- package/docs/sui-breadcrumb-item/README.md +96 -0
- package/docs/sui-breadcrumbs/README.md +122 -0
- package/docs/sui-button/README.md +36 -0
- package/docs/sui-card/README.md +168 -0
- package/docs/sui-chart-legend/README.md +140 -0
- package/docs/sui-chart-legend-dot/README.md +118 -0
- package/docs/sui-checkbox-card/README.md +150 -0
- package/docs/sui-command-menu-footer/README.md +100 -0
- package/docs/sui-command-menu-item/README.md +140 -0
- package/docs/sui-command-menu-search/README.md +105 -0
- package/docs/sui-compact-select/README.md +130 -0
- package/docs/sui-compact-select-for-input/README.md +120 -0
- package/docs/sui-content-card/README.md +147 -0
- package/docs/sui-content-label/README.md +148 -0
- package/docs/sui-counter-input/README.md +148 -0
- package/docs/sui-date-selector/README.md +98 -0
- package/docs/sui-datepicker/README.md +197 -0
- package/docs/sui-day-cell/README.md +118 -0
- package/docs/sui-day-label/README.md +81 -0
- package/docs/sui-drawer-footer/README.md +127 -0
- package/docs/sui-drawer-header/README.md +140 -0
- package/docs/sui-dropdown-caption/README.md +92 -0
- package/docs/sui-dropdown-item/README.md +163 -0
- package/docs/sui-dropdown-menu/README.md +196 -0
- package/docs/sui-dropdown-search/README.md +113 -0
- package/docs/sui-empty-state/README.md +145 -0
- package/docs/sui-file-upload/README.md +154 -0
- package/docs/sui-file-upload-card/README.md +129 -0
- package/docs/sui-filter/README.md +181 -0
- package/docs/sui-href/README.md +85 -0
- package/docs/sui-image-upload/README.md +200 -0
- package/docs/sui-image-upload-profile/README.md +145 -0
- package/docs/sui-img-retry/README.md +107 -0
- package/docs/sui-inline-input/README.md +104 -0
- package/docs/sui-inline-select/README.md +101 -0
- package/docs/sui-input/README.md +247 -0
- package/docs/sui-integration-switch/README.md +142 -0
- package/docs/sui-modal/README.md +238 -0
- package/docs/sui-modal-footer/README.md +178 -0
- package/docs/sui-modal-header/README.md +115 -0
- package/docs/sui-modal-sheet/README.md +170 -0
- package/docs/sui-notification/README.md +179 -0
- package/docs/sui-notification-footer/README.md +98 -0
- package/docs/sui-notification-tab-menu/README.md +112 -0
- package/docs/sui-otp-input/README.md +116 -0
- package/docs/sui-page-header/README.md +123 -0
- package/docs/sui-pagination/README.md +146 -0
- package/docs/sui-password-strength/README.md +99 -0
- package/docs/sui-period-range/README.md +93 -0
- package/docs/sui-popover/README.md +178 -0
- package/docs/sui-product-card/README.md +173 -0
- package/docs/sui-radio-card/README.md +160 -0
- package/docs/sui-rating/README.md +7 -6
- package/docs/sui-rich-editor/README.md +114 -0
- package/docs/sui-segmented-control/README.md +3 -0
- package/docs/sui-select/README.md +183 -0
- package/docs/sui-sidebar/README.md +217 -0
- package/docs/sui-stepper/README.md +166 -0
- package/docs/sui-store-card/README.md +147 -0
- package/docs/sui-switch-card/README.md +149 -0
- package/docs/sui-switch-label/README.md +3 -0
- package/docs/sui-tab-chips/README.md +188 -0
- package/docs/sui-tab-menu-horizontal/README.md +142 -0
- package/docs/sui-tab-menu-vertical/README.md +136 -0
- package/docs/sui-table/README.md +264 -0
- package/docs/sui-tag-input/README.md +123 -0
- package/docs/sui-textarea/README.md +160 -0
- package/docs/sui-time-picker/README.md +240 -0
- package/docs/sui-toast/README.md +190 -0
- package/docs/sui-tooltip/README.md +201 -0
- package/docs/sui-topbar/README.md +153 -0
- package/docs/sui-topbar-button/README.md +95 -0
- package/docs/sui-topbar-item/README.md +97 -0
- package/docs/sui-topbar-user/README.md +83 -0
- package/fesm2022/ajuarezso-sui-design-system.mjs +291 -246
- package/fesm2022/ajuarezso-sui-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ajuarezso-sui-design-system.d.ts +208 -50
|
@@ -1637,7 +1637,7 @@ class SuiBanner {
|
|
|
1637
1637
|
this.closed.emit();
|
|
1638
1638
|
}
|
|
1639
1639
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1640
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBanner, isStandalone: true, selector: "sui-banner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-variant": "variant()", "attr.data-sui-style": "variantStyle()", "attr.role": "\"region\"", "attr.aria-label": "title()" } }, ngImport: i0, template: "@if (!dismissed()) {\n <div class=\"sui-banner\">\n @if (showIcon()) {\n <div class=\"sui-banner__icon\" aria-hidden=\"true\">\n <!-- pickLeft slot (Figma): reemplaza el icono default por contenido\n custom (logo de app, emoji, avatar). Si est\u00E1 vac\u00EDo, cae al icono\n por variante. Detecci\u00F3n via `:empty` igual que .sui-banner__action. -->\n <span class=\"sui-banner__icon-slot\"><ng-content select=\"[slot=icon]\" /></span>\n <sui-icon class=\"sui-banner__icon-default\" [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-banner__text\">\n @if (title()) {\n <span class=\"sui-banner__title\">{{ title() }}</span>\n }\n @if (title() && description()) {\n <span class=\"sui-banner__sep\" aria-hidden=\"true\">∙</span>\n }\n @if (description()) {\n <span class=\"sui-banner__description\">{{ description() }}</span>\n }\n </div>\n\n <div class=\"sui-banner__action\">\n <ng-content select=\"[slot=action]\" />\n </div>\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variant modifiable \u2192 el icono\n hereda el currentColor del banner), NO un <button> maqueta. La opacity\n base por estilo + el posicionamiento absolute los aplica el SCSS del\n `.sui-banner__close`; el icono de 20px = compact size `large`. -->\n <sui-compact-button\n class=\"sui-banner__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.sui-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 48px;width:100%;height:44px;box-sizing:border-box;overflow:clip;color:var(--sui-text-strong-950);font-family:var(--sui-font-sans)}@media(max-width:767px){.sui-banner{padding:
|
|
1640
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBanner, isStandalone: true, selector: "sui-banner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-variant": "variant()", "attr.data-sui-style": "variantStyle()", "attr.data-sui-show-icon": "showIcon()", "attr.role": "\"region\"", "attr.aria-label": "title()" } }, ngImport: i0, template: "@if (!dismissed()) {\n <div class=\"sui-banner\">\n @if (showIcon()) {\n <div class=\"sui-banner__icon\" aria-hidden=\"true\">\n <!-- pickLeft slot (Figma): reemplaza el icono default por contenido\n custom (logo de app, emoji, avatar). Si est\u00E1 vac\u00EDo, cae al icono\n por variante. Detecci\u00F3n via `:empty` igual que .sui-banner__action. -->\n <span class=\"sui-banner__icon-slot\"><ng-content select=\"[slot=icon]\" /></span>\n <sui-icon class=\"sui-banner__icon-default\" [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-banner__text\">\n @if (title()) {\n <span class=\"sui-banner__title\">{{ title() }}</span>\n }\n @if (title() && description()) {\n <span class=\"sui-banner__sep\" aria-hidden=\"true\">∙</span>\n }\n @if (description()) {\n <span class=\"sui-banner__description\">{{ description() }}</span>\n }\n </div>\n\n <div class=\"sui-banner__action\">\n <ng-content select=\"[slot=action]\" />\n </div>\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variant modifiable \u2192 el icono\n hereda el currentColor del banner), NO un <button> maqueta. La opacity\n base por estilo + el posicionamiento absolute los aplica el SCSS del\n `.sui-banner__close`; el icono de 20px = compact size `large`. -->\n <sui-compact-button\n class=\"sui-banner__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.sui-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 48px;width:100%;height:44px;box-sizing:border-box;overflow:clip;color:var(--sui-text-strong-950);font-family:var(--sui-font-sans)}@media(max-width:767px){.sui-banner{padding:12px 48px 12px 14px;height:auto;min-height:44px;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:4px 8px}}.sui-banner__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.sui-banner__icon-slot{display:inline-flex;align-items:center;justify-content:center}.sui-banner__icon-slot:empty{display:none}.sui-banner__icon-slot:not(:empty)+.sui-banner__icon-default{display:none}.sui-banner__text{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;word-break:break-word}@media(max-width:767px){.sui-banner__text{flex:1 1 0;min-width:0;white-space:normal;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}}.sui-banner__title{font-weight:500}.sui-banner__sep{font-weight:500;opacity:1}@media(max-width:767px){.sui-banner__sep{display:none}}.sui-banner__description{font-weight:400}.sui-banner__action{flex-shrink:0;display:inline-flex;align-items:center;color:var(--sui-text-strong-950)}.sui-banner__action:empty{display:none}@media(max-width:767px){.sui-banner__action{flex-basis:100%;padding-left:28px}}@media(max-width:767px){:host([data-sui-show-icon=false]) .sui-banner__action{padding-left:0}}.sui-banner__close{position:absolute;right:12px;top:calc(50% + .5px);transform:translateY(-50%);opacity:.48;color:inherit;transition:opacity .12s}.sui-banner__close:hover{opacity:.72}@media(max-width:767px){.sui-banner__close{top:10px;transform:none}}.sui-banner__close ::ng-deep .sui-compact-button__el{position:relative}.sui-banner__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-8px}:host([data-sui-style=stroke]) .sui-banner,:host(:not([data-sui-style])) .sui-banner{background:var(--sui-bg-white-0);border-bottom:1px solid var(--sui-stroke-soft-200)}:host([data-sui-style=stroke][data-sui-variant=info]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=info]) .sui-banner__icon{color:var(--sui-state-information-base)}:host([data-sui-style=stroke][data-sui-variant=success]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=success]) .sui-banner__icon{color:var(--sui-state-success-base)}:host([data-sui-style=stroke][data-sui-variant=warning]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=warning]) .sui-banner__icon{color:var(--sui-state-warning-base)}:host([data-sui-style=stroke][data-sui-variant=error]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=error]) .sui-banner__icon{color:var(--sui-state-error-base)}:host([data-sui-style=stroke][data-sui-variant=feature]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=feature]) .sui-banner__icon{color:var(--sui-state-faded-base)}:host([data-sui-style=light][data-sui-variant=info]) .sui-banner{background:var(--sui-state-information-light)}:host([data-sui-style=light][data-sui-variant=info]) .sui-banner__icon{color:var(--sui-state-information-base)}:host([data-sui-style=light][data-sui-variant=success]) .sui-banner{background:var(--sui-state-success-light)}:host([data-sui-style=light][data-sui-variant=success]) .sui-banner__icon{color:var(--sui-state-success-base)}:host([data-sui-style=light][data-sui-variant=warning]) .sui-banner{background:var(--sui-state-warning-light)}:host([data-sui-style=light][data-sui-variant=warning]) .sui-banner__icon{color:var(--sui-state-warning-base)}:host([data-sui-style=light][data-sui-variant=error]) .sui-banner{background:var(--sui-state-error-light)}:host([data-sui-style=light][data-sui-variant=error]) .sui-banner__icon{color:var(--sui-state-error-base)}:host([data-sui-style=light][data-sui-variant=feature]) .sui-banner{background:var(--sui-state-faded-light)}:host([data-sui-style=light][data-sui-variant=feature]) .sui-banner__icon{color:var(--sui-state-faded-base)}:host([data-sui-style=lighter][data-sui-variant=info]) .sui-banner{background:var(--sui-state-information-lighter)}:host([data-sui-style=lighter][data-sui-variant=info]) .sui-banner__icon{color:var(--sui-state-information-base)}:host([data-sui-style=lighter][data-sui-variant=success]) .sui-banner{background:var(--sui-state-success-lighter)}:host([data-sui-style=lighter][data-sui-variant=success]) .sui-banner__icon{color:var(--sui-state-success-base)}:host([data-sui-style=lighter][data-sui-variant=warning]) .sui-banner{background:var(--sui-state-warning-lighter)}:host([data-sui-style=lighter][data-sui-variant=warning]) .sui-banner__icon{color:var(--sui-state-warning-base)}:host([data-sui-style=lighter][data-sui-variant=error]) .sui-banner{background:var(--sui-state-error-lighter)}:host([data-sui-style=lighter][data-sui-variant=error]) .sui-banner__icon{color:var(--sui-state-error-base)}:host([data-sui-style=lighter][data-sui-variant=feature]) .sui-banner{background:var(--sui-state-faded-lighter)}:host([data-sui-style=lighter][data-sui-variant=feature]) .sui-banner__icon{color:var(--sui-state-faded-base)}:host([data-sui-style=filled]) .sui-banner{color:var(--sui-static-white)}:host([data-sui-style=filled]) .sui-banner__action{color:var(--sui-static-white)}:host([data-sui-style=filled]) .sui-banner__close{opacity:.72}:host([data-sui-style=filled][data-sui-variant=info]) .sui-banner{background:var(--sui-state-information-base)}:host([data-sui-style=filled][data-sui-variant=success]) .sui-banner{background:var(--sui-state-success-base)}:host([data-sui-style=filled][data-sui-variant=warning]) .sui-banner{background:var(--sui-state-warning-base)}:host([data-sui-style=filled][data-sui-variant=error]) .sui-banner{background:var(--sui-state-error-base)}:host([data-sui-style=filled][data-sui-variant=feature]) .sui-banner{background:var(--sui-state-faded-base)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1641
1641
|
}
|
|
1642
1642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBanner, decorators: [{
|
|
1643
1643
|
type: Component,
|
|
@@ -1648,9 +1648,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1648
1648
|
'[attr.title]': 'null',
|
|
1649
1649
|
'[attr.data-sui-variant]': 'variant()',
|
|
1650
1650
|
'[attr.data-sui-style]': 'variantStyle()',
|
|
1651
|
+
'[attr.data-sui-show-icon]': 'showIcon()',
|
|
1651
1652
|
'[attr.role]': '"region"',
|
|
1652
1653
|
'[attr.aria-label]': 'title()',
|
|
1653
|
-
}, template: "@if (!dismissed()) {\n <div class=\"sui-banner\">\n @if (showIcon()) {\n <div class=\"sui-banner__icon\" aria-hidden=\"true\">\n <!-- pickLeft slot (Figma): reemplaza el icono default por contenido\n custom (logo de app, emoji, avatar). Si est\u00E1 vac\u00EDo, cae al icono\n por variante. Detecci\u00F3n via `:empty` igual que .sui-banner__action. -->\n <span class=\"sui-banner__icon-slot\"><ng-content select=\"[slot=icon]\" /></span>\n <sui-icon class=\"sui-banner__icon-default\" [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-banner__text\">\n @if (title()) {\n <span class=\"sui-banner__title\">{{ title() }}</span>\n }\n @if (title() && description()) {\n <span class=\"sui-banner__sep\" aria-hidden=\"true\">∙</span>\n }\n @if (description()) {\n <span class=\"sui-banner__description\">{{ description() }}</span>\n }\n </div>\n\n <div class=\"sui-banner__action\">\n <ng-content select=\"[slot=action]\" />\n </div>\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variant modifiable \u2192 el icono\n hereda el currentColor del banner), NO un <button> maqueta. La opacity\n base por estilo + el posicionamiento absolute los aplica el SCSS del\n `.sui-banner__close`; el icono de 20px = compact size `large`. -->\n <sui-compact-button\n class=\"sui-banner__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.sui-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 48px;width:100%;height:44px;box-sizing:border-box;overflow:clip;color:var(--sui-text-strong-950);font-family:var(--sui-font-sans)}@media(max-width:767px){.sui-banner{padding:
|
|
1654
|
+
}, template: "@if (!dismissed()) {\n <div class=\"sui-banner\">\n @if (showIcon()) {\n <div class=\"sui-banner__icon\" aria-hidden=\"true\">\n <!-- pickLeft slot (Figma): reemplaza el icono default por contenido\n custom (logo de app, emoji, avatar). Si est\u00E1 vac\u00EDo, cae al icono\n por variante. Detecci\u00F3n via `:empty` igual que .sui-banner__action. -->\n <span class=\"sui-banner__icon-slot\"><ng-content select=\"[slot=icon]\" /></span>\n <sui-icon class=\"sui-banner__icon-default\" [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-banner__text\">\n @if (title()) {\n <span class=\"sui-banner__title\">{{ title() }}</span>\n }\n @if (title() && description()) {\n <span class=\"sui-banner__sep\" aria-hidden=\"true\">∙</span>\n }\n @if (description()) {\n <span class=\"sui-banner__description\">{{ description() }}</span>\n }\n </div>\n\n <div class=\"sui-banner__action\">\n <ng-content select=\"[slot=action]\" />\n </div>\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variant modifiable \u2192 el icono\n hereda el currentColor del banner), NO un <button> maqueta. La opacity\n base por estilo + el posicionamiento absolute los aplica el SCSS del\n `.sui-banner__close`; el icono de 20px = compact size `large`. -->\n <sui-compact-button\n class=\"sui-banner__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.sui-banner{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 48px;width:100%;height:44px;box-sizing:border-box;overflow:clip;color:var(--sui-text-strong-950);font-family:var(--sui-font-sans)}@media(max-width:767px){.sui-banner{padding:12px 48px 12px 14px;height:auto;min-height:44px;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:4px 8px}}.sui-banner__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.sui-banner__icon-slot{display:inline-flex;align-items:center;justify-content:center}.sui-banner__icon-slot:empty{display:none}.sui-banner__icon-slot:not(:empty)+.sui-banner__icon-default{display:none}.sui-banner__text{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;word-break:break-word}@media(max-width:767px){.sui-banner__text{flex:1 1 0;min-width:0;white-space:normal;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}}.sui-banner__title{font-weight:500}.sui-banner__sep{font-weight:500;opacity:1}@media(max-width:767px){.sui-banner__sep{display:none}}.sui-banner__description{font-weight:400}.sui-banner__action{flex-shrink:0;display:inline-flex;align-items:center;color:var(--sui-text-strong-950)}.sui-banner__action:empty{display:none}@media(max-width:767px){.sui-banner__action{flex-basis:100%;padding-left:28px}}@media(max-width:767px){:host([data-sui-show-icon=false]) .sui-banner__action{padding-left:0}}.sui-banner__close{position:absolute;right:12px;top:calc(50% + .5px);transform:translateY(-50%);opacity:.48;color:inherit;transition:opacity .12s}.sui-banner__close:hover{opacity:.72}@media(max-width:767px){.sui-banner__close{top:10px;transform:none}}.sui-banner__close ::ng-deep .sui-compact-button__el{position:relative}.sui-banner__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-8px}:host([data-sui-style=stroke]) .sui-banner,:host(:not([data-sui-style])) .sui-banner{background:var(--sui-bg-white-0);border-bottom:1px solid var(--sui-stroke-soft-200)}:host([data-sui-style=stroke][data-sui-variant=info]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=info]) .sui-banner__icon{color:var(--sui-state-information-base)}:host([data-sui-style=stroke][data-sui-variant=success]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=success]) .sui-banner__icon{color:var(--sui-state-success-base)}:host([data-sui-style=stroke][data-sui-variant=warning]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=warning]) .sui-banner__icon{color:var(--sui-state-warning-base)}:host([data-sui-style=stroke][data-sui-variant=error]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=error]) .sui-banner__icon{color:var(--sui-state-error-base)}:host([data-sui-style=stroke][data-sui-variant=feature]) .sui-banner__icon,:host(:not([data-sui-style])[data-sui-variant=feature]) .sui-banner__icon{color:var(--sui-state-faded-base)}:host([data-sui-style=light][data-sui-variant=info]) .sui-banner{background:var(--sui-state-information-light)}:host([data-sui-style=light][data-sui-variant=info]) .sui-banner__icon{color:var(--sui-state-information-base)}:host([data-sui-style=light][data-sui-variant=success]) .sui-banner{background:var(--sui-state-success-light)}:host([data-sui-style=light][data-sui-variant=success]) .sui-banner__icon{color:var(--sui-state-success-base)}:host([data-sui-style=light][data-sui-variant=warning]) .sui-banner{background:var(--sui-state-warning-light)}:host([data-sui-style=light][data-sui-variant=warning]) .sui-banner__icon{color:var(--sui-state-warning-base)}:host([data-sui-style=light][data-sui-variant=error]) .sui-banner{background:var(--sui-state-error-light)}:host([data-sui-style=light][data-sui-variant=error]) .sui-banner__icon{color:var(--sui-state-error-base)}:host([data-sui-style=light][data-sui-variant=feature]) .sui-banner{background:var(--sui-state-faded-light)}:host([data-sui-style=light][data-sui-variant=feature]) .sui-banner__icon{color:var(--sui-state-faded-base)}:host([data-sui-style=lighter][data-sui-variant=info]) .sui-banner{background:var(--sui-state-information-lighter)}:host([data-sui-style=lighter][data-sui-variant=info]) .sui-banner__icon{color:var(--sui-state-information-base)}:host([data-sui-style=lighter][data-sui-variant=success]) .sui-banner{background:var(--sui-state-success-lighter)}:host([data-sui-style=lighter][data-sui-variant=success]) .sui-banner__icon{color:var(--sui-state-success-base)}:host([data-sui-style=lighter][data-sui-variant=warning]) .sui-banner{background:var(--sui-state-warning-lighter)}:host([data-sui-style=lighter][data-sui-variant=warning]) .sui-banner__icon{color:var(--sui-state-warning-base)}:host([data-sui-style=lighter][data-sui-variant=error]) .sui-banner{background:var(--sui-state-error-lighter)}:host([data-sui-style=lighter][data-sui-variant=error]) .sui-banner__icon{color:var(--sui-state-error-base)}:host([data-sui-style=lighter][data-sui-variant=feature]) .sui-banner{background:var(--sui-state-faded-lighter)}:host([data-sui-style=lighter][data-sui-variant=feature]) .sui-banner__icon{color:var(--sui-state-faded-base)}:host([data-sui-style=filled]) .sui-banner{color:var(--sui-static-white)}:host([data-sui-style=filled]) .sui-banner__action{color:var(--sui-static-white)}:host([data-sui-style=filled]) .sui-banner__close{opacity:.72}:host([data-sui-style=filled][data-sui-variant=info]) .sui-banner{background:var(--sui-state-information-base)}:host([data-sui-style=filled][data-sui-variant=success]) .sui-banner{background:var(--sui-state-success-base)}:host([data-sui-style=filled][data-sui-variant=warning]) .sui-banner{background:var(--sui-state-warning-base)}:host([data-sui-style=filled][data-sui-variant=error]) .sui-banner{background:var(--sui-state-error-base)}:host([data-sui-style=filled][data-sui-variant=feature]) .sui-banner{background:var(--sui-state-faded-base)}\n"] }]
|
|
1654
1655
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
1655
1656
|
|
|
1656
1657
|
/**
|
|
@@ -1932,7 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1932
1933
|
* - Output `(navigate)` emite el item clickeado.
|
|
1933
1934
|
*
|
|
1934
1935
|
* Accesibilidad:
|
|
1935
|
-
* - host = `<nav aria-label="
|
|
1936
|
+
* - host = `<nav aria-label="Ruta de navegación">`
|
|
1936
1937
|
* - Lista interna `<ol>` (orden semántica) sin estilos default.
|
|
1937
1938
|
* - Active item con `aria-current="page"` (manejado por `<sui-breadcrumb-item>`).
|
|
1938
1939
|
* - Dividers `aria-hidden="true"`.
|
|
@@ -1959,13 +1960,13 @@ class SuiBreadcrumbs {
|
|
|
1959
1960
|
this.navigate.emit(item);
|
|
1960
1961
|
}
|
|
1961
1962
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1962
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBreadcrumbs, isStandalone: true, selector: "sui-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "\"
|
|
1963
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiBreadcrumbs, isStandalone: true, selector: "sui-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "\"Ruta de navegaci\u00F3n\"", "attr.data-sui-divider": "divider()" } }, ngImport: i0, template: "<ol class=\"sui-breadcrumbs__list\">\n @for (entry of resolvedItems(); track $index; let last = $last) {\n <li class=\"sui-breadcrumbs__item\">\n <sui-breadcrumb-item\n [label]=\"entry.data.label ?? ''\"\n [icon]=\"entry.data.icon ?? ''\"\n [href]=\"entry.data.href ?? ''\"\n [active]=\"entry.isActive\"\n [ariaLabel]=\"entry.data.ariaLabel ?? ''\"\n (clicked)=\"onItemClicked(entry.data)\"\n />\n\n @if (!last) {\n <span class=\"sui-breadcrumbs__divider\" aria-hidden=\"true\">\n @switch (divider()) {\n @case ('arrow') {\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n @case ('slash') {\n <span class=\"sui-breadcrumbs__divider-glyph\">/</span>\n }\n @case ('dot') {\n <span class=\"sui-breadcrumbs__divider-glyph\">•</span>\n }\n }\n </span>\n }\n </li>\n }\n</ol>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-breadcrumbs__list{display:inline-flex;align-items:flex-start;gap:6px;list-style:none;margin:0;padding:0}.sui-breadcrumbs__item{display:inline-flex;align-items:center;gap:6px}.sui-breadcrumbs__divider{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-icon-disabled-300);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}.sui-breadcrumbs__divider-glyph{display:inline-flex;align-items:center;justify-content:center;width:20px;text-align:center;color:var(--sui-text-disabled-300);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBreadcrumbItem, selector: "sui-breadcrumb-item", inputs: ["label", "icon", "href", "active", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1963
1964
|
}
|
|
1964
1965
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiBreadcrumbs, decorators: [{
|
|
1965
1966
|
type: Component,
|
|
1966
1967
|
args: [{ selector: 'sui-breadcrumbs', standalone: true, imports: [SuiIcon, SuiBreadcrumbItem], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1967
1968
|
'role': 'navigation',
|
|
1968
|
-
'[attr.aria-label]': '"
|
|
1969
|
+
'[attr.aria-label]': '"Ruta de navegación"',
|
|
1969
1970
|
'[attr.data-sui-divider]': 'divider()',
|
|
1970
1971
|
}, template: "<ol class=\"sui-breadcrumbs__list\">\n @for (entry of resolvedItems(); track $index; let last = $last) {\n <li class=\"sui-breadcrumbs__item\">\n <sui-breadcrumb-item\n [label]=\"entry.data.label ?? ''\"\n [icon]=\"entry.data.icon ?? ''\"\n [href]=\"entry.data.href ?? ''\"\n [active]=\"entry.isActive\"\n [ariaLabel]=\"entry.data.ariaLabel ?? ''\"\n (clicked)=\"onItemClicked(entry.data)\"\n />\n\n @if (!last) {\n <span class=\"sui-breadcrumbs__divider\" aria-hidden=\"true\">\n @switch (divider()) {\n @case ('arrow') {\n <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n }\n @case ('slash') {\n <span class=\"sui-breadcrumbs__divider-glyph\">/</span>\n }\n @case ('dot') {\n <span class=\"sui-breadcrumbs__divider-glyph\">•</span>\n }\n }\n </span>\n }\n </li>\n }\n</ol>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-breadcrumbs__list{display:inline-flex;align-items:flex-start;gap:6px;list-style:none;margin:0;padding:0}.sui-breadcrumbs__item{display:inline-flex;align-items:center;gap:6px}.sui-breadcrumbs__divider{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-icon-disabled-300);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}.sui-breadcrumbs__divider-glyph{display:inline-flex;align-items:center;justify-content:center;width:20px;text-align:center;color:var(--sui-text-disabled-300);-webkit-user-select:none;user-select:none}\n"] }]
|
|
1971
1972
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
@@ -2365,7 +2366,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2365
2366
|
* al gap visual (queda pegado al body o al footer según haya footer o no).
|
|
2366
2367
|
*
|
|
2367
2368
|
* Interactive cards:
|
|
2368
|
-
* - [interactive]="true" → cursor pointer, hover lift, focus ring
|
|
2369
|
+
* - [interactive]="true" → cursor pointer, hover lift, focus ring, role=button,
|
|
2370
|
+
* tabindex=0 y teclado: Enter y Espacio disparan un click en el host (fix
|
|
2371
|
+
* 03-10-2026), así el `(click)` / `routerLink` del consumer sirve también
|
|
2372
|
+
* con teclado, igual que un <button>.
|
|
2369
2373
|
* Apply only on cards that act as a single action surface (e.g., a tile that
|
|
2370
2374
|
* navigates). For cards with multiple inner CTAs, leave non-interactive.
|
|
2371
2375
|
*
|
|
@@ -2376,8 +2380,27 @@ class SuiCard {
|
|
|
2376
2380
|
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
2377
2381
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2378
2382
|
interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
|
|
2383
|
+
host = inject(ElementRef);
|
|
2384
|
+
/**
|
|
2385
|
+
* Enter / Espacio sobre la card interactiva → click en el host (dispara el
|
|
2386
|
+
* `(click)` del consumer y un `routerLink` puesto en la card o en un `<a>`
|
|
2387
|
+
* que la envuelve). Solo cuando el foco está EN la card: una tecla dentro
|
|
2388
|
+
* de un campo o botón proyectado es de ese control. `preventDefault` evita
|
|
2389
|
+
* que el Espacio haga scroll; la tecla sostenida (`repeat`) no repite.
|
|
2390
|
+
*/
|
|
2391
|
+
onKeyActivate(event) {
|
|
2392
|
+
if (!this.interactive())
|
|
2393
|
+
return;
|
|
2394
|
+
const el = this.host.nativeElement;
|
|
2395
|
+
if (event.target !== el)
|
|
2396
|
+
return;
|
|
2397
|
+
event.preventDefault();
|
|
2398
|
+
if (event.repeat)
|
|
2399
|
+
return;
|
|
2400
|
+
el.click();
|
|
2401
|
+
}
|
|
2379
2402
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2380
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiCard, isStandalone: true, selector: "sui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "interactive() ? $event.currentTarget : null", "touchend": "interactive() ? $any($event.currentTarget).blur() : null" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-interactive": "interactive() ? \"\" : null", "attr.role": "interactive() ? \"button\" : null", "attr.tabindex": "interactive() ? \"0\" : null" } }, ngImport: i0, template: "<ng-content select=\"[sui-card-header]\" />\n<div class=\"sui-card__body\">\n <ng-content />\n</div>\n<ng-content select=\"[sui-card-media]\" />\n<ng-content select=\"[sui-card-footer]\" />\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-sui-variant=default]){border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-variant=elevated]){border-color:var(--sui-card-elevated-border, transparent);box-shadow:var(--sui-shadow-medium)}:host([data-sui-variant=flat]){border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=small]){--sui-card-padding-x: 16px;padding:16px;gap:12px}:host([data-sui-size=medium]){--sui-card-padding-x: 20px;padding:20px;gap:16px}:host([data-sui-size=large]){--sui-card-padding-x: 24px;padding:24px;gap:20px}:host([data-sui-size=xlarge]){--sui-card-padding-x: 28px;padding:28px;gap:24px}:host([data-sui-interactive]){cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host([data-sui-interactive]:hover){transform:translateY(-1px)}:host([data-sui-interactive][data-sui-variant=default]:hover){border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}:host([data-sui-interactive][data-sui-variant=elevated]:hover){box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}:host([data-sui-interactive][data-sui-variant=flat]:hover){border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-interactive]:active:not(:focus-visible)){transform:scale(.99)}:host([data-sui-interactive]:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-state-information-base, #335cff)}::ng-deep [sui-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}::ng-deep [sui-card-footer]{display:flex;align-items:center;gap:12px}::ng-deep [sui-card-media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:host:has(::ng-deep [sui-card-footer]) ::ng-deep [sui-card-media]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}:host:has(>.sui-card__body:only-child){gap:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: SuiCard, isStandalone: true, selector: "sui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "interactive() ? $event.currentTarget : null", "touchend": "interactive() ? $any($event.currentTarget).blur() : null", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onKeyActivate($event)" }, properties: { "attr.data-sui-variant": "variant()", "attr.data-sui-size": "size()", "attr.data-sui-interactive": "interactive() ? \"\" : null", "attr.role": "interactive() ? \"button\" : null", "attr.tabindex": "interactive() ? \"0\" : null" } }, ngImport: i0, template: "<ng-content select=\"[sui-card-header]\" />\n<div class=\"sui-card__body\">\n <ng-content />\n</div>\n<ng-content select=\"[sui-card-media]\" />\n<ng-content select=\"[sui-card-footer]\" />\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-sui-variant=default]){border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-variant=elevated]){border-color:var(--sui-card-elevated-border, transparent);box-shadow:var(--sui-shadow-medium)}:host([data-sui-variant=flat]){border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=small]){--sui-card-padding-x: 16px;padding:16px;gap:12px}:host([data-sui-size=medium]){--sui-card-padding-x: 20px;padding:20px;gap:16px}:host([data-sui-size=large]){--sui-card-padding-x: 24px;padding:24px;gap:20px}:host([data-sui-size=xlarge]){--sui-card-padding-x: 28px;padding:28px;gap:24px}:host([data-sui-interactive]){cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host([data-sui-interactive]:hover){transform:translateY(-1px)}:host([data-sui-interactive][data-sui-variant=default]:hover){border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}:host([data-sui-interactive][data-sui-variant=elevated]:hover){box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}:host([data-sui-interactive][data-sui-variant=flat]:hover){border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-interactive]:active:not(:focus-visible)){transform:scale(.99)}:host([data-sui-interactive]:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-state-information-base, #335cff)}::ng-deep [sui-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}::ng-deep [sui-card-footer]{display:flex;align-items:center;gap:12px}::ng-deep [sui-card-media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:host:has(::ng-deep [sui-card-footer]) ::ng-deep [sui-card-media]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}:host:has(>.sui-card__body:only-child){gap:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2381
2404
|
}
|
|
2382
2405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCard, decorators: [{
|
|
2383
2406
|
type: Component,
|
|
@@ -2390,6 +2413,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2390
2413
|
/* iOS WKWebView :active fix — solo cuando es interactivo. */
|
|
2391
2414
|
'(touchstart)': 'interactive() ? $event.currentTarget : null',
|
|
2392
2415
|
'(touchend)': 'interactive() ? $any($event.currentTarget).blur() : null',
|
|
2416
|
+
/* Teclado — como un <button>: Enter y Espacio activan la card. */
|
|
2417
|
+
'(keydown.enter)': 'onKeyActivate($event)',
|
|
2418
|
+
'(keydown.space)': 'onKeyActivate($event)',
|
|
2393
2419
|
}, template: "<ng-content select=\"[sui-card-header]\" />\n<div class=\"sui-card__body\">\n <ng-content />\n</div>\n<ng-content select=\"[sui-card-media]\" />\n<ng-content select=\"[sui-card-footer]\" />\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),transform var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-sui-variant=default]){border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-variant=elevated]){border-color:var(--sui-card-elevated-border, transparent);box-shadow:var(--sui-shadow-medium)}:host([data-sui-variant=flat]){border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=small]){--sui-card-padding-x: 16px;padding:16px;gap:12px}:host([data-sui-size=medium]){--sui-card-padding-x: 20px;padding:20px;gap:16px}:host([data-sui-size=large]){--sui-card-padding-x: 24px;padding:24px;gap:20px}:host([data-sui-size=xlarge]){--sui-card-padding-x: 28px;padding:28px;gap:24px}:host([data-sui-interactive]){cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host([data-sui-interactive]:hover){transform:translateY(-1px)}:host([data-sui-interactive][data-sui-variant=default]:hover){border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}:host([data-sui-interactive][data-sui-variant=elevated]:hover){box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}:host([data-sui-interactive][data-sui-variant=flat]:hover){border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-interactive]:active:not(:focus-visible)){transform:scale(.99)}:host([data-sui-interactive]:focus-visible){box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-state-information-base, #335cff)}::ng-deep [sui-card-header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}::ng-deep [sui-card-footer]{display:flex;align-items:center;gap:12px}::ng-deep [sui-card-media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}:host:has(::ng-deep [sui-card-footer]) ::ng-deep [sui-card-media]{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}:host:has(>.sui-card__body:only-child){gap:0}\n"] }]
|
|
2394
2420
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
|
|
2395
2421
|
|
|
@@ -5119,7 +5145,7 @@ class SuiDropdownItem {
|
|
|
5119
5145
|
this.clicked.emit(event);
|
|
5120
5146
|
}
|
|
5121
5147
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5122
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownItem, isStandalone: true, selector: "sui-dropdown-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leadingFramed: { classPropertyName: "leadingFramed", publicName: "leadingFramed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "mode() === \"option\" ? \"option\" : \"menuitem\"", "attr.data-sui-mode": "mode()", "attr.data-sui-size": "size()", "attr.data-sui-framed": "leadingFramed() ? \"\" : null", "attr.data-sui-selected": "selected() ? \"\" : null", "attr.data-sui-highlighted": "highlighted() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-selected": "mode() === \"option\" ? (selected() ? \"true\" : \"false\") : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-
|
|
5148
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDropdownItem, isStandalone: true, selector: "sui-dropdown-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leadingFramed: { classPropertyName: "leadingFramed", publicName: "leadingFramed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)", "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()" }, properties: { "attr.role": "mode() === \"option\" ? \"option\" : \"menuitem\"", "attr.data-sui-mode": "mode()", "attr.data-sui-size": "size()", "attr.data-sui-framed": "leadingFramed() ? \"\" : null", "attr.data-sui-selected": "selected() ? \"\" : null", "attr.data-sui-highlighted": "highlighted() ? \"\" : null", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.aria-selected": "mode() === \"option\" ? (selected() ? \"true\" : \"false\") : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "disabled() ? \"-1\" : \"0\"" } }, ngImport: i0, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:6px 8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{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, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{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, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5123
5149
|
}
|
|
5124
5150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDropdownItem, decorators: [{
|
|
5125
5151
|
type: Component,
|
|
@@ -5139,7 +5165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5139
5165
|
'(keydown.space)': 'onClick($event)',
|
|
5140
5166
|
'(touchstart)': '$event.currentTarget',
|
|
5141
5167
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
5142
|
-
}, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-weight:var(--sui-type-label-
|
|
5168
|
+
}, template: "<div class=\"sui-dropdown-item__leading\">\n <ng-content select=\"[slot=leading]\" />\n</div>\n\n<div class=\"sui-dropdown-item__text\">\n <span class=\"sui-dropdown-item__label\">{{ label() }}</span>\n @if (hasSublabel()) {\n <span class=\"sui-dropdown-item__sublabel\">{{ sublabel() }}</span>\n }\n @if (hasDescription()) {\n <span class=\"sui-dropdown-item__description\">{{ description() }}</span>\n }\n</div>\n\n<div class=\"sui-dropdown-item__trailing\">\n <!-- Canon trailing-slot (Figma 405:6432): el consumer proyecta en este orden DOM\n fijo \u2192 badge primero, luego shortcut (provisto por el input shortcut() abajo),\n luego toggle/button al final. El gap del flex (8px) los separa.\n Pill button (variante Large): bg primary-alpha-10, p-6, radius-8, label primary\n Inter Medium 14/20. Link button (variante Small): texto primary sin bg.\n El componente no fija sublots \u2014 el orden lo controla el consumer seg\u00FAn este\n patr\u00F3n para mantener consistencia visual vs Figma. -->\n <ng-content select=\"[slot=trailing]\" />\n @if (shortcut()) {\n <span class=\"sui-dropdown-item__shortcut\">{{ shortcut() }}</span>\n }\n @if (showCheck()) {\n <!-- Check icon autom\u00E1tico en mode='option' cuando selected=true.\n Remixicon check-line (ri-check-line) v\u00EDa sui-icon \u2014 mismo glyph que\n el resto del proyecto, color heredado de .sui-dropdown-item__check. -->\n <sui-icon class=\"sui-dropdown-item__check\" name=\"check-line\" [size]=\"20\" />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:8px;padding:8px;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-8, 8px);cursor:pointer;outline:none;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);transition:background .1s ease-out,box-shadow .1s ease-out;-webkit-user-select:none;user-select:none}:host:hover{background:var(--sui-bg-weak-50)}:host:active:not([data-sui-disabled]),:host:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host([data-sui-size=small]){min-height:36px;padding:8px;gap:8px}:host([data-sui-size=large]){min-height:56px;padding:6px 8px;gap:12px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=large]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=large]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]){min-height:76px;padding:8px;gap:16px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-size=xlarge]) .sui-dropdown-item__text{flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-size=xlarge]) .sui-dropdown-item__label{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);font-weight:var(--sui-type-label-md-weight, 500)}:host([data-sui-size=xlarge]) .sui-dropdown-item__description{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, -.006em)}.sui-dropdown-item__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-dropdown-item__leading:empty{display:none}:host([data-sui-size=large][data-sui-framed]) .sui-dropdown-item__leading,:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}:host([data-sui-size=xlarge][data-sui-framed]) .sui-dropdown-item__leading{padding:12px}.sui-dropdown-item__text{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-dropdown-item__label{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, -.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-dropdown-item__sublabel{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400);flex-shrink:0}.sui-dropdown-item__description{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-sub-600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-dropdown-item__trailing{flex-shrink:0;display:inline-flex;align-items:center;gap:8px}.sui-dropdown-item__trailing:empty{display:none}.sui-dropdown-item__shortcut{display:inline-flex;align-items:center;padding:2px 6px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4, 4px);font-family:var(--sui-font-sans);font-size:12px;line-height:16px;font-weight:500;color:var(--sui-text-sub-600);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}:host([data-sui-mode=option][data-sui-selected]){background:var(--sui-primary-alpha-10)}:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__label,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__sublabel,:host([data-sui-mode=option][data-sui-selected]) .sui-dropdown-item__check{color:var(--sui-primary-base)}:host([data-sui-mode=option][data-sui-selected]):hover{background:var(--sui-primary-alpha-16)}.sui-dropdown-item__check{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base)}:host([data-sui-highlighted]:not([data-sui-selected])){background:var(--sui-bg-weak-50)}:host([data-sui-disabled]){cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-dropdown-item__label,:host([data-sui-disabled]) .sui-dropdown-item__sublabel,:host([data-sui-disabled]) .sui-dropdown-item__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-dropdown-item__leading{color:var(--sui-icon-disabled-300, #d1d1d1)}:host([data-sui-disabled]) .sui-dropdown-item__leading>:not(sui-icon){opacity:.48}:host([data-sui-disabled]):hover{background:var(--sui-bg-white-0)}\n"] }]
|
|
5143
5169
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leadingFramed: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingFramed", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
5144
5170
|
|
|
5145
5171
|
class SuiCompactSelectForInput {
|
|
@@ -5232,7 +5258,7 @@ class SuiCompactSelectForInput {
|
|
|
5232
5258
|
useExisting: forwardRef(() => SuiCompactSelectForInput),
|
|
5233
5259
|
multi: true,
|
|
5234
5260
|
},
|
|
5235
|
-
], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (country() && displayFlag()) {\n <sui-flag\n class=\"sui-compact-select-for-input__flag\"\n [name]=\"displayFlag()!\"\n [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"hostEl\"\n [disabled]=\"mergedDisabled()\"\n [matchWidth]=\"true\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select-for-input__menu\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:400;line-height:20px;letter-spacing
|
|
5261
|
+
], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if (country() && displayFlag()) {\n <sui-flag\n class=\"sui-compact-select-for-input__flag\"\n [name]=\"displayFlag()!\"\n [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"hostEl\"\n [disabled]=\"mergedDisabled()\"\n [matchWidth]=\"true\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select-for-input__menu\" [class.sui-compact-select-for-input__menu--large]=\"size() === 'large'\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:9px 8px 9px 10px;gap:8px}:host([data-sui-size=small]){padding:7px 8px;gap:8px}:host([data-sui-size=xsmall]){padding:5px 6px 5px 8px;gap:6px}:host([data-sui-size=large]){padding:11px 10px 11px 12px;gap:8px;font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select-for-input__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select-for-input__menu:not(.sui-compact-select-for-input__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}:host(:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus:not([data-sui-disabled])),:host([data-sui-open]:not([data-sui-disabled])){outline:none;background:var(--sui-bg-white-0, #fff)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-compact-select-for-input__flag{opacity:.48}:host([data-sui-disabled]) .sui-compact-select-for-input__arrow{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select-for-input__flag{flex-shrink:0}.sui-compact-select-for-input__inner{display:inline-flex;align-items:center;gap:var(--sui-spacing-2, 2px);flex-shrink:0}.sui-compact-select-for-input__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-compact-select-for-input__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select-for-input__menu{display:flex;flex-direction:column;gap:4px}\n"], dependencies: [{ 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: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5236
5262
|
}
|
|
5237
5263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactSelectForInput, decorators: [{
|
|
5238
5264
|
type: Component,
|
|
@@ -5258,7 +5284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5258
5284
|
'(click)': 'onHostClick($event)',
|
|
5259
5285
|
'(keydown.enter)': 'onHostClick($event)',
|
|
5260
5286
|
'(keydown.space)': 'onHostClick($event); $event.preventDefault()',
|
|
5261
|
-
}, template: "@if (country() && displayFlag()) {\n <sui-flag\n class=\"sui-compact-select-for-input__flag\"\n [name]=\"displayFlag()!\"\n [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"hostEl\"\n [disabled]=\"mergedDisabled()\"\n [matchWidth]=\"true\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select-for-input__menu\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:400;line-height:20px;letter-spacing
|
|
5287
|
+
}, template: "@if (country() && displayFlag()) {\n <sui-flag\n class=\"sui-compact-select-for-input__flag\"\n [name]=\"displayFlag()!\"\n [size]=\"flagSizePx() === 16 ? 'xs' : 'sm'\"\n />\n}\n\n<div class=\"sui-compact-select-for-input__inner\">\n <span class=\"sui-compact-select-for-input__value\">{{ displayValue() }}</span>\n <sui-icon class=\"sui-compact-select-for-input__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"hostEl\"\n [disabled]=\"mergedDisabled()\"\n [matchWidth]=\"true\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select-for-input__menu\" [class.sui-compact-select-for-input__menu--large]=\"size() === 'large'\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;vertical-align:middle;transition:background-color .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:9px 8px 9px 10px;gap:8px}:host([data-sui-size=small]){padding:7px 8px;gap:8px}:host([data-sui-size=xsmall]){padding:5px 6px 5px 8px;gap:6px}:host([data-sui-size=large]){padding:11px 10px 11px 12px;gap:8px;font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select-for-input__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select-for-input__menu:not(.sui-compact-select-for-input__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}:host(:hover:not([data-sui-disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus:not([data-sui-disabled])),:host([data-sui-open]:not([data-sui-disabled])){outline:none;background:var(--sui-bg-white-0, #fff)}:host([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]) .sui-compact-select-for-input__flag{opacity:.48}:host([data-sui-disabled]) .sui-compact-select-for-input__arrow{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select-for-input__flag{flex-shrink:0}.sui-compact-select-for-input__inner{display:inline-flex;align-items:center;gap:var(--sui-spacing-2, 2px);flex-shrink:0}.sui-compact-select-for-input__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-compact-select-for-input__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select-for-input__menu{display:flex;flex-direction:column;gap:4px}\n"] }]
|
|
5262
5288
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }] } });
|
|
5263
5289
|
|
|
5264
5290
|
class SuiCompactSelect {
|
|
@@ -5389,7 +5415,7 @@ class SuiCompactSelect {
|
|
|
5389
5415
|
useExisting: forwardRef(() => SuiCompactSelect),
|
|
5390
5416
|
multi: true,
|
|
5391
5417
|
},
|
|
5392
|
-
], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n #triggerEl\n class=\"sui-compact-select__trigger\"\n role=\"button\"\n [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n [class.sui-compact-select__trigger--open]=\"isOpen()\"\n [class.sui-compact-select__trigger--error]=\"error()\"\n [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n (click)=\"onTriggerClick($event)\"\n (keydown.enter)=\"onTriggerClick($event)\"\n (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n @switch (type()) {\n @case ('icon') {\n @if (displayIcon()) {\n <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n }\n }\n @case ('country') {\n @if (displayFlag()) {\n <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n }\n }\n }\n\n <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n @if (type() !== 'icon') {\n <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n {{ hasValue() ? displayValue() : placeholder() }}\n </span>\n }\n\n <!-- Trailing arrow. -->\n <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n [origin]=triggerEl; el menu solo gestiona el panel.\n Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"mergedDisabled()\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select__menu\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n } @else if (item.icon) {\n <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"], dependencies: [{ 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: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5418
|
+
], viewQueries: [{ propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n #triggerEl\n class=\"sui-compact-select__trigger\"\n role=\"button\"\n [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n [class.sui-compact-select__trigger--open]=\"isOpen()\"\n [class.sui-compact-select__trigger--error]=\"error()\"\n [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n (click)=\"onTriggerClick($event)\"\n (keydown.enter)=\"onTriggerClick($event)\"\n (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n @switch (type()) {\n @case ('icon') {\n @if (displayIcon()) {\n <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n }\n }\n @case ('country') {\n @if (displayFlag()) {\n <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n }\n }\n }\n\n <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n @if (type() !== 'icon') {\n <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n {{ hasValue() ? displayValue() : placeholder() }}\n </span>\n }\n\n <!-- Trailing arrow. -->\n <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n [origin]=triggerEl; el menu solo gestiona el panel.\n Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"mergedDisabled()\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select__menu\" [class.sui-compact-select__menu--large]=\"size() === 'large'\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n } @else if (item.icon) {\n <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}:host([data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px);font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px 11px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select__menu:not(.sui-compact-select__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"], dependencies: [{ 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: SuiDropdownItem, selector: "sui-dropdown-item", inputs: ["label", "sublabel", "description", "size", "leadingFramed", "mode", "selected", "highlighted", "disabled", "shortcut"], outputs: ["clicked"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5393
5419
|
}
|
|
5394
5420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCompactSelect, decorators: [{
|
|
5395
5421
|
type: Component,
|
|
@@ -5414,7 +5440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5414
5440
|
'[attr.data-sui-disabled]': 'mergedDisabled() ? "" : null',
|
|
5415
5441
|
'[attr.data-sui-open]': 'isOpen() ? "" : null',
|
|
5416
5442
|
'[attr.data-sui-filled]': 'hasValue() ? "" : null',
|
|
5417
|
-
}, template: "<!--\n Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n #triggerEl\n class=\"sui-compact-select__trigger\"\n role=\"button\"\n [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n [class.sui-compact-select__trigger--open]=\"isOpen()\"\n [class.sui-compact-select__trigger--error]=\"error()\"\n [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n (click)=\"onTriggerClick($event)\"\n (keydown.enter)=\"onTriggerClick($event)\"\n (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n @switch (type()) {\n @case ('icon') {\n @if (displayIcon()) {\n <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n }\n }\n @case ('country') {\n @if (displayFlag()) {\n <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n }\n }\n }\n\n <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n @if (type() !== 'icon') {\n <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n {{ hasValue() ? displayValue() : placeholder() }}\n </span>\n }\n\n <!-- Trailing arrow. -->\n <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n [origin]=triggerEl; el menu solo gestiona el panel.\n Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"mergedDisabled()\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select__menu\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n } @else if (item.icon) {\n <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"] }]
|
|
5443
|
+
}, template: "<!--\n Trigger DIV interno \u2014 patr\u00F3n canon sui-select. La interacci\u00F3n\n (click/keyboard/role/aria/tabindex) y el anclaje del overlay viven ac\u00E1, NO\n en el host. El host custom-element NO debe colgar (click)+(touchend\u2192blur)\n porque el blur() s\u00EDncrono en touchend cancela el click sint\u00E9tico de iOS\n WebKit y el menu no abre. Moverlo a un div interno sin touch handlers\n elimina la causa ra\u00EDz por equivalencia con sui-select (probado en iOS real).\n-->\n<div\n #triggerEl\n class=\"sui-compact-select__trigger\"\n role=\"button\"\n [attr.tabindex]=\"mergedDisabled() ? null : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"mergedDisabled() ? '' : null\"\n [class.sui-compact-select__trigger--open]=\"isOpen()\"\n [class.sui-compact-select__trigger--error]=\"error()\"\n [class.sui-compact-select__trigger--disabled]=\"mergedDisabled()\"\n (click)=\"onTriggerClick($event)\"\n (keydown.enter)=\"onTriggerClick($event)\"\n (keydown.space)=\"onTriggerClick($event); $event.preventDefault()\"\n>\n <!-- Leading slot seg\u00FAn type. Prioriza el selected item; sino usa el input est\u00E1tico. -->\n @switch (type()) {\n @case ('icon') {\n @if (displayIcon()) {\n <sui-icon class=\"sui-compact-select__leading\" [name]=\"displayIcon()!\" [size]=\"20\" />\n }\n }\n @case ('country') {\n @if (displayFlag()) {\n <sui-flag class=\"sui-compact-select__leading\" [name]=\"displayFlag()!\" [size]=\"flagSize()\" />\n }\n }\n }\n\n <!-- Value / placeholder text (basic + country muestran texto; icon usualmente sin). -->\n @if (type() !== 'icon') {\n <span class=\"sui-compact-select__value\" [attr.data-sui-placeholder]=\"hasValue() ? null : ''\">\n {{ hasValue() ? displayValue() : placeholder() }}\n </span>\n }\n\n <!-- Trailing arrow. -->\n <sui-icon class=\"sui-compact-select__arrow\" [name]=\"arrowIcon()\" [size]=\"20\" />\n</div>\n\n<!-- Overlay menu \u2014 delegado a sui-dropdown-menu. El trigger DIV interno es el\n [origin]=triggerEl; el menu solo gestiona el panel.\n Solo se renderea cuando hay items (mode 2). -->\n@if (items().length > 0) {\n <sui-dropdown-menu\n [origin]=\"triggerEl\"\n [disabled]=\"mergedDisabled()\"\n [minWidth]=\"200\"\n panelClass=\"sui-compact-select__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <div class=\"sui-compact-select__menu\" [class.sui-compact-select__menu--large]=\"size() === 'large'\">\n @for (item of items(); track item.value) {\n <sui-dropdown-item\n mode=\"option\"\n [label]=\"item.label\"\n [sublabel]=\"item.sublabel ?? ''\"\n [selected]=\"item.value === selected()?.value\"\n [disabled]=\"item.disabled ?? false\"\n (click)=\"selectItem(item)\"\n >\n @if (item.flag) {\n <sui-flag slot=\"leading\" [name]=\"item.flag\" size=\"sm\" />\n } @else if (item.icon) {\n <sui-icon slot=\"leading\" [name]=\"item.icon\" [size]=\"20\" />\n }\n </sui-dropdown-item>\n }\n </div>\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px #0a0d1408;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}:host([data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-type=basic][data-sui-size=medium]) .sui-compact-select__trigger{padding:9px 10px 9px 12px}:host([data-sui-type=basic][data-sui-size=small]) .sui-compact-select__trigger{padding:7px 8px 7px 12px}:host([data-sui-type=basic][data-sui-size=xsmall]) .sui-compact-select__trigger{padding:5px 6px 5px 10px}:host([data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px);font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:11px 12px 11px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-compact-select__menu--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-compact-select__menu:not(.sui-compact-select__menu--large) sui-dropdown-item{min-height:44px;padding:12px 8px}}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .16))}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, .16))}.sui-compact-select__trigger--disabled{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled .sui-compact-select__leading{opacity:.48}.sui-compact-select__trigger--disabled .sui-compact-select__arrow{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-filled]) .sui-compact-select__leading{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled .sui-compact-select__value[data-sui-placeholder]{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform .12s ease}\n"] }]
|
|
5418
5444
|
}], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], _menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiDropdownMenu), { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }] } });
|
|
5419
5445
|
|
|
5420
5446
|
/** Set de los 9 colores SUI 2.0 para iterar desde el consumer (previews, demos). */
|
|
@@ -5730,73 +5756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5730
5756
|
}, template: "@if (hasLeading()) {\n <div class=\"sui-content-label__leading\">\n @switch (type()) {\n @case ('left-icon') {\n @if (icon(); as i) {\n <sui-key-icon [name]=\"i\" [size]=\"keyIconSize()\" styleVariant=\"stroke\" color=\"gray\" />\n }\n }\n\n @case ('avatar') {\n <sui-avatar\n [size]=\"avatarSize()\"\n [src]=\"avatarCfg()?.src ?? null\"\n [initials]=\"avatarCfg()?.initials ?? ''\"\n [color]=\"avatarCfg()?.color ?? 'slate'\"\n [alt]=\"label()\"\n />\n }\n\n @case ('company') {\n <sui-avatar\n [size]=\"avatarSize()\"\n [src]=\"avatarCfg()?.src ?? null\"\n [initials]=\"avatarCfg()?.initials ?? ''\"\n [color]=\"avatarCfg()?.color ?? 'slate'\"\n [alt]=\"label()\"\n [companyLogoSrc]=\"companyLogoSrc()\"\n [status]=\"companyLogoSrc() ? 'company' : null\"\n />\n }\n\n @case ('brand') {\n @if (brand(); as b) {\n <sui-brand-logo [company]=\"b\" [size]=\"brandLogoSize()\" />\n }\n }\n }\n </div>\n}\n\n<div class=\"sui-content-label__text\">\n <div class=\"sui-content-label__title-row\">\n <span class=\"sui-content-label__label\">{{ label() }}</span>\n @if (sublabel()) {\n <span class=\"sui-content-label__sublabel\">{{ sublabel() }}</span>\n }\n @if (badgePlacement() === 'title' && badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-content-label__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'medium'\"\n [disabled]=\"disabled()\"\n >\n {{ bcfg.label }}\n </sui-badge>\n }\n </div>\n @if (description()) {\n <span class=\"sui-content-label__description\">{{ description() }}</span>\n }\n</div>\n\n@if (badgePlacement() === 'trailing' && badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-content-label__badge sui-content-label__badge--trailing\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'medium'\"\n [disabled]=\"disabled()\"\n >\n {{ bcfg.label }}\n </sui-badge>\n}\n\n@if (toggle()) {\n <sui-switch\n class=\"sui-content-label__toggle\"\n size=\"medium\"\n [checked]=\"toggleChecked()\"\n [disabled]=\"disabled()\"\n (checkedChange)=\"onToggleChange($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-content-label__leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.sui-content-label__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}.sui-content-label__title-row{display:flex;align-items:center;gap:4px;min-width:0}.sui-content-label__label{min-width:0;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-content-label__sublabel{flex-shrink:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600);white-space:nowrap}.sui-content-label__description{font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600);overflow-wrap:break-word}:host([data-sui-size=large]) .sui-content-label__label{font-size:var(--sui-type-label-md-size);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large]) .sui-content-label__description{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}.sui-content-label__badge,.sui-content-label__toggle{flex-shrink:0}:host([data-sui-disabled]) .sui-content-label__label{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-content-label__sublabel,:host([data-sui-disabled]) .sui-content-label__description{color:var(--sui-text-disabled-300)}:host([data-sui-disabled]) .sui-content-label__leading{opacity:.5}\n"] }]
|
|
5731
5757
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], companyLogoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "companyLogoSrc", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgePlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgePlacement", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], toggleChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleChecked", required: false }] }], toggleCheckedChange: [{ type: i0.Output, args: ["toggleCheckedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
5732
5758
|
|
|
5733
|
-
/**
|
|
5734
|
-
* SUI Content Card — SUI Design System 2.0
|
|
5735
|
-
*
|
|
5736
|
-
* Figma file: 8p1k72aKKvzJV4XcvPS4VO — set "Content Card [1.1]" nodo 2942:9503
|
|
5737
|
-
* (FIGMA-VERIFIED 2026-07-23: metadata + design context + screenshot del set;
|
|
5738
|
-
* cierra el ⚠️ "referencia no verificada" del 2026-05-29 — el nodo real SÍ vive
|
|
5739
|
-
* en este fileKey). 6 variants = Type(Basic | Left Icon | Avatar | Card Provider
|
|
5740
|
-
* | Brand | Company), un solo size (row de 40px, frames de ejemplo 360×72).
|
|
5741
|
-
*
|
|
5742
|
-
* Es el Content Label (set 2945:5539) envuelto en una card — este componente
|
|
5743
|
-
* COMPONE <sui-content-label size="medium" badgePlacement="title"> (la deuda
|
|
5744
|
-
* "extraer el row a sui-content-label" del 2026-05-29 quedó saldada).
|
|
5745
|
-
*
|
|
5746
|
-
* EXACT (design context de 2942:9504/9512/9530 + screenshot):
|
|
5747
|
-
* card → bg white-0, border 1px stroke-soft-200, radius-12, padding 16,
|
|
5748
|
-
* shadow x-small, flex row gap 14 items-center
|
|
5749
|
-
* text block → flex-col gap 4; title row gap 4 (rendereado por sui-content-label)
|
|
5750
|
-
* title → Inter Medium 14/20 ls -0.084px, text/strong-950 (Label/Small)
|
|
5751
|
-
* sublabel → Inter Regular 12/16, text/sub-600 — inline al lado del título
|
|
5752
|
-
* subtitle → Inter Regular 12/16, text/sub-600 (Paragraph/X Small) — la
|
|
5753
|
-
* "description" del label (el nodo 2945 la llama description)
|
|
5754
|
-
* badge → inline en el title row DESPUÉS del sublabel; Badge px-8 py-2
|
|
5755
|
-
* radius-full, texto Inter Medium 11/12 UPPERCASE tracking 0.22px
|
|
5756
|
-
* (Subheading/2X Small) = sui-badge size="small". Figma: bg
|
|
5757
|
-
* state/information/light #c0d5ff + texto state/information/dark
|
|
5758
|
-
* #122368 (= color "blue"); fallback del proyecto = 'orange'.
|
|
5759
|
-
* left-icon → instancia "Key Icons [1.1]" stroke 40px (p-10 + icono 20,
|
|
5760
|
-
* radius-full, border stroke-soft-200, shadow x-small)
|
|
5761
|
-
* avatar → sui-avatar 40px (= size lg; ojo: md es 32px)
|
|
5762
|
-
* brand → logo de marca RAW 40px, SIN caja (Spotify en el set)
|
|
5763
|
-
* company → círculo de empresa 40px (Synergy en el set)
|
|
5764
|
-
* card-provider → tile 32×24 radius-4 con la marca de la tarjeta (Mastercard
|
|
5765
|
-
* en el set, asset con bg #252525 propio)
|
|
5766
|
-
* X dismiss → close-line 20px a la derecha (gap 14 del row)
|
|
5767
|
-
*
|
|
5768
|
-
* Correcciones aplicadas en la verificación 2026-07-23 (antes inferido ≠ Figma):
|
|
5769
|
-
* - gap del row 12 → 14 · gap del text block 2 → 4 · gap del title row 6 → 4
|
|
5770
|
-
* - subtitle 14/20 (Paragraph/Small) → 12/16 (Paragraph/X Small)
|
|
5771
|
-
* - left-icon: cuadro 40×40 radius-10 → sui-key-icon circular (radius-full)
|
|
5772
|
-
* - avatar: size md (32px) → lg (40px)
|
|
5773
|
-
* - brand: cuadro con borde → logo raw 40px sin caja
|
|
5774
|
-
* - card-provider: 40×28 radius-6 → 32×24 radius-4
|
|
5775
|
-
* - nuevo input `sublabel` (el set lo trae en el title row; faltaba)
|
|
5776
|
-
*
|
|
5777
|
-
* Adaptaciones deliberadas (documentadas, NO son drift):
|
|
5778
|
-
* - card-provider: el asset de Figma es el tile Mastercard con bg #252525
|
|
5779
|
-
* propio del arte. Sin card-tiles como asset en la lib, se renderiza el
|
|
5780
|
-
* brand logo centrado en un tile blanco 32×24 con borde stroke-soft-200.
|
|
5781
|
-
* - Badge fallback color 'orange' (branding del proyecto; el DS usa blue).
|
|
5782
|
-
* Cualquier consumer pasa `[badge]="{ label: 'X', color: 'blue' }"`.
|
|
5783
|
-
* - X dismiss hover/active: hover → bg-weak-50 + icon strong-950, active →
|
|
5784
|
-
* scale(0.96). INFERIDO, el set no publica estados del botón. PRESERVAR.
|
|
5785
|
-
* - disabled: extensión del proyecto (el set no publica eje State); tokens
|
|
5786
|
-
* disabled-300 por consistencia con sui-badge/sui-form-label.
|
|
5787
|
-
*
|
|
5788
|
-
* iOS :active — el botón X es clickeable custom: lleva (touchstart)/(touchend)
|
|
5789
|
-
* para liberar el estado active en WKWebView (regla del proyecto).
|
|
5790
|
-
*
|
|
5791
|
-
* Usage:
|
|
5792
|
-
* <sui-content-card type="left-icon" icon="bank-card-line"
|
|
5793
|
-
* title="Visa **** 4242" subtitle="Expira 09/27"
|
|
5794
|
-
* badge="Principal" (dismiss)="onRemove()" />
|
|
5795
|
-
* <sui-content-card type="avatar" [avatar]="{ src: user.photo, initials: 'AT' }"
|
|
5796
|
-
* title="Ana Torres" sublabel="(Admin)" subtitle="ana@correo.com" />
|
|
5797
|
-
* <sui-content-card type="brand" brand="stripe" title="Stripe" subtitle="Conectado"
|
|
5798
|
-
* [badge]="{ label: 'Activo', color: 'green' }" />
|
|
5799
|
-
*/
|
|
5800
5759
|
class SuiContentCard {
|
|
5801
5760
|
/** Tipo de leading visual. */
|
|
5802
5761
|
type = input('basic', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
@@ -5840,6 +5799,13 @@ class SuiContentCard {
|
|
|
5840
5799
|
dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
|
|
5841
5800
|
/** aria-label del botón X. */
|
|
5842
5801
|
dismissAriaLabel = input('Descartar', ...(ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []));
|
|
5802
|
+
/**
|
|
5803
|
+
* Tamaño de la X de quitar (la fila no cambia: sigue en 72).
|
|
5804
|
+
* `medium` (default, Figma): 20 × 20 sin área extra.
|
|
5805
|
+
* `large` — extensión SUI (03-10-2026) para mobile: caja de 32 × 32 con el
|
|
5806
|
+
* glyph en 20 y un área táctil invisible de 40 × 40.
|
|
5807
|
+
*/
|
|
5808
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
5843
5809
|
/**
|
|
5844
5810
|
* Estado deshabilitado: atenúa contenido a tokens disabled-300, deshabilita el
|
|
5845
5811
|
* badge y el botón X (sin pointer-events), y setea aria-disabled en el host.
|
|
@@ -5862,7 +5828,7 @@ class SuiContentCard {
|
|
|
5862
5828
|
this.dismiss.emit(event);
|
|
5863
5829
|
}
|
|
5864
5830
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiContentCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5865
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiContentCard, isStandalone: true, selector: "sui-content-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, companyLogoSrc: { classPropertyName: "companyLogoSrc", publicName: "companyLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissAriaLabel: { classPropertyName: "dismissAriaLabel", publicName: "dismissAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"group\"", "attr.aria-label": "title() || null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<!-- card-provider no existe en el set del Content Label (2945:5539): la card\n renderiza ese leading (tile 32\u00D724) y delega el resto al label en 'basic'. -->\n@if (type() === 'card-provider') {\n <div class=\"sui-content-card__card-box\">\n @if (brand(); as b) {\n <sui-brand-logo [company]=\"b\" size=\"sm\" />\n }\n </div>\n}\n\n<sui-content-label\n class=\"sui-content-card__label\"\n [type]=\"labelType()\"\n size=\"medium\"\n [label]=\"title()\"\n [sublabel]=\"sublabel()\"\n [description]=\"subtitle()\"\n [icon]=\"icon()\"\n [avatar]=\"avatar()\"\n [companyLogoSrc]=\"companyLogoSrc()\"\n [brand]=\"brand()\"\n [badge]=\"badgeCfg()\"\n badgePlacement=\"title\"\n [disabled]=\"disabled()\"\n/>\n\n@if (dismissible()) {\n <button\n type=\"button\"\n class=\"sui-content-card__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onDismiss($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-shadow-x-small);font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-content-card__label{flex:1 1 0;min-width:0}.sui-content-card__card-box{box-sizing:border-box;flex-shrink:0;width:32px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4)}.sui-content-card__dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;width:20px;height:20px;background:transparent;border:0;border-radius:var(--sui-radius-4);color:var(--sui-icon-sub-600);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease,transform .12s ease}.sui-content-card__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-content-card__dismiss:active{transform:scale(.96)}.sui-content-card__dismiss:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-content-card__dismiss:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]){pointer-events:none}:host([data-sui-disabled]) .sui-content-card__card-box{opacity:.5}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBrandLogo, selector: "sui-brand-logo", inputs: ["company", "variant", "size", "href", "target", "rel", "disabled", "ariaLabel"] }, { kind: "component", type: SuiContentLabel, selector: "sui-content-label", inputs: ["type", "size", "label", "sublabel", "description", "icon", "avatar", "companyLogoSrc", "brand", "badge", "badgePlacement", "toggle", "toggleChecked", "disabled"], outputs: ["toggleCheckedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5831
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiContentCard, isStandalone: true, selector: "sui-content-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, companyLogoSrc: { classPropertyName: "companyLogoSrc", publicName: "companyLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissAriaLabel: { classPropertyName: "dismissAriaLabel", publicName: "dismissAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "attr.title": "null", "attr.data-sui-type": "type()", "attr.data-sui-size": "size()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"group\"", "attr.aria-label": "title() || null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: "<!-- card-provider no existe en el set del Content Label (2945:5539): la card\n renderiza ese leading (tile 32\u00D724) y delega el resto al label en 'basic'. -->\n@if (type() === 'card-provider') {\n <div class=\"sui-content-card__card-box\">\n @if (brand(); as b) {\n <sui-brand-logo [company]=\"b\" size=\"sm\" />\n }\n </div>\n}\n\n<sui-content-label\n class=\"sui-content-card__label\"\n [type]=\"labelType()\"\n size=\"medium\"\n [label]=\"title()\"\n [sublabel]=\"sublabel()\"\n [description]=\"subtitle()\"\n [icon]=\"icon()\"\n [avatar]=\"avatar()\"\n [companyLogoSrc]=\"companyLogoSrc()\"\n [brand]=\"brand()\"\n [badge]=\"badgeCfg()\"\n badgePlacement=\"title\"\n [disabled]=\"disabled()\"\n/>\n\n@if (dismissible()) {\n <button\n type=\"button\"\n class=\"sui-content-card__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onDismiss($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-shadow-x-small);font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-content-card__label{flex:1 1 0;min-width:0}.sui-content-card__card-box{box-sizing:border-box;flex-shrink:0;width:32px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4)}.sui-content-card__dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;width:20px;height:20px;background:transparent;border:0;border-radius:var(--sui-radius-4);color:var(--sui-icon-sub-600);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease,transform .12s ease}.sui-content-card__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-content-card__dismiss:active{transform:scale(.96)}.sui-content-card__dismiss:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-content-card__dismiss:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none}:host([data-sui-size=large]) .sui-content-card__dismiss{position:relative;width:32px;height:32px;border-radius:var(--sui-radius-8, 8px);margin:-6px -6px -6px 0}:host([data-sui-size=large]) .sui-content-card__dismiss:before{content:\"\";position:absolute;inset:-4px}:host([data-sui-disabled]){pointer-events:none}:host([data-sui-disabled]) .sui-content-card__card-box{opacity:.5}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBrandLogo, selector: "sui-brand-logo", inputs: ["company", "variant", "size", "href", "target", "rel", "disabled", "ariaLabel"] }, { kind: "component", type: SuiContentLabel, selector: "sui-content-label", inputs: ["type", "size", "label", "sublabel", "description", "icon", "avatar", "companyLogoSrc", "brand", "badge", "badgePlacement", "toggle", "toggleChecked", "disabled"], outputs: ["toggleCheckedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5866
5832
|
}
|
|
5867
5833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiContentCard, decorators: [{
|
|
5868
5834
|
type: Component,
|
|
@@ -5872,12 +5838,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
5872
5838
|
el tooltip nativo gris del browser. */
|
|
5873
5839
|
'[attr.title]': 'null',
|
|
5874
5840
|
'[attr.data-sui-type]': 'type()',
|
|
5841
|
+
'[attr.data-sui-size]': 'size()',
|
|
5875
5842
|
'[attr.data-sui-disabled]': 'disabled() ? "" : null',
|
|
5876
5843
|
'[attr.role]': '"group"',
|
|
5877
5844
|
'[attr.aria-label]': 'title() || null',
|
|
5878
5845
|
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
5879
|
-
}, template: "<!-- card-provider no existe en el set del Content Label (2945:5539): la card\n renderiza ese leading (tile 32\u00D724) y delega el resto al label en 'basic'. -->\n@if (type() === 'card-provider') {\n <div class=\"sui-content-card__card-box\">\n @if (brand(); as b) {\n <sui-brand-logo [company]=\"b\" size=\"sm\" />\n }\n </div>\n}\n\n<sui-content-label\n class=\"sui-content-card__label\"\n [type]=\"labelType()\"\n size=\"medium\"\n [label]=\"title()\"\n [sublabel]=\"sublabel()\"\n [description]=\"subtitle()\"\n [icon]=\"icon()\"\n [avatar]=\"avatar()\"\n [companyLogoSrc]=\"companyLogoSrc()\"\n [brand]=\"brand()\"\n [badge]=\"badgeCfg()\"\n badgePlacement=\"title\"\n [disabled]=\"disabled()\"\n/>\n\n@if (dismissible()) {\n <button\n type=\"button\"\n class=\"sui-content-card__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onDismiss($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-shadow-x-small);font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-content-card__label{flex:1 1 0;min-width:0}.sui-content-card__card-box{box-sizing:border-box;flex-shrink:0;width:32px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4)}.sui-content-card__dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;width:20px;height:20px;background:transparent;border:0;border-radius:var(--sui-radius-4);color:var(--sui-icon-sub-600);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease,transform .12s ease}.sui-content-card__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-content-card__dismiss:active{transform:scale(.96)}.sui-content-card__dismiss:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-content-card__dismiss:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none}:host([data-sui-disabled]){pointer-events:none}:host([data-sui-disabled]) .sui-content-card__card-box{opacity:.5}\n"] }]
|
|
5880
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], companyLogoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "companyLogoSrc", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissAriaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
|
|
5846
|
+
}, template: "<!-- card-provider no existe en el set del Content Label (2945:5539): la card\n renderiza ese leading (tile 32\u00D724) y delega el resto al label en 'basic'. -->\n@if (type() === 'card-provider') {\n <div class=\"sui-content-card__card-box\">\n @if (brand(); as b) {\n <sui-brand-logo [company]=\"b\" size=\"sm\" />\n }\n </div>\n}\n\n<sui-content-label\n class=\"sui-content-card__label\"\n [type]=\"labelType()\"\n size=\"medium\"\n [label]=\"title()\"\n [sublabel]=\"sublabel()\"\n [description]=\"subtitle()\"\n [icon]=\"icon()\"\n [avatar]=\"avatar()\"\n [companyLogoSrc]=\"companyLogoSrc()\"\n [brand]=\"brand()\"\n [badge]=\"badgeCfg()\"\n badgePlacement=\"title\"\n [disabled]=\"disabled()\"\n/>\n\n@if (dismissible()) {\n <button\n type=\"button\"\n class=\"sui-content-card__dismiss\"\n [attr.aria-label]=\"dismissAriaLabel()\"\n [disabled]=\"disabled()\"\n (click)=\"onDismiss($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-shadow-x-small);font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-content-card__label{flex:1 1 0;min-width:0}.sui-content-card__card-box{box-sizing:border-box;flex-shrink:0;width:32px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4)}.sui-content-card__dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;width:20px;height:20px;background:transparent;border:0;border-radius:var(--sui-radius-4);color:var(--sui-icon-sub-600);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease,transform .12s ease}.sui-content-card__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-content-card__dismiss:active{transform:scale(.96)}.sui-content-card__dismiss:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-content-card__dismiss:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none}:host([data-sui-size=large]) .sui-content-card__dismiss{position:relative;width:32px;height:32px;border-radius:var(--sui-radius-8, 8px);margin:-6px -6px -6px 0}:host([data-sui-size=large]) .sui-content-card__dismiss:before{content:\"\";position:absolute;inset:-4px}:host([data-sui-disabled]){pointer-events:none}:host([data-sui-disabled]) .sui-content-card__card-box{opacity:.5}\n"] }]
|
|
5847
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], companyLogoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "companyLogoSrc", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
|
|
5881
5848
|
|
|
5882
5849
|
/**
|
|
5883
5850
|
* SUI Content Divider — SUI Design System 2.0
|
|
@@ -6574,8 +6541,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6574
6541
|
* - bg-white-0 + 1px solid stroke-soft-200 + regular-shadow x-small (default)
|
|
6575
6542
|
*
|
|
6576
6543
|
* Steppers (Compact Button [1.1], style ghost):
|
|
6577
|
-
* - padding 2px, radius 6px, icono 20×20 (subtract-line / add-line)
|
|
6578
|
-
*
|
|
6544
|
+
* - padding 2px, radius 6px, icono 20×20 (subtract-line / add-line) → caja
|
|
6545
|
+
* del stepper = 24×24 de 2xsmall a medium. color icon-sub-600.
|
|
6546
|
+
* - large / xlarge (extensión SUI, 03-10-2026): el stepper crece a 40 / 44
|
|
6547
|
+
* para tocarlo con el dedo en mobile (ícono 20 / 24).
|
|
6579
6548
|
*
|
|
6580
6549
|
* Valor (Paragraph/Small — Inter 14/20, -0.084px), text-center, flex 1:
|
|
6581
6550
|
* - default: text-soft-400 (placeholder gris, valor "vacío"/sin foco)
|
|
@@ -6620,6 +6589,8 @@ class SuiCounterInput {
|
|
|
6620
6589
|
return 'xsmall';
|
|
6621
6590
|
return s;
|
|
6622
6591
|
}, ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
|
|
6592
|
+
/** Ícono de los botones − / +: 20 hasta large, 24 en xlarge (botón de 44). */
|
|
6593
|
+
iconSize = computed(() => (this.size() === 'xlarge' ? 24 : 20), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
6623
6594
|
label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
6624
6595
|
sublabel = input(null, ...(ngDevMode ? [{ debugName: "sublabel" }] : /* istanbul ignore next */ []));
|
|
6625
6596
|
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
@@ -6708,7 +6679,7 @@ class SuiCounterInput {
|
|
|
6708
6679
|
useExisting: forwardRef(() => SuiCounterInput),
|
|
6709
6680
|
multi: true,
|
|
6710
6681
|
},
|
|
6711
|
-
], 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-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"
|
|
6682
|
+
], 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-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"iconSize()\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"iconSize()\" />\n </button>\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-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),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=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);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-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-full, 999px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}:host([data-sui-size=large]) .sui-counter-input__stepper{width:40px;height:40px;padding:10px}:host([data-sui-size=xlarge]) .sui-counter-input__stepper{width:44px;height:44px;padding:10px}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}:host([data-sui-size=large]) .sui-counter-input__value,:host([data-sui-size=xlarge]) .sui-counter-input__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6712
6683
|
}
|
|
6713
6684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiCounterInput, decorators: [{
|
|
6714
6685
|
type: Component,
|
|
@@ -6724,7 +6695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
6724
6695
|
'[attr.data-sui-size]': 'size()',
|
|
6725
6696
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
6726
6697
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
6727
|
-
}, 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-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"
|
|
6698
|
+
}, 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-counter-input__label-host\"\n />\n}\n\n<div\n class=\"sui-counter-input__field\"\n [class.sui-counter-input__field--error]=\"error()\"\n [class.sui-counter-input__field--disabled]=\"isDisabled()\"\n>\n <!-- Stepper \u2212 (decrement) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"decrementLabel()\"\n [disabled]=\"!canDecrement() || null\"\n (click)=\"decrement()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"subtract-line\" [size]=\"iconSize()\" />\n </button>\n\n <!-- Valor centrado (spinbutton) -->\n <span\n class=\"sui-counter-input__value\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"effectiveValue()\"\n [attr.aria-valuemin]=\"ariaMin()\"\n [attr.aria-valuemax]=\"ariaMax()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n >\n {{ displayValue() }}\n </span>\n\n <!-- Stepper + (increment) -->\n <button\n type=\"button\"\n class=\"sui-counter-input__stepper\"\n [attr.aria-label]=\"incrementLabel()\"\n [disabled]=\"!canIncrement() || null\"\n (click)=\"increment()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"add-line\" [size]=\"iconSize()\" />\n </button>\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-counter-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-counter-input__label-host{display:block;margin-bottom:6px}.sui-counter-input__hint-host{display:block;margin-top:6px}.sui-counter-input__field{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),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=medium]) .sui-counter-input__field,:host(:not([data-sui-size])) .sui-counter-input__field{gap:8px;padding:7px 8px;border-radius:var(--sui-radius-full, 999px);min-height:40px}:host([data-sui-size=small]) .sui-counter-input__field{gap:6px;padding:5px 6px;border-radius:var(--sui-radius-full, 999px);min-height:36px}:host([data-sui-size=large]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:48px}:host([data-sui-size=xsmall]) .sui-counter-input__field{gap:4px;padding:3px 4px;border-radius:var(--sui-radius-full, 999px);min-height:32px}:host([data-sui-size=\"2xsmall\"]) .sui-counter-input__field{gap:4px;padding:1px 2px;border-radius:var(--sui-radius-full, 999px);min-height:28px}:host([data-sui-size=xlarge]) .sui-counter-input__field{gap:8px;padding:3px;border-radius:var(--sui-radius-full, 999px);min-height:52px}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent}.sui-counter-input__field:not(.sui-counter-input__field--disabled):not(.sui-counter-input__field--error):focus-within{background:var(--sui-bg-white-0);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-counter-input__field--error{border-color:var(--sui-state-error-base);box-shadow:var(--sui-regular-shadow-x-small)}.sui-counter-input__field--error:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10, rgba(251, 55, 72, .1019607843))}.sui-counter-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-counter-input__stepper{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;min-width:0;min-height:0;margin:0;padding:2px;border:0;border-radius:var(--sui-radius-full, 999px);background:transparent;color:var(--sui-icon-sub-600);line-height:0;cursor:pointer;transition:background .12s,color .12s,transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(.22, 1, .36, 1))}.sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-counter-input__stepper:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);transform:scale(.92)}.sui-counter-input__stepper:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}.sui-counter-input__stepper:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:.5}:host([data-sui-size=large]) .sui-counter-input__stepper{width:40px;height:40px;padding:10px}:host([data-sui-size=xlarge]) .sui-counter-input__stepper{width:44px;height:44px;padding:10px}.sui-counter-input__field:hover .sui-counter-input__stepper:hover:not(:disabled){background:var(--sui-bg-white-0)}:host([data-sui-disabled]) .sui-counter-input__stepper{color:var(--sui-icon-disabled-300);opacity:1}.sui-counter-input__value{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-user-select:none;user-select:none;color:var(--sui-text-strong-950)}:host([data-sui-size=large]) .sui-counter-input__value,:host([data-sui-size=xlarge]) .sui-counter-input__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-counter-input__field--disabled .sui-counter-input__value{color:var(--sui-text-disabled-300)}\n"] }]
|
|
6728
6699
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }] } });
|
|
6729
6700
|
|
|
6730
6701
|
/**
|
|
@@ -6872,8 +6843,11 @@ function buildCalendarGrid(monthAnchor, options) {
|
|
|
6872
6843
|
}
|
|
6873
6844
|
/** Etiquetas de días para el header del grid — locale ES (lunes-domingo). */
|
|
6874
6845
|
const DAY_LABELS_ES = ['LU', 'MA', 'MI', 'JU', 'VI', 'SÁ', 'DO'];
|
|
6846
|
+
/** «Octubre 2026» — con mayúscula inicial (date-fns en español la da en
|
|
6847
|
+
* minúscula; la regla de copy del proyecto es sentence case). Fix 03-10-2026. */
|
|
6875
6848
|
function formatMonthYear(date) {
|
|
6876
|
-
|
|
6849
|
+
const txt = format(date, 'LLLL yyyy', { locale: es });
|
|
6850
|
+
return txt.charAt(0).toUpperCase() + txt.slice(1);
|
|
6877
6851
|
}
|
|
6878
6852
|
function formatDateShort(date) {
|
|
6879
6853
|
return format(date, "d 'de' MMM yyyy", { locale: es });
|
|
@@ -7129,6 +7103,8 @@ class SuiDatepicker {
|
|
|
7129
7103
|
calendars = input(2, ...(ngDevMode ? [{ debugName: "calendars" }] : /* istanbul ignore next */ []));
|
|
7130
7104
|
/** Renderiza el calendar inline (sin trigger ni popover). */
|
|
7131
7105
|
inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
|
|
7106
|
+
/** Alto del campo: small 36 · medium 40 (default) · large 48 (ver SuiDatepickerSize). */
|
|
7107
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
7132
7108
|
/** Placeholder del input cuando no hay valor seleccionado. */
|
|
7133
7109
|
placeholder = input('Seleccionar fecha', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
7134
7110
|
/** Si true, muestra Cancel/Apply en el footer. Range siempre lo muestra. */
|
|
@@ -7172,6 +7148,11 @@ class SuiDatepicker {
|
|
|
7172
7148
|
* - mode='range' + mobile → 1
|
|
7173
7149
|
* - mode='range' + desktop → respeta el prop
|
|
7174
7150
|
*/
|
|
7151
|
+
/**
|
|
7152
|
+
* Cancelar / Aplicar: large (48) con el campo large y siempre en mobile, para
|
|
7153
|
+
* tocarlos con el dedo (extensión SUI, 03-10-2026); small (36, Figma) si no.
|
|
7154
|
+
*/
|
|
7155
|
+
footerButtonSize = computed(() => this.size() === 'large' || this._isMobile() ? 'large' : 'small', ...(ngDevMode ? [{ debugName: "footerButtonSize" }] : /* istanbul ignore next */ []));
|
|
7175
7156
|
effectiveCalendars = computed(() => {
|
|
7176
7157
|
if (this.mode() === 'date')
|
|
7177
7158
|
return 1;
|
|
@@ -7186,6 +7167,12 @@ class SuiDatepicker {
|
|
|
7186
7167
|
// Mantener anchorMonth sincronizado con el valor (al abrir, navegar al mes del valor)
|
|
7187
7168
|
effect(() => {
|
|
7188
7169
|
const v = this.value();
|
|
7170
|
+
const inline = this.inline();
|
|
7171
|
+
// Fix 03-10-2026: en `inline` el calendario nunca se abre, y lo staged
|
|
7172
|
+
// (lo que se pinta) solo se copiaba desde `value` en openPopover(): un
|
|
7173
|
+
// [value] de entrada quedaba sin marcar. En inline se sincroniza aquí.
|
|
7174
|
+
if (inline)
|
|
7175
|
+
untracked(() => this._stageFromValue(v));
|
|
7189
7176
|
if (!v)
|
|
7190
7177
|
return;
|
|
7191
7178
|
if (v instanceof Date)
|
|
@@ -7295,8 +7282,8 @@ class SuiDatepicker {
|
|
|
7295
7282
|
if (!r.start)
|
|
7296
7283
|
return null;
|
|
7297
7284
|
if (!r.end)
|
|
7298
|
-
return `
|
|
7299
|
-
return `
|
|
7285
|
+
return `Rango: ${formatDateShort(r.start)} – …`;
|
|
7286
|
+
return `Rango: ${formatDateShort(r.start)} – ${formatDateShort(r.end)}`;
|
|
7300
7287
|
}, ...(ngDevMode ? [{ debugName: "rangeHint" }] : /* istanbul ignore next */ []));
|
|
7301
7288
|
// ── Actions ────────────────────────────────────────────────────────
|
|
7302
7289
|
toggle() {
|
|
@@ -7313,7 +7300,12 @@ class SuiDatepicker {
|
|
|
7313
7300
|
if (this.isDisabled())
|
|
7314
7301
|
return;
|
|
7315
7302
|
// Hidratar staged desde value() actual
|
|
7316
|
-
|
|
7303
|
+
this._stageFromValue(this.value());
|
|
7304
|
+
this.activePreset.set(null);
|
|
7305
|
+
this.open.set(true);
|
|
7306
|
+
}
|
|
7307
|
+
/** Copia `value` a lo staged (lo que pinta el calendario). */
|
|
7308
|
+
_stageFromValue(v) {
|
|
7317
7309
|
if (this.mode() === 'date') {
|
|
7318
7310
|
this.stagedDate.set(v instanceof Date ? v : null);
|
|
7319
7311
|
}
|
|
@@ -7323,8 +7315,6 @@ class SuiDatepicker {
|
|
|
7323
7315
|
else {
|
|
7324
7316
|
this.stagedRange.set({ start: null, end: null });
|
|
7325
7317
|
}
|
|
7326
|
-
this.activePreset.set(null);
|
|
7327
|
-
this.open.set(true);
|
|
7328
7318
|
}
|
|
7329
7319
|
cancel() {
|
|
7330
7320
|
this.open.set(false);
|
|
@@ -7458,13 +7448,13 @@ class SuiDatepicker {
|
|
|
7458
7448
|
return null;
|
|
7459
7449
|
}
|
|
7460
7450
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7461
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDatepicker, isStandalone: true, selector: "sui-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, markedDates: { classPropertyName: "markedDates", publicName: "markedDates", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocPointerDown($event)", "document:keydown.escape": "onEscape()" }, properties: { "attr.data-sui-mode": "mode()", "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-calendars": "effectiveCalendars()" } }, providers: [
|
|
7451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiDatepicker, isStandalone: true, selector: "sui-datepicker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, calendars: { classPropertyName: "calendars", publicName: "calendars", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, markedDates: { classPropertyName: "markedDates", publicName: "markedDates", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocPointerDown($event)", "document:keydown.escape": "onEscape()" }, properties: { "attr.data-sui-mode": "mode()", "attr.data-sui-open": "open() ? \"\" : null", "attr.data-sui-calendars": "effectiveCalendars()", "attr.data-sui-size": "size()" } }, providers: [
|
|
7462
7452
|
{
|
|
7463
7453
|
provide: NG_VALUE_ACCESSOR,
|
|
7464
7454
|
useExisting: forwardRef(() => SuiDatepicker),
|
|
7465
7455
|
multi: true,
|
|
7466
7456
|
},
|
|
7467
|
-
], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7457
|
+
], ngImport: i0, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancelar + Aplicar (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"cancel()\">\n Cancelar\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"apply()\">\n Aplicar\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-datepicker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-datepicker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}:host([data-sui-size=large]) .sui-datepicker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}@media(max-width:767px){:host([data-sui-mode=range]) .sui-datepicker__footer{flex-wrap:wrap;gap:12px 16px;padding:16px}.sui-datepicker__range-hint{flex:1 0 100%}.sui-datepicker__calendar sui-date-selector{width:304px;max-width:304px}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex:1 0 100%;margin-left:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:auto;flex:1 0 0;min-width:0}}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}@media(max-width:767px){.sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}.sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,.sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiDayLabel, selector: "sui-day-label", inputs: ["label"] }, { kind: "component", type: SuiDayCell, selector: "sui-day-cell", inputs: ["day", "type", "rangePosition", "selected", "marked", "today", "disabled", "outOfMonth", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiDateSelector, selector: "sui-date-selector", inputs: ["label", "leftIcon", "rightIcon", "disabled"], outputs: ["prev", "next"] }, { kind: "component", type: SuiPeriodRange, selector: "sui-period-range", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7468
7458
|
}
|
|
7469
7459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiDatepicker, decorators: [{
|
|
7470
7460
|
type: Component,
|
|
@@ -7478,8 +7468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7478
7468
|
'[attr.data-sui-mode]': 'mode()',
|
|
7479
7469
|
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
7480
7470
|
'[attr.data-sui-calendars]': 'effectiveCalendars()',
|
|
7481
|
-
}, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancel + Apply (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" size=\"small\" type=\"button\" (click)=\"cancel()\">\n Cancel\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" size=\"small\" type=\"button\" (click)=\"apply()\">\n Apply\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}\n"] }]
|
|
7482
|
-
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], calendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendars", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocPointerDown: [{
|
|
7471
|
+
'[attr.data-sui-size]': 'size()',
|
|
7472
|
+
}, template: "<!-- Trigger (input + icono calendario) \u2014 solo si no es inline -->\n@if (!inline()) {\n <button\n type=\"button\"\n class=\"sui-datepicker__trigger\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-haspopup]=\"true\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-datepicker__trigger-icon\" name=\"calendar-line\" [size]=\"20\" />\n <span class=\"sui-datepicker__trigger-text\" [class.sui-datepicker__trigger-text--placeholder]=\"!value()\">\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-datepicker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Popover panel \u2014 visible cuando open() o inline() -->\n@if (inline() || open()) {\n <div class=\"sui-datepicker__panel\"\n [class.sui-datepicker__panel--inline]=\"inline()\"\n [class.sui-datepicker__panel--range]=\"mode() === 'range'\"\n role=\"dialog\">\n <!-- Sidebar de presets \u2014 solo en mode=range (usa <sui-period-range>) -->\n @if (mode() === 'range') {\n <aside class=\"sui-datepicker__presets\" aria-label=\"Rangos predefinidos\">\n @for (p of presets(); track trackPreset($index, p)) {\n <sui-period-range\n [label]=\"p.label\"\n [active]=\"isPresetActive(p.id)\"\n (clicked)=\"selectPreset(p)\"\n />\n }\n </aside>\n }\n\n <!-- Contenido principal: 1 o 2 calendarios + footer -->\n <div class=\"sui-datepicker__content\">\n <div class=\"sui-datepicker__calendars\">\n <!-- Calendario izquierdo (siempre visible) -->\n <div class=\"sui-datepicker__calendar\">\n <sui-date-selector\n [label]=\"leftMonthLabel()\"\n [leftIcon]=\"true\"\n [rightIcon]=\"effectiveCalendars() === 1\"\n (prev)=\"prevMonth()\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of leftRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"mode() === 'date' && cell.selected\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Calendario derecho \u2014 solo en mode=range con effectiveCalendars=2 (desktop) -->\n @if (mode() === 'range' && effectiveCalendars() === 2) {\n <div class=\"sui-datepicker__calendar sui-datepicker__calendar--right\">\n <sui-date-selector\n [label]=\"rightMonthLabel()\"\n [leftIcon]=\"false\"\n [rightIcon]=\"true\"\n (next)=\"nextMonth()\"\n />\n\n <div class=\"sui-datepicker__day-labels\" role=\"row\">\n @for (label of dayLabels; track label) {\n <sui-day-label [label]=\"label\" />\n }\n </div>\n\n <div class=\"sui-datepicker__day-grid\" role=\"grid\">\n @for (row of rightRows(); track trackRow($index, row)) {\n <div class=\"sui-datepicker__day-row\" role=\"row\">\n @if (row.hasBand) {\n <span\n class=\"sui-datepicker__range-band\"\n [class.sui-datepicker__range-band--round-left]=\"row.bandRoundLeft\"\n [class.sui-datepicker__range-band--round-right]=\"row.bandRoundRight\"\n [style.--sui-band-start]=\"row.bandStart\"\n [style.--sui-band-end]=\"row.bandEnd\"\n aria-hidden=\"true\"\n ></span>\n }\n @for (cell of row.cells; track trackCell($index, cell)) {\n <sui-day-cell\n [day]=\"cell.day\"\n [type]=\"mode() === 'range' ? 'range' : 'basic'\"\n [selected]=\"false\"\n [rangePosition]=\"cellRangePosition(cell)\"\n [marked]=\"cell.marked\"\n [today]=\"cell.isToday\"\n [disabled]=\"cell.disabled\"\n [outOfMonth]=\"!cell.inCurrentMonth\"\n (clicked)=\"selectCell(cell)\"\n />\n }\n </div>\n }\n </div>\n </div>\n }\n </div>\n\n <!-- Footer con Cancelar + Aplicar (Range siempre lo muestra) -->\n @if (showFooter() || mode() === 'range') {\n <footer class=\"sui-datepicker__footer\">\n @if (mode() === 'range' && rangeHint(); as hint) {\n <span class=\"sui-datepicker__range-hint\">{{ hint }}</span>\n }\n <div class=\"sui-datepicker__footer-actions\">\n <sui-button variant=\"stroke\" color=\"neutral\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"cancel()\">\n Cancelar\n </sui-button>\n <sui-button variant=\"filled\" color=\"primary\" [size]=\"footerButtonSize()\" type=\"button\" (click)=\"apply()\">\n Aplicar\n </sui-button>\n </div>\n </footer>\n }\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}:host([data-sui-mode=range]){display:block}.sui-datepicker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-datepicker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-datepicker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-datepicker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-datepicker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-datepicker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-datepicker__trigger-icon{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__trigger-text{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-datepicker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}:host([data-sui-size=large]) .sui-datepicker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}.sui-datepicker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-datepicker__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:flex;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1019607843));overflow:hidden;animation:sui-datepicker-enter .16s cubic-bezier(.23,1,.32,1)}.sui-datepicker__panel--inline{position:static;animation:none}.sui-datepicker__panel--range{width:936px;max-width:calc(100vw - 32px)}:host([data-sui-calendars=\"1\"]) .sui-datepicker__panel--range{width:auto}@keyframes sui-datepicker-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sui-datepicker__presets{display:flex;flex-direction:column;gap:8px;width:200px;flex-shrink:0;padding:20px 16px 2px;border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-sizing:border-box}.sui-datepicker__content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.sui-datepicker__calendars{display:flex;flex:1 1 auto}.sui-datepicker__calendar{flex:1 1 0;max-width:368px;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}.sui-datepicker__calendar--right{border-left:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-datepicker__calendar sui-date-selector{width:328px;max-width:328px}.sui-datepicker__day-labels{display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px;max-width:328px}.sui-datepicker__day-grid{display:flex;flex-direction:column;gap:8px;width:328px;max-width:328px}.sui-datepicker__day-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:space-between;width:328px}.sui-datepicker__range-band{position:absolute;inset:0;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843));pointer-events:none;z-index:0}.sui-datepicker__range-band--round-left{left:calc(var(--sui-band-start) * var(--sui-day-step, 48px));border-top-left-radius:var(--sui-radius-8, 8px);border-bottom-left-radius:var(--sui-radius-8, 8px)}.sui-datepicker__range-band--round-right{right:calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));border-top-right-radius:var(--sui-radius-8, 8px);border-bottom-right-radius:var(--sui-radius-8, 8px)}.sui-datepicker__day-row sui-day-cell{position:relative;z-index:1}.sui-datepicker__footer{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}:host([data-sui-mode=range]) .sui-datepicker__footer{padding:16px 16px 16px 24px}.sui-datepicker__range-hint{flex:1 0 0;min-width:0;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-datepicker__footer-actions{display:flex;gap:16px;align-items:center}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions{flex:1 0 0;min-width:0}:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button{flex:1 0 0;min-width:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex-shrink:0;margin-left:auto}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:108px}@media(max-width:767px){.sui-datepicker__panel--range{width:calc(100vw - 32px);flex-direction:column}.sui-datepicker__presets{flex-direction:row;overflow-x:auto;width:100%;border-right:none;border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.sui-datepicker__presets sui-period-range{width:auto;flex-shrink:0;scroll-snap-align:start}.sui-datepicker__calendar{padding-left:12px;padding-right:12px;max-width:none}.sui-datepicker__day-labels,.sui-datepicker__day-grid,.sui-datepicker__day-row{--sui-day-step: 44px;width:304px;max-width:304px;gap:4px}}@media(max-width:767px){:host([data-sui-mode=range]) .sui-datepicker__footer{flex-wrap:wrap;gap:12px 16px;padding:16px}.sui-datepicker__range-hint{flex:1 0 100%}.sui-datepicker__calendar sui-date-selector{width:304px;max-width:304px}:host([data-sui-mode=range]) .sui-datepicker__footer-actions{flex:1 0 100%;margin-left:0}:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button{width:auto;flex:1 0 0;min-width:0}}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,:host([data-sui-size=large]) .sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}@media(max-width:767px){.sui-datepicker__calendar sui-date-selector{height:48px;padding:4px}.sui-datepicker__calendar sui-date-selector ::ng-deep sui-compact-button .sui-compact-button__el,.sui-datepicker__calendar sui-date-selector ::ng-deep .sui-date-selector__placeholder{width:40px;height:40px}}\n"] }]
|
|
7473
|
+
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], calendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendars", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], markedDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "markedDates", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocPointerDown: [{
|
|
7483
7474
|
type: HostListener,
|
|
7484
7475
|
args: ['document:pointerdown', ['$event']]
|
|
7485
7476
|
}], onEscape: [{
|
|
@@ -7580,10 +7571,10 @@ class SuiDrawerFooter {
|
|
|
7580
7571
|
/** Botón primario (filled primary-base) — string shorthand (solo label) o
|
|
7581
7572
|
* SuiFooterButtonConfig { label, disabled? }. Interfaz compartida con
|
|
7582
7573
|
* sui-filter-panel-footer. */
|
|
7583
|
-
primaryButton = input('
|
|
7574
|
+
primaryButton = input('Continuar', ...(ngDevMode ? [{ debugName: "primaryButton" }] : /* istanbul ignore next */ []));
|
|
7584
7575
|
/** Botón secundario (stroke neutral) — string shorthand o
|
|
7585
7576
|
* SuiFooterButtonConfig. null (o label vacío) = ocultar. */
|
|
7586
|
-
secondaryButton = input('
|
|
7577
|
+
secondaryButton = input('Cancelar', ...(ngDevMode ? [{ debugName: "secondaryButton" }] : /* istanbul ignore next */ []));
|
|
7587
7578
|
/** Config resuelta del botón primario (string → { label }). */
|
|
7588
7579
|
primaryCfg = computed(() => {
|
|
7589
7580
|
const b = this.primaryButton();
|
|
@@ -7942,6 +7933,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
7942
7933
|
* - subtitle: descripción
|
|
7943
7934
|
* - action: string shorthand (solo label → botón emite actionClicked) o
|
|
7944
7935
|
* { label, route? } — con route el botón navega vía routerLink
|
|
7936
|
+
* - size: tamaño del botón de la acción — medium 40 (default) | large 48
|
|
7937
|
+
* (extensión SUI 03-10-2026, para mobile)
|
|
7945
7938
|
*/
|
|
7946
7939
|
class SuiEmptyState {
|
|
7947
7940
|
/** URL de Fluent Emoji (3D o animado) — override del zorro default. */
|
|
@@ -7953,6 +7946,10 @@ class SuiEmptyState {
|
|
|
7953
7946
|
null/'' = sin botón. */
|
|
7954
7947
|
action = input(null, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
|
|
7955
7948
|
actionClicked = output();
|
|
7949
|
+
/** Tamaño del botón de la acción: `medium` 40 (default) o `large` 48 para
|
|
7950
|
+
mobile — extensión SUI (03-10-2026). Solo cambia el botón; emoji, título
|
|
7951
|
+
y padding siguen igual. */
|
|
7952
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
7956
7953
|
/** Config resuelta del CTA (string → { label }; sin label → null). */
|
|
7957
7954
|
actionCfg = computed(() => {
|
|
7958
7955
|
const a = this.action();
|
|
@@ -7970,15 +7967,16 @@ class SuiEmptyState {
|
|
|
7970
7967
|
return override.length > 0 ? override : EMPTY_STATE_FOX_EMOJI;
|
|
7971
7968
|
}, ...(ngDevMode ? [{ debugName: "resolvedEmojiSrc" }] : /* istanbul ignore next */ []));
|
|
7972
7969
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7973
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiEmptyState, isStandalone: true, selector: "sui-empty-state", inputs: { emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "attr.title": "null" } }, ngImport: i0, template: "<div class=\"sui-empty-state__illustration\">\n <sui-emoji\n class=\"sui-empty-state__emoji\"\n size=\"full\"\n [src]=\"resolvedEmojiSrc()\"\n [ariaLabel]=\"title()\"\n />\n</div>\n\n<h3 class=\"sui-empty-state__title\">{{ title() }}</h3>\n\n@if (subtitle()) {\n <p class=\"sui-empty-state__subtitle\">{{ subtitle() }}</p>\n}\n\n@if (actionCfg(); as action) {\n @if (action.route) {\n <sui-button variant=\"filled\" color=\"primary\" size=\"
|
|
7970
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiEmptyState, isStandalone: true, selector: "sui-empty-state", inputs: { emoji: { classPropertyName: "emoji", publicName: "emoji", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { properties: { "attr.title": "null", "attr.data-sui-size": "size()" } }, ngImport: i0, template: "<div class=\"sui-empty-state__illustration\">\n <sui-emoji\n class=\"sui-empty-state__emoji\"\n size=\"full\"\n [src]=\"resolvedEmojiSrc()\"\n [ariaLabel]=\"title()\"\n />\n</div>\n\n<h3 class=\"sui-empty-state__title\">{{ title() }}</h3>\n\n@if (subtitle()) {\n <p class=\"sui-empty-state__subtitle\">{{ subtitle() }}</p>\n}\n\n@if (actionCfg(); as action) {\n @if (action.route) {\n <sui-button variant=\"filled\" color=\"primary\" [size]=\"size()\" [routerLink]=\"action.route\">\n {{ action.label }}\n </sui-button>\n } @else {\n <sui-button variant=\"filled\" color=\"primary\" [size]=\"size()\" type=\"button\" (click)=\"actionClicked.emit()\">\n {{ action.label }}\n </sui-button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;max-width:460px;margin:0 auto;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-empty-state__illustration{position:relative;width:120px;height:120px;margin-bottom:24px}.sui-empty-state__emoji{width:120px;height:120px}.sui-empty-state__title{margin:0 0 8px;font-size:18px;font-weight:600;line-height:24px;letter-spacing:-.015em;color:var(--sui-text-strong-950, #171717)}.sui-empty-state__subtitle{margin:0 0 24px;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);max-width:320px}@media(max-width:767px){:host{padding:32px 20px}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel", "animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7974
7971
|
}
|
|
7975
7972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiEmptyState, decorators: [{
|
|
7976
7973
|
type: Component,
|
|
7977
7974
|
args: [{ selector: 'sui-empty-state', standalone: true, imports: [RouterLink, SuiButton, SuiEmoji], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7978
7975
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
|
|
7979
7976
|
'[attr.title]': 'null',
|
|
7980
|
-
|
|
7981
|
-
|
|
7977
|
+
'[attr.data-sui-size]': 'size()',
|
|
7978
|
+
}, template: "<div class=\"sui-empty-state__illustration\">\n <sui-emoji\n class=\"sui-empty-state__emoji\"\n size=\"full\"\n [src]=\"resolvedEmojiSrc()\"\n [ariaLabel]=\"title()\"\n />\n</div>\n\n<h3 class=\"sui-empty-state__title\">{{ title() }}</h3>\n\n@if (subtitle()) {\n <p class=\"sui-empty-state__subtitle\">{{ subtitle() }}</p>\n}\n\n@if (actionCfg(); as action) {\n @if (action.route) {\n <sui-button variant=\"filled\" color=\"primary\" [size]=\"size()\" [routerLink]=\"action.route\">\n {{ action.label }}\n </sui-button>\n } @else {\n <sui-button variant=\"filled\" color=\"primary\" [size]=\"size()\" type=\"button\" (click)=\"actionClicked.emit()\">\n {{ action.label }}\n </sui-button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;max-width:460px;margin:0 auto;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-empty-state__illustration{position:relative;width:120px;height:120px;margin-bottom:24px}.sui-empty-state__emoji{width:120px;height:120px}.sui-empty-state__title{margin:0 0 8px;font-size:18px;font-weight:600;line-height:24px;letter-spacing:-.015em;color:var(--sui-text-strong-950, #171717)}.sui-empty-state__subtitle{margin:0 0 24px;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);max-width:320px}@media(max-width:767px){:host{padding:32px 20px}}\n"] }]
|
|
7979
|
+
}], propDecorators: { emoji: [{ type: i0.Input, args: [{ isSignal: true, alias: "emoji", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
7982
7980
|
/** Zorro animado (Fluent Emoji) — emoji default canon de los empty states. */
|
|
7983
7981
|
const EMPTY_STATE_FOX_EMOJI = 'https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Fox.png';
|
|
7984
7982
|
|
|
@@ -8400,13 +8398,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8400
8398
|
* - file: string shorthand (= filename, default "file.pdf") o
|
|
8401
8399
|
* { filename, extension? } — extension overridea el FileIcon
|
|
8402
8400
|
* (si falta se extrae del filename)
|
|
8403
|
-
* - description: texto secundario izquierdo (ej.
|
|
8401
|
+
* - description: texto secundario izquierdo (ej. «0 KB de 120 KB»)
|
|
8404
8402
|
* - state: 'in-progress' | 'success' | 'error'
|
|
8405
8403
|
* - progress: 0–100 — solo se muestra si state==='in-progress'
|
|
8406
8404
|
* - statusText: override del label de status (sino default por state:
|
|
8407
|
-
*
|
|
8405
|
+
* «Subiendo…» / «Completado» / «Falló»; en español desde el 03-10-2026)
|
|
8408
8406
|
* - showStatus: muestra/oculta el bloque de status (default true)
|
|
8409
|
-
* - retryLabel: texto del link de error (default
|
|
8407
|
+
* - retryLabel: texto del link de error (default «Reintentar»)
|
|
8410
8408
|
*
|
|
8411
8409
|
* Outputs:
|
|
8412
8410
|
* - actionClicked: click en el botón compacto (close en in-progress,
|
|
@@ -8423,12 +8421,16 @@ class SuiFileUploadCard {
|
|
|
8423
8421
|
? { filename: f, extension: '' }
|
|
8424
8422
|
: { filename: f.filename, extension: f.extension ?? '' };
|
|
8425
8423
|
}, ...(ngDevMode ? [{ debugName: "fileCfg" }] : /* istanbul ignore next */ []));
|
|
8426
|
-
description = input('0 KB
|
|
8424
|
+
description = input('0 KB de 120 KB', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
8427
8425
|
state = input('in-progress', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
8428
8426
|
progress = input(10, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
8429
8427
|
statusText = input(null, ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
|
|
8430
8428
|
showStatus = input(true, ...(ngDevMode ? [{ debugName: "showStatus" }] : /* istanbul ignore next */ []));
|
|
8431
|
-
|
|
8429
|
+
/** Textos para el lector de pantalla (antes fijos en inglés). */
|
|
8430
|
+
cancelLabel = input('Cancelar subida', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
8431
|
+
removeLabel = input('Quitar archivo', ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
|
|
8432
|
+
progressLabel = input('Progreso de la subida', ...(ngDevMode ? [{ debugName: "progressLabel" }] : /* istanbul ignore next */ []));
|
|
8433
|
+
retryLabel = input('Reintentar', ...(ngDevMode ? [{ debugName: "retryLabel" }] : /* istanbul ignore next */ []));
|
|
8432
8434
|
actionClicked = output();
|
|
8433
8435
|
retryClicked = output();
|
|
8434
8436
|
/** Default status text por state — override-able vía input. */
|
|
@@ -8437,9 +8439,9 @@ class SuiFileUploadCard {
|
|
|
8437
8439
|
if (override)
|
|
8438
8440
|
return override;
|
|
8439
8441
|
switch (this.state()) {
|
|
8440
|
-
case 'in-progress': return '
|
|
8441
|
-
case 'success': return '
|
|
8442
|
-
case 'error': return '
|
|
8442
|
+
case 'in-progress': return 'Subiendo…';
|
|
8443
|
+
case 'success': return 'Completado';
|
|
8444
|
+
case 'error': return 'Falló';
|
|
8443
8445
|
}
|
|
8444
8446
|
}, ...(ngDevMode ? [{ debugName: "resolvedStatusText" }] : /* istanbul ignore next */ []));
|
|
8445
8447
|
/** Status icon name por state (Remix Icons). */
|
|
@@ -8468,14 +8470,14 @@ class SuiFileUploadCard {
|
|
|
8468
8470
|
this.retryClicked.emit();
|
|
8469
8471
|
}
|
|
8470
8472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFileUploadCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFileUploadCard, isStandalone: true, selector: "sui-file-upload-card", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, statusText: { classPropertyName: "statusText", publicName: "statusText", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked", retryClicked: "retryClicked" }, host: { properties: { "attr.data-sui-state": "state()" } }, ngImport: i0, template: "<div class=\"sui-file-upload-card__row\">\n <sui-file-icon\n class=\"sui-file-upload-card__file-icon\"\n size=\"medium\"\n [filename]=\"fileCfg().filename\"\n [extension]=\"fileCfg().extension\"\n />\n\n <div class=\"sui-file-upload-card__text\">\n @if (state() === 'error') {\n <!-- Error: Text & Status sub-wrap (gap=4) +
|
|
8473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFileUploadCard, isStandalone: true, selector: "sui-file-upload-card", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, statusText: { classPropertyName: "statusText", publicName: "statusText", isSignal: true, isRequired: false, transformFunction: null }, showStatus: { classPropertyName: "showStatus", publicName: "showStatus", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked", retryClicked: "retryClicked" }, host: { properties: { "attr.data-sui-state": "state()" } }, ngImport: i0, template: "<div class=\"sui-file-upload-card__row\">\n <sui-file-icon\n class=\"sui-file-upload-card__file-icon\"\n size=\"medium\"\n [filename]=\"fileCfg().filename\"\n [extension]=\"fileCfg().extension\"\n />\n\n <div class=\"sui-file-upload-card__text\">\n @if (state() === 'error') {\n <!-- Error: Text & Status sub-wrap (gap=4) + link \u00ABReintentar\u00BB (gap=8 outer) -->\n <div class=\"sui-file-upload-card__text-status\">\n <p class=\"sui-file-upload-card__label\">{{ fileCfg().filename }}</p>\n <div class=\"sui-file-upload-card__desc\">\n <span class=\"sui-file-upload-card__desc-text\">{{ description() }}</span>\n @if (showStatus()) {\n <span class=\"sui-file-upload-card__bullet\" aria-hidden=\"true\">\u2219</span>\n <span class=\"sui-file-upload-card__status\">\n <sui-icon\n class=\"sui-file-upload-card__status-icon\"\n [name]=\"statusIconName()\"\n [size]=\"16\"\n />\n <span class=\"sui-file-upload-card__status-text\">{{ resolvedStatusText() }}</span>\n </span>\n }\n </div>\n </div>\n\n <!-- Reintentar (Figma node I452:322;169:1385 \"Link Buttons [1.1]\") =\n sui-link-button variant=error + underline. -->\n <sui-link-button\n class=\"sui-file-upload-card__retry\"\n variant=\"error\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onRetry()\"\n >\n {{ retryLabel() }}\n </sui-link-button>\n } @else {\n <!-- In-progress / Success: label + (description \u00B7 status) -->\n <p class=\"sui-file-upload-card__label\">{{ fileCfg().filename }}</p>\n <div class=\"sui-file-upload-card__desc\">\n <span class=\"sui-file-upload-card__desc-text\">{{ description() }}</span>\n @if (showStatus()) {\n <span class=\"sui-file-upload-card__bullet\" aria-hidden=\"true\">\u2219</span>\n <span class=\"sui-file-upload-card__status\">\n <sui-icon\n class=\"sui-file-upload-card__status-icon\"\n [name]=\"statusIconName()\"\n [size]=\"16\"\n />\n <span class=\"sui-file-upload-card__status-text\">{{ resolvedStatusText() }}</span>\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Compact action (Figma node 451:346 / 452:156 / 452:200 \"Compact Button [1.1]\")\n = p=2 + icon 20\u00D720 = 24\u00D724 en Figma; SUI usa 2xlarge (32, \u00EDcono 20) desde\n el 03-10-2026 para tocarlo con el dedo. variantStyle=modifiable\n (currentColor) para que el host pinte gris (in-progress/success) o rojo (error). -->\n <sui-compact-button\n class=\"sui-file-upload-card__action\"\n [icon]=\"actionIconName()\"\n variantStyle=\"modifiable\"\n size=\"2xlarge\"\n [ariaLabel]=\"state() === 'in-progress' ? cancelLabel() : removeLabel()\"\n (clicked)=\"onAction()\"\n />\n</div>\n\n@if (state() === 'in-progress') {\n <sui-progress-bar\n class=\"sui-file-upload-card__progress\"\n [value]=\"progressPct()\"\n color=\"blue\"\n size=\"medium\"\n [ariaLabel]=\"progressLabel()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;width:100%;padding:16px 16px 16px 14px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);overflow:clip;box-sizing:border-box;font-family:var(--sui-font-sans, \"InterVariable\", \"Inter\", system-ui, sans-serif)}:host([data-sui-state=error]){border-color:var(--sui-state-error-base, #fb3748)}.sui-file-upload-card__row{display:flex;gap:12px;align-items:flex-start;width:100%}.sui-file-upload-card__file-icon{flex-shrink:0}.sui-file-upload-card__text{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;min-width:0;gap:4px}:host([data-sui-state=error]) .sui-file-upload-card__text{gap:8px}.sui-file-upload-card__text-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-file-upload-card__label{margin:0;width:100%;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-file-upload-card__desc{display:flex;align-items:center;gap:4px;width:100%;flex-wrap:wrap}.sui-file-upload-card__desc-text,.sui-file-upload-card__bullet{font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-file-upload-card__status{display:inline-flex;align-items:center;gap:4px}.sui-file-upload-card__status-icon{display:inline-flex;width:16px;height:16px;flex-shrink:0}.sui-file-upload-card__status-text{font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);color:var(--sui-text-strong-950, #171717);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-state=in-progress]) .sui-file-upload-card__status-icon{color:var(--sui-state-information-base, #335cff);animation:sui-fuc-spin 1s linear infinite}:host([data-sui-state=success]) .sui-file-upload-card__status-icon{color:var(--sui-state-success-base, #1fc16b)}:host([data-sui-state=error]) .sui-file-upload-card__status-icon{color:var(--sui-state-error-base, #fb3748)}@keyframes sui-fuc-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){:host([data-sui-state=in-progress]) .sui-file-upload-card__status-icon{animation:none}}.sui-file-upload-card__retry{flex-shrink:0}.sui-file-upload-card__action{flex-shrink:0;color:var(--sui-icon-sub-600, #5c5c5c);--sui-compact-button-hover-bg: var(--sui-bg-weak-50, #f7f7f7);--sui-compact-button-active-bg: var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-state=error]) .sui-file-upload-card__action{color:var(--sui-state-error-base, #fb3748);--sui-compact-button-hover-bg: var(--sui-state-error-lighter, #ffebec);--sui-compact-button-active-bg: var(--sui-state-error-light, #ffc0c5)}.sui-file-upload-card__progress{display:block;width:100%;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiFileIcon, selector: "sui-file-icon", inputs: ["filename", "extension", "size", "color"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiProgressBar, selector: "sui-progress-bar", inputs: ["value", "color", "size", "ariaLabel"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8472
8474
|
}
|
|
8473
8475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFileUploadCard, decorators: [{
|
|
8474
8476
|
type: Component,
|
|
8475
8477
|
args: [{ selector: 'sui-file-upload-card', standalone: true, imports: [SuiFileIcon, SuiIcon, SuiProgressBar, SuiCompactButton, SuiLinkButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
8476
8478
|
'[attr.data-sui-state]': 'state()',
|
|
8477
|
-
}, template: "<div class=\"sui-file-upload-card__row\">\n <sui-file-icon\n class=\"sui-file-upload-card__file-icon\"\n size=\"medium\"\n [filename]=\"fileCfg().filename\"\n [extension]=\"fileCfg().extension\"\n />\n\n <div class=\"sui-file-upload-card__text\">\n @if (state() === 'error') {\n <!-- Error: Text & Status sub-wrap (gap=4) +
|
|
8478
|
-
}], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], statusText: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusText", required: false }] }], showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], retryClicked: [{ type: i0.Output, args: ["retryClicked"] }] } });
|
|
8479
|
+
}, template: "<div class=\"sui-file-upload-card__row\">\n <sui-file-icon\n class=\"sui-file-upload-card__file-icon\"\n size=\"medium\"\n [filename]=\"fileCfg().filename\"\n [extension]=\"fileCfg().extension\"\n />\n\n <div class=\"sui-file-upload-card__text\">\n @if (state() === 'error') {\n <!-- Error: Text & Status sub-wrap (gap=4) + link \u00ABReintentar\u00BB (gap=8 outer) -->\n <div class=\"sui-file-upload-card__text-status\">\n <p class=\"sui-file-upload-card__label\">{{ fileCfg().filename }}</p>\n <div class=\"sui-file-upload-card__desc\">\n <span class=\"sui-file-upload-card__desc-text\">{{ description() }}</span>\n @if (showStatus()) {\n <span class=\"sui-file-upload-card__bullet\" aria-hidden=\"true\">\u2219</span>\n <span class=\"sui-file-upload-card__status\">\n <sui-icon\n class=\"sui-file-upload-card__status-icon\"\n [name]=\"statusIconName()\"\n [size]=\"16\"\n />\n <span class=\"sui-file-upload-card__status-text\">{{ resolvedStatusText() }}</span>\n </span>\n }\n </div>\n </div>\n\n <!-- Reintentar (Figma node I452:322;169:1385 \"Link Buttons [1.1]\") =\n sui-link-button variant=error + underline. -->\n <sui-link-button\n class=\"sui-file-upload-card__retry\"\n variant=\"error\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onRetry()\"\n >\n {{ retryLabel() }}\n </sui-link-button>\n } @else {\n <!-- In-progress / Success: label + (description \u00B7 status) -->\n <p class=\"sui-file-upload-card__label\">{{ fileCfg().filename }}</p>\n <div class=\"sui-file-upload-card__desc\">\n <span class=\"sui-file-upload-card__desc-text\">{{ description() }}</span>\n @if (showStatus()) {\n <span class=\"sui-file-upload-card__bullet\" aria-hidden=\"true\">\u2219</span>\n <span class=\"sui-file-upload-card__status\">\n <sui-icon\n class=\"sui-file-upload-card__status-icon\"\n [name]=\"statusIconName()\"\n [size]=\"16\"\n />\n <span class=\"sui-file-upload-card__status-text\">{{ resolvedStatusText() }}</span>\n </span>\n }\n </div>\n }\n </div>\n\n <!-- Compact action (Figma node 451:346 / 452:156 / 452:200 \"Compact Button [1.1]\")\n = p=2 + icon 20\u00D720 = 24\u00D724 en Figma; SUI usa 2xlarge (32, \u00EDcono 20) desde\n el 03-10-2026 para tocarlo con el dedo. variantStyle=modifiable\n (currentColor) para que el host pinte gris (in-progress/success) o rojo (error). -->\n <sui-compact-button\n class=\"sui-file-upload-card__action\"\n [icon]=\"actionIconName()\"\n variantStyle=\"modifiable\"\n size=\"2xlarge\"\n [ariaLabel]=\"state() === 'in-progress' ? cancelLabel() : removeLabel()\"\n (clicked)=\"onAction()\"\n />\n</div>\n\n@if (state() === 'in-progress') {\n <sui-progress-bar\n class=\"sui-file-upload-card__progress\"\n [value]=\"progressPct()\"\n color=\"blue\"\n size=\"medium\"\n [ariaLabel]=\"progressLabel()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;width:100%;padding:16px 16px 16px 14px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);overflow:clip;box-sizing:border-box;font-family:var(--sui-font-sans, \"InterVariable\", \"Inter\", system-ui, sans-serif)}:host([data-sui-state=error]){border-color:var(--sui-state-error-base, #fb3748)}.sui-file-upload-card__row{display:flex;gap:12px;align-items:flex-start;width:100%}.sui-file-upload-card__file-icon{flex-shrink:0}.sui-file-upload-card__text{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;min-width:0;gap:4px}:host([data-sui-state=error]) .sui-file-upload-card__text{gap:8px}.sui-file-upload-card__text-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-file-upload-card__label{margin:0;width:100%;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-file-upload-card__desc{display:flex;align-items:center;gap:4px;width:100%;flex-wrap:wrap}.sui-file-upload-card__desc-text,.sui-file-upload-card__bullet{font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-file-upload-card__status{display:inline-flex;align-items:center;gap:4px}.sui-file-upload-card__status-icon{display:inline-flex;width:16px;height:16px;flex-shrink:0}.sui-file-upload-card__status-text{font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);color:var(--sui-text-strong-950, #171717);white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-state=in-progress]) .sui-file-upload-card__status-icon{color:var(--sui-state-information-base, #335cff);animation:sui-fuc-spin 1s linear infinite}:host([data-sui-state=success]) .sui-file-upload-card__status-icon{color:var(--sui-state-success-base, #1fc16b)}:host([data-sui-state=error]) .sui-file-upload-card__status-icon{color:var(--sui-state-error-base, #fb3748)}@keyframes sui-fuc-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){:host([data-sui-state=in-progress]) .sui-file-upload-card__status-icon{animation:none}}.sui-file-upload-card__retry{flex-shrink:0}.sui-file-upload-card__action{flex-shrink:0;color:var(--sui-icon-sub-600, #5c5c5c);--sui-compact-button-hover-bg: var(--sui-bg-weak-50, #f7f7f7);--sui-compact-button-active-bg: var(--sui-bg-soft-200, #ebebeb)}:host([data-sui-state=error]) .sui-file-upload-card__action{color:var(--sui-state-error-base, #fb3748);--sui-compact-button-hover-bg: var(--sui-state-error-lighter, #ffebec);--sui-compact-button-active-bg: var(--sui-state-error-light, #ffc0c5)}.sui-file-upload-card__progress{display:block;width:100%;flex-shrink:0}\n"] }]
|
|
8480
|
+
}], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], statusText: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusText", required: false }] }], showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], progressLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressLabel", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], retryClicked: [{ type: i0.Output, args: ["retryClicked"] }] } });
|
|
8479
8481
|
|
|
8480
8482
|
/**
|
|
8481
8483
|
* SUI File Upload — SUI Design System 2.0
|
|
@@ -8490,7 +8492,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8490
8492
|
* default / hover / dragover / disabled / error. Soporta single o multi.
|
|
8491
8493
|
*
|
|
8492
8494
|
* EXACT (pulled from Figma, verified — node 450:9410 / 450:9429):
|
|
8493
|
-
* - Container: w=400px (
|
|
8495
|
+
* - Container: Figma w=400px; SUI lo hace fluido (width 100% del contenedor,
|
|
8496
|
+
* 03-10-2026) para que llene la columna del formulario. padding=32px, gap=20px,
|
|
8494
8497
|
* border=1px dashed --sui-stroke-sub-300 (#d1d1d1), radius=12px,
|
|
8495
8498
|
* bg=--sui-bg-white-0. Flex column, items+justify center.
|
|
8496
8499
|
* - Icon: upload-cloud-2-line (Remix) 24×24, color --sui-icon-sub-600 (#5c5c5c),
|
|
@@ -8534,7 +8537,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8534
8537
|
* - maxSize: bytes máximo por archivo. 0 = sin límite.
|
|
8535
8538
|
* - title: label primario.
|
|
8536
8539
|
* - subtitle: texto secundario.
|
|
8537
|
-
* - browseLabel: texto del botón
|
|
8540
|
+
* - browseLabel: texto del botón (default «Buscar archivo»; era "Browse File"
|
|
8541
|
+
* hasta el 03-10-2026).
|
|
8538
8542
|
* - disabled: bloquea interacción.
|
|
8539
8543
|
* - error: estado de error (border rojo).
|
|
8540
8544
|
* - errorMessage: texto del error mostrado debajo.
|
|
@@ -8550,7 +8554,7 @@ class SuiFileUpload {
|
|
|
8550
8554
|
maxSize = input(0, ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
|
|
8551
8555
|
title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
8552
8556
|
subtitle = input(null, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
8553
|
-
browseLabel = input('
|
|
8557
|
+
browseLabel = input('Buscar archivo', ...(ngDevMode ? [{ debugName: "browseLabel" }] : /* istanbul ignore next */ []));
|
|
8554
8558
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
8555
8559
|
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
8556
8560
|
errorMessage = input(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
@@ -8678,7 +8682,7 @@ class SuiFileUpload {
|
|
|
8678
8682
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
8679
8683
|
}
|
|
8680
8684
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8681
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFileUpload, isStandalone: true, selector: "sui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", errorEvent: "errorEvent" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Icon: upload-cloud-2-line 24px, sin contenedor circular (Figma node 450:9404). -->\n<sui-icon class=\"sui-file-upload__icon\" name=\"upload-cloud-2-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n\n<div class=\"sui-file-upload__text\">\n <p class=\"sui-file-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-file-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n</div>\n\n<!-- Browse File button (Figma node 450:9384) \u2014 stroke/neutral. -->\n<sui-button\n class=\"sui-file-upload__browse\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onBrowseClick($event)\">\n {{ browseLabel() }}\n</sui-button>\n\n@if (resolvedErrorMessage()) {\n <p class=\"sui-file-upload__error\">{{ resolvedErrorMessage() }}</p>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"sui-file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:
|
|
8685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiFileUpload, isStandalone: true, selector: "sui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", errorEvent: "errorEvent" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onClick()", "keydown.space": "onClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Icon: upload-cloud-2-line 24px, sin contenedor circular (Figma node 450:9404). -->\n<sui-icon class=\"sui-file-upload__icon\" name=\"upload-cloud-2-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n\n<div class=\"sui-file-upload__text\">\n <p class=\"sui-file-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-file-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n</div>\n\n<!-- Browse File button (Figma node 450:9384) \u2014 stroke/neutral. -->\n<sui-button\n class=\"sui-file-upload__browse\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onBrowseClick($event)\">\n {{ browseLabel() }}\n</sui-button>\n\n@if (resolvedErrorMessage()) {\n <p class=\"sui-file-upload__error\">{{ resolvedErrorMessage() }}</p>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"sui-file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;box-sizing:border-box;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));border:1px dashed var(--sui-stroke-sub-300, #d1d1d1);border-radius:var(--sui-radius-12, 12px);background:var(--sui-bg-white-0, #fff);cursor:pointer;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-size=small]){padding:24px;gap:16px}:host([data-sui-size=medium]){padding:32px}:host([data-sui-size=large]){padding:40px;gap:24px}:host([data-sui-size=xlarge]){padding:48px;gap:28px}:host(:hover:not([data-sui-state=disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus-visible){outline:none;border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .1607843137))}:host([data-sui-state=dragover]){border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}:host([data-sui-state=error]){border-color:var(--sui-state-error-base, #fb3748);background:var(--sui-state-error-lighter, #ffebec)}:host([data-sui-state=disabled]){cursor:not-allowed;opacity:.5;background:var(--sui-bg-weak-50, #f7f7f7)}.sui-file-upload__icon{color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-state=dragover]) .sui-file-upload__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-state=error]) .sui-file-upload__icon{color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__text{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}.sui-file-upload__title{margin:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);word-break:break-word}.sui-file-upload__subtitle{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);word-break:break-word}.sui-file-upload__browse{flex-shrink:0}:host .sui-file-upload__browse[data-sui-size=xsmall]{padding:6px 8px}.sui-file-upload__error{margin:-8px 0 0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8682
8686
|
}
|
|
8683
8687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiFileUpload, decorators: [{
|
|
8684
8688
|
type: Component,
|
|
@@ -8696,7 +8700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
8696
8700
|
'(dragover)': 'onDragOver($event)',
|
|
8697
8701
|
'(dragleave)': 'onDragLeave($event)',
|
|
8698
8702
|
'(drop)': 'onDrop($event)',
|
|
8699
|
-
}, template: "<!-- Icon: upload-cloud-2-line 24px, sin contenedor circular (Figma node 450:9404). -->\n<sui-icon class=\"sui-file-upload__icon\" name=\"upload-cloud-2-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n\n<div class=\"sui-file-upload__text\">\n <p class=\"sui-file-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-file-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n</div>\n\n<!-- Browse File button (Figma node 450:9384) \u2014 stroke/neutral. -->\n<sui-button\n class=\"sui-file-upload__browse\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onBrowseClick($event)\">\n {{ browseLabel() }}\n</sui-button>\n\n@if (resolvedErrorMessage()) {\n <p class=\"sui-file-upload__error\">{{ resolvedErrorMessage() }}</p>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"sui-file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:
|
|
8703
|
+
}, template: "<!-- Icon: upload-cloud-2-line 24px, sin contenedor circular (Figma node 450:9404). -->\n<sui-icon class=\"sui-file-upload__icon\" name=\"upload-cloud-2-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n\n<div class=\"sui-file-upload__text\">\n <p class=\"sui-file-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-file-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n</div>\n\n<!-- Browse File button (Figma node 450:9384) \u2014 stroke/neutral. -->\n<sui-button\n class=\"sui-file-upload__browse\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onBrowseClick($event)\">\n {{ browseLabel() }}\n</sui-button>\n\n@if (resolvedErrorMessage()) {\n <p class=\"sui-file-upload__error\">{{ resolvedErrorMessage() }}</p>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"sui-file-upload__input\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;box-sizing:border-box;text-align:center;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));border:1px dashed var(--sui-stroke-sub-300, #d1d1d1);border-radius:var(--sui-radius-12, 12px);background:var(--sui-bg-white-0, #fff);cursor:pointer;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-size=small]){padding:24px;gap:16px}:host([data-sui-size=medium]){padding:32px}:host([data-sui-size=large]){padding:40px;gap:24px}:host([data-sui-size=xlarge]){padding:48px;gap:28px}:host(:hover:not([data-sui-state=disabled])){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus-visible){outline:none;border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, .1607843137))}:host([data-sui-state=dragover]){border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}:host([data-sui-state=error]){border-color:var(--sui-state-error-base, #fb3748);background:var(--sui-state-error-lighter, #ffebec)}:host([data-sui-state=disabled]){cursor:not-allowed;opacity:.5;background:var(--sui-bg-weak-50, #f7f7f7)}.sui-file-upload__icon{color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-state=dragover]) .sui-file-upload__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-state=error]) .sui-file-upload__icon{color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__text{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}.sui-file-upload__title{margin:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);word-break:break-word}.sui-file-upload__subtitle{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);word-break:break-word}.sui-file-upload__browse{flex-shrink:0}:host .sui-file-upload__browse[data-sui-size=xsmall]{padding:6px 8px}.sui-file-upload__error{margin:-8px 0 0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-state-error-base, #fb3748)}.sui-file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
8700
8704
|
}], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], errorEvent: [{ type: i0.Output, args: ["errorEvent"] }], inputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
8701
8705
|
|
|
8702
8706
|
/**
|
|
@@ -9199,7 +9203,23 @@ const SIZE_PX$1 = {
|
|
|
9199
9203
|
lg: 160,
|
|
9200
9204
|
xl: 200,
|
|
9201
9205
|
};
|
|
9202
|
-
|
|
9206
|
+
/**
|
|
9207
|
+
* Tipos aceptados. HEIC/HEIF desde el 03-10-2026: la foto del iPhone llega así
|
|
9208
|
+
* cuando se sube desde Android o la compu (en el iPhone el sistema ya la
|
|
9209
|
+
* convierte a JPEG). Chrome suele reportar `file.type` vacío para un .heic,
|
|
9210
|
+
* por eso además se acepta por extensión.
|
|
9211
|
+
*/
|
|
9212
|
+
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/heic', 'image/heif'];
|
|
9213
|
+
const ALLOWED_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.heic', '.heif'];
|
|
9214
|
+
/** Valor del `accept` del input file (tipos + extensiones, por el .heic sin MIME). */
|
|
9215
|
+
const SUI_IMAGE_UPLOAD_ACCEPT = [...ALLOWED_TYPES, '.heic', '.heif'].join(',');
|
|
9216
|
+
/** ¿Es una imagen que el componente acepta? Por MIME o, si viene vacío, por extensión. */
|
|
9217
|
+
function esImagenAceptada(file) {
|
|
9218
|
+
if (file.type && ALLOWED_TYPES.includes(file.type.toLowerCase()))
|
|
9219
|
+
return true;
|
|
9220
|
+
const nombre = file.name.toLowerCase();
|
|
9221
|
+
return ALLOWED_EXTENSIONS.some((ext) => nombre.endsWith(ext)) && (!file.type || file.type.startsWith('image/'));
|
|
9222
|
+
}
|
|
9203
9223
|
/**
|
|
9204
9224
|
* SUI Image Upload — SUI Design System 2.0
|
|
9205
9225
|
*
|
|
@@ -9248,7 +9268,7 @@ const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
|
|
|
9248
9268
|
*
|
|
9249
9269
|
* RESUELTO 2026-05-29:
|
|
9250
9270
|
* - 1.7 (component library): el botón "Quitar" pasó de <button> custom a
|
|
9251
|
-
* <sui-button variant="stroke" color="error" size="
|
|
9271
|
+
* <sui-button variant="stroke" color="error" size="xsmall">. Los iconos
|
|
9252
9272
|
* cámara/lápiz pasaron de SVG inline a <sui-icon name="image-add-line" /> y
|
|
9253
9273
|
* <sui-icon name="pencil-line" />.
|
|
9254
9274
|
*
|
|
@@ -9316,7 +9336,13 @@ class SuiImageUpload {
|
|
|
9316
9336
|
/** Camera icon px en el empty state. xl escala a 20, resto 16
|
|
9317
9337
|
* (matchea el escalado del contenedor 32→40 en SCSS). */
|
|
9318
9338
|
iconSize = computed(() => (this.size() === 'xl' ? 20 : 16), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
9339
|
+
/** Ícono del lápiz y el tacho (editable): 20 en botones de 40, 16 en sm (32). */
|
|
9340
|
+
ctrlIconSize = computed(() => (this.size() === 'sm' ? 16 : 20), ...(ngDevMode ? [{ debugName: "ctrlIconSize" }] : /* istanbul ignore next */ []));
|
|
9319
9341
|
hasSrc = computed(() => !!this.src(), ...(ngDevMode ? [{ debugName: "hasSrc" }] : /* istanbul ignore next */ []));
|
|
9342
|
+
/** Hay imagen y se muestra el botón «Quitar» debajo (sin `editable`). */
|
|
9343
|
+
conQuitar = computed(() => this.hasSrc() && !this.editable(), ...(ngDevMode ? [{ debugName: "conQuitar" }] : /* istanbul ignore next */ []));
|
|
9344
|
+
/** Valor del `accept` del input file (incluye HEIC/HEIF). */
|
|
9345
|
+
accept = SUI_IMAGE_UPLOAD_ACCEPT;
|
|
9320
9346
|
state = computed(() => {
|
|
9321
9347
|
if (this.disabled())
|
|
9322
9348
|
return 'disabled';
|
|
@@ -9405,8 +9431,8 @@ class SuiImageUpload {
|
|
|
9405
9431
|
input.value = '';
|
|
9406
9432
|
}
|
|
9407
9433
|
processFile(file) {
|
|
9408
|
-
if (!
|
|
9409
|
-
const msg = 'Tipo no soportado.
|
|
9434
|
+
if (!esImagenAceptada(file)) {
|
|
9435
|
+
const msg = 'Tipo no soportado. Usa JPG, PNG, WebP, GIF o HEIC.';
|
|
9410
9436
|
this.internalError.set(msg);
|
|
9411
9437
|
this.errorEvent.emit(msg);
|
|
9412
9438
|
return;
|
|
@@ -9434,7 +9460,7 @@ class SuiImageUpload {
|
|
|
9434
9460
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
9435
9461
|
}
|
|
9436
9462
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiImageUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiImageUpload, isStandalone: true, selector: "sui-image-upload", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { src: "srcChange", imageSelected: "imageSelected", removed: "removed", editRequested: "editRequested", errorEvent: "errorEvent" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "onHostClick()", "keydown.enter": "onHostClick()", "keydown.space": "onHostClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-shape": "shape()", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-sui-fluid": "fluid() ? \"\" : null", "style.width.px": "fluid() ? null : sizePx()", "style.height.px": "fluid() ? null : sizePx()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["imgInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div class=\"sui-image-upload__preview\" [class.sui-image-upload__preview--editable]=\"editable()\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Preview\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"16\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"2xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n accept=\"image/jpeg,image/png,image/webp,image/gif\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-fluid]){display:block;width:100%}:host([data-sui-fluid]) .sui-image-upload__empty{height:auto;min-height:132px;padding:20px 16px}:host([data-sui-fluid]) .sui-image-upload__preview{height:auto;max-height:320px}:host([data-sui-fluid]) .sui-image-upload__img{height:auto;max-height:320px;object-fit:contain;background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-fluid]) .sui-image-upload__remove{margin-top:8px}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}.sui-image-upload__ctrl{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9463
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiImageUpload, isStandalone: true, selector: "sui-image-upload", inputs: { fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { src: "srcChange", imageSelected: "imageSelected", removed: "removed", editRequested: "editRequested", errorEvent: "errorEvent" }, host: { listeners: { "touchstart": "$event.currentTarget", "touchend": "$any($event.currentTarget).blur()", "click": "onHostClick()", "keydown.enter": "onHostClick()", "keydown.space": "onHostClick(); $event.preventDefault()", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "attr.title": "null", "attr.data-sui-shape": "shape()", "attr.data-sui-size": "size()", "attr.data-sui-state": "state()", "attr.data-sui-disabled": "disabled() ? \"\" : null", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-sui-fluid": "fluid() ? \"\" : null", "style.width.px": "fluid() ? null : sizePx()", "style.height.px": "fluid() || conQuitar() ? null : sizePx()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["imgInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div\n class=\"sui-image-upload__preview\"\n [class.sui-image-upload__preview--editable]=\"editable()\"\n [style.height.px]=\"!fluid() && conQuitar() ? sizePx() : null\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Vista previa\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"ctrlIconSize()\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"ctrlIconSize()\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n [accept]=\"accept\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-fluid]){display:block;width:100%}:host([data-sui-fluid]) .sui-image-upload__empty{height:auto;min-height:132px;padding:20px 16px}:host([data-sui-fluid]) .sui-image-upload__preview{height:auto;max-height:320px}:host([data-sui-fluid]) .sui-image-upload__img{height:auto;max-height:320px;object-fit:contain;background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-fluid]) .sui-image-upload__remove{margin-top:8px}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}:host([data-sui-shape=circle]) .sui-image-upload__controls{inset:auto auto 20% 50%;transform:translate(-50%)}.sui-image-upload__ctrl{width:40px;height:40px;min-width:0;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}:host([data-sui-size=sm]) .sui-image-upload__controls{top:6px;right:6px;gap:4px}:host([data-sui-size=sm]) .sui-image-upload__ctrl{width:32px;height:32px}:host([data-sui-size=sm][data-sui-shape=circle]) .sui-image-upload__controls{top:auto;right:auto;bottom:22%}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9438
9464
|
}
|
|
9439
9465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiImageUpload, decorators: [{
|
|
9440
9466
|
type: Component,
|
|
@@ -9450,7 +9476,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9450
9476
|
'[attr.data-sui-fluid]': 'fluid() ? "" : null',
|
|
9451
9477
|
/* En modo fluido el tamaño lo pone el contenedor, no el `size`. */
|
|
9452
9478
|
'[style.width.px]': 'fluid() ? null : sizePx()',
|
|
9453
|
-
|
|
9479
|
+
/* Con imagen y sin `editable` el «Quitar» va debajo del cuadrado: el alto
|
|
9480
|
+
deja de ser fijo para que el botón quede dentro del componente y no se
|
|
9481
|
+
monte sobre lo que viene después (fix 03-10-2026). El cuadrado de la
|
|
9482
|
+
vista previa conserva su lado con [style.height] en el template. */
|
|
9483
|
+
'[style.height.px]': 'fluid() || conQuitar() ? null : sizePx()',
|
|
9454
9484
|
/* iOS WKWebView :active fix — CRITICO para pages standalone */
|
|
9455
9485
|
'(touchstart)': '$event.currentTarget',
|
|
9456
9486
|
'(touchend)': '$any($event.currentTarget).blur()',
|
|
@@ -9460,7 +9490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
9460
9490
|
'(dragover)': 'onDragOver($event)',
|
|
9461
9491
|
'(dragleave)': 'onDragLeave($event)',
|
|
9462
9492
|
'(drop)': 'onDrop($event)',
|
|
9463
|
-
}, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div
|
|
9493
|
+
}, template: "<!-- Estado: sin imagen (empty / dragover) -->\n@if (!hasSrc()) {\n <div class=\"sui-image-upload__empty\">\n <!-- Icono c\u00E1mara \u2014 sui-icon (DS), no SVG inline -->\n <div class=\"sui-image-upload__icon\">\n <sui-icon name=\"image-add-line\" [size]=\"iconSize()\" aria-hidden=\"true\" />\n </div>\n\n <div class=\"sui-image-upload__text\">\n <p class=\"sui-image-upload__title\">{{ resolvedTitle() }}</p>\n <p class=\"sui-image-upload__subtitle\">{{ resolvedSubtitle() }}</p>\n </div>\n\n @if (internalError()) {\n <p class=\"sui-image-upload__error\">{{ internalError() }}</p>\n }\n </div>\n}\n\n<!-- Estado: con imagen (filled) -->\n@if (hasSrc()) {\n <div\n class=\"sui-image-upload__preview\"\n [class.sui-image-upload__preview--editable]=\"editable()\"\n [style.height.px]=\"!fluid() && conQuitar() ? sizePx() : null\">\n <img\n class=\"sui-image-upload__img\"\n [src]=\"src()\"\n alt=\"Vista previa\"\n draggable=\"false\" />\n\n @if (editable()) {\n <!-- Modo editable: controles de \u00EDcono en esquina (editar + tacho). -->\n <div class=\"sui-image-upload__controls\">\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl\"\n aria-label=\"Editar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onEditClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"pencil-line\" [size]=\"ctrlIconSize()\" aria-hidden=\"true\" />\n </button>\n <button\n type=\"button\"\n class=\"sui-image-upload__ctrl sui-image-upload__ctrl--danger\"\n aria-label=\"Quitar imagen\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon name=\"delete-bin-line\" [size]=\"ctrlIconSize()\" aria-hidden=\"true\" />\n </button>\n </div>\n } @else {\n <!-- Overlay hover con icono lapiz (re-subir) -->\n <div class=\"sui-image-upload__overlay\" (click)=\"onChangeClick($event)\">\n <div class=\"sui-image-upload__overlay-icon\">\n <sui-icon name=\"pencil-line\" [size]=\"16\" aria-hidden=\"true\" />\n </div>\n </div>\n }\n </div>\n\n @if (!editable()) {\n <!-- Bot\u00F3n Quitar debajo del preview \u2014 sui-button stroke (DS), no <button> custom.\n Figma node 452:699 \"Remove\" = stroke error; aqu\u00ED usamos color=error para\n que el affordance de borrado sea consistente con el DS. -->\n <sui-button\n class=\"sui-image-upload__remove\"\n variant=\"stroke\"\n color=\"error\"\n size=\"xsmall\"\n [disabled]=\"disabled()\"\n (click)=\"onRemoveClick($event)\">\n Quitar\n </sui-button>\n }\n}\n\n<!-- Input file oculto (siempre presente para el click) -->\n<input\n #imgInput\n type=\"file\"\n class=\"sui-image-upload__input\"\n [accept]=\"accept\"\n [disabled]=\"disabled()\"\n (change)=\"onInputChange($event)\" />\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));cursor:pointer;flex-shrink:0}:host([data-sui-fluid]){display:block;width:100%}:host([data-sui-fluid]) .sui-image-upload__empty{height:auto;min-height:132px;padding:20px 16px}:host([data-sui-fluid]) .sui-image-upload__preview{height:auto;max-height:320px}:host([data-sui-fluid]) .sui-image-upload__img{height:auto;max-height:320px;object-fit:contain;background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-fluid]) .sui-image-upload__remove{margin-top:8px}:host([data-sui-disabled]){cursor:not-allowed;opacity:.5}.sui-image-upload__empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));text-align:center;padding:12px 8px;box-sizing:border-box;transition:border-color var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),background var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host([data-sui-shape=circle]) .sui-image-upload__empty{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__empty{border-radius:var(--sui-radius-12, 12px)}:host(:hover:not([data-sui-disabled])) .sui-image-upload__empty{border-color:var(--sui-stroke-sub-300, #d1d1d1);background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-state=dragover]) .sui-image-upload__empty{border-color:var(--sui-primary-base, #fa7319);background:var(--sui-primary-alpha-10, rgba(250, 115, 25, .1019607843))}.sui-image-upload__icon{width:32px;height:32px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);display:flex;align-items:center;justify-content:center;color:var(--sui-icon-sub-600, #5c5c5c);flex-shrink:0}:host([data-sui-size=xl]) .sui-image-upload__icon{width:40px;height:40px}:host([data-sui-state=dragover]) .sui-image-upload__icon{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, .1607843137));color:var(--sui-primary-base, #fa7319)}.sui-image-upload__text{display:flex;flex-direction:column;gap:2px;align-items:center}.sui-image-upload__title{margin:0;font-size:12px;font-weight:500;line-height:16px;color:var(--sui-text-strong-950, #171717)}:host([data-sui-size=xl]) .sui-image-upload__title{font-size:13px;line-height:18px}.sui-image-upload__subtitle{margin:0;font-size:11px;font-weight:400;line-height:15px;color:var(--sui-text-sub-600, #5c5c5c)}:host([data-sui-size=sm]) .sui-image-upload__subtitle{display:none}:host([data-sui-size=xl]) .sui-image-upload__subtitle{font-size:12px;line-height:16px}.sui-image-upload__error{margin:2px 0 0;font-size:10px;line-height:14px;color:var(--sui-state-error-base, #fb3748);text-align:center}.sui-image-upload__preview{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(0, 0, 0, .06));flex-shrink:0}:host([data-sui-shape=circle]) .sui-image-upload__preview{border-radius:999px}:host([data-sui-shape=rect]) .sui-image-upload__preview{border-radius:var(--sui-radius-12, 12px)}.sui-image-upload__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.sui-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006;opacity:0;transition:opacity var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1));cursor:pointer}:host(:hover:not([data-sui-disabled])) .sui-image-upload__overlay{opacity:1}.sui-image-upload__overlay-icon{width:32px;height:32px;border-radius:999px;background:#fff3;display:flex;align-items:center;justify-content:center;color:var(--sui-static-white, #fff)}.sui-image-upload__preview--editable{cursor:default}.sui-image-upload__controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}:host([data-sui-shape=circle]) .sui-image-upload__controls{inset:auto auto 20% 50%;transform:translate(-50%)}.sui-image-upload__ctrl{width:40px;height:40px;min-width:0;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:none;background:#0000008c;color:var(--sui-static-white, #fff);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,transform .12s ease}.sui-image-upload__ctrl:active{transform:scale(.92)}.sui-image-upload__ctrl:disabled{opacity:.5;cursor:not-allowed}.sui-image-upload__ctrl--danger:active{background:var(--sui-state-error-base, #fb3748)}:host([data-sui-size=sm]) .sui-image-upload__controls{top:6px;right:6px;gap:4px}:host([data-sui-size=sm]) .sui-image-upload__ctrl{width:32px;height:32px}:host([data-sui-size=sm][data-sui-shape=circle]) .sui-image-upload__controls{top:auto;right:auto;bottom:22%}.sui-image-upload__remove{flex-shrink:0}.sui-image-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
9464
9494
|
}], propDecorators: { fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }, { type: i0.Output, args: ["srcChange"] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], imageSelected: [{ type: i0.Output, args: ["imageSelected"] }], removed: [{ type: i0.Output, args: ["removed"] }], editRequested: [{ type: i0.Output, args: ["editRequested"] }], errorEvent: [{ type: i0.Output, args: ["errorEvent"] }], inputRef: [{ type: i0.ViewChild, args: ['imgInput', { isSignal: true }] }] } });
|
|
9465
9495
|
|
|
9466
9496
|
/**
|
|
@@ -10642,7 +10672,7 @@ class SuiInput {
|
|
|
10642
10672
|
useExisting: forwardRef(() => SuiInput),
|
|
10643
10673
|
multi: true,
|
|
10644
10674
|
},
|
|
10645
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: 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-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);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-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{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-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10675
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: 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-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);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-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{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-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}:host([data-sui-size=large]) .sui-input__prefix,:host([data-sui-size=xlarge]) .sui-input__prefix{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px)}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}:host([data-sui-size=large]) .sui-input__control,:host([data-sui-size=xlarge]) .sui-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10646
10676
|
}
|
|
10647
10677
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiInput, decorators: [{
|
|
10648
10678
|
type: Component,
|
|
@@ -10669,7 +10699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
10669
10699
|
decorativo. */
|
|
10670
10700
|
'[attr.data-sui-leading-control]': 'leadingControl() ? "" : null',
|
|
10671
10701
|
'[attr.data-sui-trailing-control]': 'trailingControl() ? "" : null',
|
|
10672
|
-
}, 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-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);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-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{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-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
10702
|
+
}, 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-input__label-host\"\n />\n}\n\n<div\n class=\"sui-input__field\"\n [class.sui-input__field--error]=\"error()\"\n [class.sui-input__field--disabled]=\"isDisabled()\"\n [class.sui-input__field--readonly]=\"readonly()\"\n [class.sui-input__field--split]=\"_hasLeadingDivider() || _hasTrailingDivider()\"\n [class.sui-input__field--split-leading]=\"_hasLeadingDivider()\"\n [class.sui-input__field--split-trailing]=\"_hasTrailingDivider()\"\n [class.sui-input__field--button]=\"type() === 'button'\"\n>\n <!--\n Split-field con divisor vertical (gen\u00E9rico por lado):\n - trailing (Figma node 332:1667 \"Button\"): acci\u00F3n a la derecha + divisor\n border-right. `type='button'` lo activa solo.\n - leading (Figma node 313:10267 \"Phone\"): afijo interactivo a la izquierda\n (ej. country select) + divisor border-left.\n El input + \u00EDconos van en la zona interna `.sui-input__inner`, que lleva el\n padding y el/los border(s) de divisor. Los `[data-slot=start/end]` quedan\n flush a su lado como zonas de afijo. Para los types sin divisor,\n `.sui-input__inner` es transparente (display: contents) y el layout es el de\n siempre.\n -->\n\n <!-- ng-content start slot \u2014 afijo leading (flush cuando es control/divisor) -->\n <ng-content select=\"[data-slot=start]\" />\n\n <div class=\"sui-input__inner\">\n <!-- Built-in icon slot (left) -->\n @if (icon() && iconPosition() === 'left') {\n <span class=\"sui-input__icon sui-input__icon--left\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n\n <!-- Prefix label (S/, $, %) -->\n @if (prefix()) {\n <span class=\"sui-input__prefix\">{{ prefix() }}</span>\n }\n\n <input\n #inputEl\n class=\"sui-input__control\"\n [type]=\"nativeType()\"\n [attr.inputmode]=\"inputMode()\"\n [attr.enterkeyhint]=\"enterKeyHint()\"\n [value]=\"\n type() === 'amount'\n ? displayAmountValue()\n : type() === 'card'\n ? displayCardValue()\n : value()\n \"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"type() === 'card' ? (maxlength() ?? 19) : maxlength()\"\n [attr.min]=\"type() === 'number' ? min() : null\"\n [attr.max]=\"type() === 'number' ? max() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\"\n (keydown)=\"onKeydown($event)\"\n (paste)=\"onPaste($event)\"\n />\n </div>\n\n <!-- ng-content end slot (backward compat) -->\n <ng-content select=\"[data-slot=end]\" />\n\n <!-- Clear button -->\n @if (showClear() && value() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"sui-input__clear\"\n aria-label=\"Limpiar\"\n (click)=\"clearValue()\"\n >\n <sui-icon name=\"close-circle-line\" [size]=\"clearPx()\" />\n </button>\n }\n\n <!-- Password toggle button -->\n @if (type() === 'password-toggle' && !isDisabled()) {\n <button\n type=\"button\"\n class=\"sui-input__eye\"\n [attr.aria-label]=\"showPassword() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n (click)=\"togglePassword()\"\n >\n <sui-icon [name]=\"showPassword() ? 'eye-off-line' : 'eye-line'\" [size]=\"20\" />\n </button>\n }\n\n <!-- Built-in icon slot (right) -->\n @if (icon() && iconPosition() === 'right') {\n <span class=\"sui-input__icon sui-input__icon--right\">\n <sui-icon [name]=\"icon()!\" [size]=\"20\" />\n </span>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"_resolvedHintIcon()\"\n class=\"sui-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-input__label-host{display:block;margin-bottom:4px}.sui-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);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-input__field{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-input__field,:host(:not([data-sui-size])) .sui-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}:host([data-sui-full-radius]) .sui-input__field{border-radius:999px}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):hover{border-color:var(--sui-stroke-sub-300)}.sui-input__field:not(.sui-input__field--disabled):not(.sui-input__field--error):not(.sui-input__field--readonly):focus-within{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-input__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-input__field--error:not(.sui-input__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-input__field--error:not(.sui-input__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-input__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-input__field ::ng-deep [data-slot=start],.sui-input__field ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-leading-control]) .sui-input__field ::ng-deep [data-slot=start],:host([data-sui-trailing-control]) .sui-input__field ::ng-deep [data-slot=end]{width:auto;height:auto;align-self:stretch;pointer-events:auto}.sui-input__inner{display:contents}.sui-input__field--split{align-items:stretch;overflow:hidden;padding:0!important;gap:0!important}.sui-input__field--split .sui-input__inner{display:flex;flex:1 1 auto;min-width:0;align-items:center;box-sizing:border-box}:host([data-sui-size=xsmall]) .sui-input__field--split .sui-input__inner{gap:6px;padding:5px 6px 5px 8px}:host([data-sui-size=small]) .sui-input__field--split .sui-input__inner{gap:8px;padding:7px 8px 7px 10px}:host([data-sui-size=medium]) .sui-input__field--split .sui-input__inner,:host(:not([data-sui-size])) .sui-input__field--split .sui-input__inner{gap:8px;padding:9px 10px 9px 12px}:host([data-sui-size=large]) .sui-input__field--split .sui-input__inner{gap:10px;padding:11px 12px 11px 14px}:host([data-sui-size=xlarge]) .sui-input__field--split .sui-input__inner{gap:10px;padding:13px 14px 13px 16px}.sui-input__field--split-trailing .sui-input__inner{border-right:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-trailing.sui-input__field--error .sui-input__inner{border-right-color:var(--sui-state-error-base)}.sui-input__field--split-trailing.sui-input__field--disabled .sui-input__inner{border-right-color:transparent}.sui-input__field--split-trailing ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:auto;align-self:stretch;color:var(--sui-icon-sub-600);pointer-events:auto}:host([data-sui-size=xsmall]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:6px}:host([data-sui-size=small]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:8px}:host([data-sui-size=medium]) .sui-input__field--split-trailing ::ng-deep [data-slot=end],:host(:not([data-sui-size])) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:10px}:host([data-sui-size=large]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:12px}:host([data-sui-size=xlarge]) .sui-input__field--split-trailing ::ng-deep [data-slot=end]{padding:14px}.sui-input__field--split-leading .sui-input__inner{border-left:1px solid var(--sui-stroke-soft-200)}.sui-input__field--split-leading.sui-input__field--error .sui-input__inner{border-left-color:var(--sui-state-error-base)}.sui-input__field--split-leading.sui-input__field--disabled .sui-input__inner{border-left-color:transparent}:host(:not([data-sui-leading-control])[data-sui-size=xsmall]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:6px 6px 6px 8px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=small]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:8px 8px 8px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=medium]) .sui-input__field--split-leading ::ng-deep [data-slot=start],:host(:not([data-sui-leading-control]):not([data-sui-size])) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:10px 8px 10px 10px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=large]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:12px 10px 12px 12px;box-sizing:content-box}:host(:not([data-sui-leading-control])[data-sui-size=xlarge]) .sui-input__field--split-leading ::ng-deep [data-slot=start]{padding:14px 10px 14px 14px;box-sizing:content-box}.sui-input__prefix{flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-sub-600);-webkit-user-select:none;user-select:none;pointer-events:none}:host([data-sui-size=large]) .sui-input__prefix,:host([data-sui-size=xlarge]) .sui-input__prefix{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px)}.sui-input__icon{display:inline-flex;align-items:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);pointer-events:none}:host([data-sui-disabled]) .sui-input__icon{color:var(--sui-icon-disabled-300)}:host([data-sui-size=xsmall]) .sui-input__clear{width:12px;height:12px}:host([data-sui-size=small]) .sui-input__clear{width:14px;height:14px}:host([data-sui-size=large]) .sui-input__clear{width:18px;height:18px}:host([data-sui-size=xlarge]) .sui-input__clear{width:20px;height:20px}.sui-input__clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;opacity:.7;line-height:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__clear:hover{opacity:1;color:var(--sui-text-strong-950)}.sui-input__clear:focus{outline:none}.sui-input__eye{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;min-height:0;min-width:0;padding:0;border:none;background:transparent;color:var(--sui-icon-sub-600);cursor:pointer;line-height:0;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-input__eye:hover{color:var(--sui-text-strong-950)}.sui-input__eye:focus{outline:none}.sui-input__control{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none;box-sizing:border-box}.sui-input__control[type=date],.sui-input__control[type=time],.sui-input__control[type=datetime-local],.sui-input__control[type=month],.sui-input__control[type=week]{-webkit-appearance:none;appearance:none;min-height:1.25em}.sui-input__control[type=date]::-webkit-date-and-time-value,.sui-input__control[type=time]::-webkit-date-and-time-value,.sui-input__control[type=datetime-local]::-webkit-date-and-time-value,.sui-input__control[type=month]::-webkit-date-and-time-value,.sui-input__control[type=week]::-webkit-date-and-time-value{text-align:left;margin:0}.sui-input__control[type=date]::-webkit-calendar-picker-indicator,.sui-input__control[type=time]::-webkit-calendar-picker-indicator,.sui-input__control[type=datetime-local]::-webkit-calendar-picker-indicator,.sui-input__control[type=month]::-webkit-calendar-picker-indicator,.sui-input__control[type=week]::-webkit-calendar-picker-indicator{margin-left:auto;opacity:.55;cursor:pointer}:host([data-sui-size=large]) .sui-input__control,:host([data-sui-size=xlarge]) .sui-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-input__control{font-size:16px}}.sui-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-input__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-input__control[readonly]{color:var(--sui-text-sub-600);cursor:default}.sui-input__control:focus{outline:none}.sui-input__control[type=number]{-moz-appearance:textfield}.sui-input__control[type=number]::-webkit-inner-spin-button,.sui-input__control[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.sui-input__control[type=search]::-webkit-search-decoration,.sui-input__control[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.sui-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
10673
10703
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullRadius", 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 }] }], hintIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintIcon", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], enterkeyhint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterkeyhint", 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"] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], paste: [{ type: i0.Input, args: [{ isSignal: true, alias: "paste", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], leadingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingDivider", required: false }] }], trailingDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingDivider", required: false }] }], leadingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingControl", required: false }] }], trailingControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingControl", required: false }] }], inputEl: [{
|
|
10674
10704
|
type: ViewChild,
|
|
10675
10705
|
args: ['inputEl']
|
|
@@ -10770,7 +10800,7 @@ class SuiIntegrationSwitch {
|
|
|
10770
10800
|
const b = this.badge();
|
|
10771
10801
|
return b ? (typeof b === 'string' ? { label: b } : b) : null;
|
|
10772
10802
|
}, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
|
|
10773
|
-
/** Manage button — true = defaults ('
|
|
10803
|
+
/** Manage button — true = defaults ('Administrar' + settings-2-line), string =
|
|
10774
10804
|
label custom con icon default, SuiIntegrationManageConfig = todo,
|
|
10775
10805
|
false/null = oculto. */
|
|
10776
10806
|
manage = input(true, ...(ngDevMode ? [{ debugName: "manage" }] : /* istanbul ignore next */ []));
|
|
@@ -10779,7 +10809,7 @@ class SuiIntegrationSwitch {
|
|
|
10779
10809
|
if (m === false || m === null || m === '')
|
|
10780
10810
|
return null;
|
|
10781
10811
|
const cfg = m === true ? {} : typeof m === 'string' ? { label: m } : m;
|
|
10782
|
-
return { label: cfg.label ?? '
|
|
10812
|
+
return { label: cfg.label ?? 'Administrar', icon: cfg.icon ?? 'settings-2-line' };
|
|
10783
10813
|
}, ...(ngDevMode ? [{ debugName: "manageCfg" }] : /* istanbul ignore next */ []));
|
|
10784
10814
|
/** Mostrar el switch toggle. Default true. */
|
|
10785
10815
|
showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : /* istanbul ignore next */ []));
|
|
@@ -12500,10 +12530,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12500
12530
|
*/
|
|
12501
12531
|
class SuiNotificationFooter {
|
|
12502
12532
|
/** Label default del link de gestión (Figma "Manage Notification"). */
|
|
12503
|
-
static DEFAULT_MANAGE_LABEL = '
|
|
12504
|
-
usePrefix = input('
|
|
12505
|
-
useSuffix = input('
|
|
12506
|
-
/** Link de gestión — true = label default ('
|
|
12533
|
+
static DEFAULT_MANAGE_LABEL = 'Administrar notificaciones';
|
|
12534
|
+
usePrefix = input('Usa', ...(ngDevMode ? [{ debugName: "usePrefix" }] : /* istanbul ignore next */ []));
|
|
12535
|
+
useSuffix = input('para moverte', ...(ngDevMode ? [{ debugName: "useSuffix" }] : /* istanbul ignore next */ []));
|
|
12536
|
+
/** Link de gestión — true = label default ('Administrar notificaciones'); string =
|
|
12507
12537
|
* label custom (emite `manageClick`); SuiLinkConfig { label, href?, target?,
|
|
12508
12538
|
* rel? }: con href renderiza <a> real, rel automático 'noopener noreferrer'
|
|
12509
12539
|
* para _blank. false/null = oculto (Figma prop `button` off). */
|
|
@@ -12771,7 +12801,7 @@ class SuiNotification {
|
|
|
12771
12801
|
this.moreClicked.emit(event);
|
|
12772
12802
|
}
|
|
12773
12803
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12774
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null", "attr.data-sui-show-more": "showMore() ? \"\" : null" } }, ngImport: i0, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card (Figma: hug-content + clip attachment-line) -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <sui-icon\n class=\"sui-notification__file-icon\"\n name=\"attachment-line\"\n [size]=\"16\"\n aria-hidden=\"true\"\n />\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px;border:none}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]):not(.sui-notification--has-avatar),.sui-notification[data-sui-style=stroke]:not(.sui-notification--has-avatar){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);box-sizing:border-box;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__file ::ng-deep .sui-notification__file-size{color:var(--sui-text-soft-400)}.sui-notification__file-icon{flex-shrink:0;color:var(--sui-text-sub-600)}.sui-notification__bubble{align-self:flex-start;max-width:100%;margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12804
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiNotification, isStandalone: true, selector: "sui-notification", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, variantStyle: { classPropertyName: "variantStyle", publicName: "variantStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", moreClicked: "moreClicked" }, host: { properties: { "attr.title": "null", "attr.data-sui-show-more": "showMore() ? \"\" : null" } }, ngImport: i0, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card (Figma: hug-content + clip attachment-line) -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <sui-icon\n class=\"sui-notification__file-icon\"\n name=\"attachment-line\"\n [size]=\"16\"\n aria-hidden=\"true\"\n />\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px;border:none}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]):not(.sui-notification--has-avatar),.sui-notification[data-sui-style=stroke]:not(.sui-notification--has-avatar){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification__close ::ng-deep .sui-compact-button__el{position:relative}.sui-notification__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-10px}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);box-sizing:border-box;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__file ::ng-deep .sui-notification__file-size{color:var(--sui-text-soft-400)}.sui-notification__file-icon{flex-shrink:0;color:var(--sui-text-sub-600)}.sui-notification__bubble{align-self:flex-start;max-width:100%;margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12775
12805
|
}
|
|
12776
12806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiNotification, decorators: [{
|
|
12777
12807
|
type: Component,
|
|
@@ -12779,7 +12809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12779
12809
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
|
|
12780
12810
|
'[attr.title]': 'null',
|
|
12781
12811
|
'[attr.data-sui-show-more]': 'showMore() ? "" : null',
|
|
12782
|
-
}, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card (Figma: hug-content + clip attachment-line) -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <sui-icon\n class=\"sui-notification__file-icon\"\n name=\"attachment-line\"\n [size]=\"16\"\n aria-hidden=\"true\"\n />\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px;border:none}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]):not(.sui-notification--has-avatar),.sui-notification[data-sui-style=stroke]:not(.sui-notification--has-avatar){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);box-sizing:border-box;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__file ::ng-deep .sui-notification__file-size{color:var(--sui-text-soft-400)}.sui-notification__file-icon{flex-shrink:0;color:var(--sui-text-sub-600)}.sui-notification__bubble{align-self:flex-start;max-width:100%;margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
|
|
12812
|
+
}, template: "<div\n class=\"sui-notification\"\n [class.sui-notification--hoverable]=\"showMore()\"\n [class.sui-notification--active]=\"active()\"\n [class.sui-notification--has-avatar]=\"hasAvatar()\"\n [attr.data-sui-variant]=\"variant()\"\n [attr.data-sui-style]=\"variantStyle()\"\n [attr.data-sui-type]=\"type()\"\n [attr.role]=\"role()\"\n [attr.aria-live]=\"ariaLive()\"\n>\n <!-- Leading: avatar OR status icon -->\n @if (hasAvatar()) {\n <div class=\"sui-notification__avatar\" aria-hidden=\"true\">\n @if (avatarCfg()!.src; as src) {\n <img [src]=\"src\" alt=\"\" />\n } @else {\n <span class=\"sui-notification__avatar-initials\">{{ avatarCfg()!.initials }}</span>\n }\n </div>\n } @else if (showLeadingIcon()) {\n <div class=\"sui-notification__icon\" aria-hidden=\"true\">\n <sui-icon [name]=\"iconName()\" [size]=\"20\" />\n </div>\n }\n\n <div class=\"sui-notification__content\">\n <!-- Header: title + unread dot + timestamp -->\n <div class=\"sui-notification__header\">\n @if (title()) {\n <p class=\"sui-notification__title\">{{ title() }}</p>\n }\n @if (unread()) {\n <span class=\"sui-notification__dot\" aria-label=\"No le\u00EDdo\"></span>\n }\n @if (timestamp() && type() === 'basic' && !hasAvatar()) {\n <span class=\"sui-notification__time\">{{ timestamp() }}</span>\n }\n </div>\n\n <!-- Compound description: timestamp \u2219 company-logo \u2219 text.\n For type=basic the timestamp lives in the header (not here), so the\n description block must only render on real content \u2014 otherwise an\n empty <p> occupies a phantom 4px gap below the title. -->\n @if (description() || (timestamp() && (type() !== 'basic' || hasAvatar())) || type() !== 'basic') {\n <p class=\"sui-notification__description\">\n @if (timestamp() && (type() !== 'basic' || hasAvatar())) {\n <span class=\"sui-notification__meta-time\">{{ timestamp() }}</span>\n <span class=\"sui-notification__sep\" aria-hidden=\"true\">\u2219</span>\n }\n <span class=\"sui-notification__company-logo\">\n <ng-content select=\"[slot=company-logo]\" />\n </span>\n @if (description()) {\n <span class=\"sui-notification__desc-text\">{{ description() }}</span>\n }\n </p>\n }\n\n <!-- Type=file: attachment card (Figma: hug-content + clip attachment-line) -->\n @if (type() === 'file') {\n <div class=\"sui-notification__file\">\n <sui-icon\n class=\"sui-notification__file-icon\"\n name=\"attachment-line\"\n [size]=\"16\"\n aria-hidden=\"true\"\n />\n <ng-content select=\"[slot=file]\" />\n </div>\n }\n\n <!-- Type=message: response bubble -->\n @if (type() === 'message') {\n <div class=\"sui-notification__bubble\">\n <ng-content select=\"[slot=message]\" />\n </div>\n }\n\n <!-- Free custom content -->\n <ng-content />\n\n <!-- Actions slot (also hosts type=button Deny/Approve pair) -->\n <div class=\"sui-notification__actions\">\n <ng-content select=\"[slot=actions]\" />\n </div>\n </div>\n\n <!-- Hover affordance: more-2-line (notification item) = COMPONENTE\n sui-compact-button (variantStyle ghost: transparent + hover bg-weak-50,\n radius-6, icon 20 = size large), NO un <button> maqueta. El posicionamiento\n absoluto y el reveal on-hover (opacity 0\u21921) los aporta `.sui-notification__more`. -->\n @if (showMore()) {\n <sui-compact-button\n class=\"sui-notification__more\"\n icon=\"more-2-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"M\u00E1s opciones\"\n (clicked)=\"onMore($event)\"\n />\n }\n\n @if (dismissible()) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192 el icono\n hereda el currentColor del per-style `.sui-notification__close`), NO un\n <button> maqueta. icon 16 = size medium (patr\u00F3n canon sui-alert). -->\n <sui-compact-button\n class=\"sui-notification__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"onDismiss()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-notification{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--sui-radius-12);overflow:hidden;border:1px solid transparent;box-sizing:border-box}.sui-notification.sui-notification--has-avatar{padding:12px;gap:15px;border:none}.sui-notification[data-sui-style=filled]{border:none;box-shadow:var(--sui-custom-shadow-small)}.sui-notification[data-sui-style=filled] .sui-notification__title,.sui-notification[data-sui-style=filled] .sui-notification__description,.sui-notification[data-sui-style=filled] .sui-notification__icon{color:var(--sui-static-white)}.sui-notification[data-sui-style=filled] .sui-notification__time,.sui-notification[data-sui-style=filled] .sui-notification__close{color:var(--sui-static-white);opacity:.72}.sui-notification[data-sui-style=filled] .sui-notification__dot{background:var(--sui-static-white)}.sui-notification[data-sui-style=filled][data-sui-variant=info]{background:var(--sui-state-information-base)}.sui-notification[data-sui-style=filled][data-sui-variant=success]{background:var(--sui-state-success-base)}.sui-notification[data-sui-style=filled][data-sui-variant=warning]{background:var(--sui-state-warning-base)}.sui-notification[data-sui-style=filled][data-sui-variant=error]{background:var(--sui-state-error-base)}.sui-notification[data-sui-style=filled][data-sui-variant=feature]{background:var(--sui-state-feature-base)}.sui-notification[data-sui-style=filled][data-sui-variant=default]{background:var(--sui-bg-strong-950)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__title,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__description,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__time,.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__close{color:var(--sui-text-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__icon{color:var(--sui-icon-white-0)}.sui-notification[data-sui-style=filled][data-sui-variant=default] .sui-notification__dot{background:var(--sui-text-white-0)}.sui-notification[data-sui-style=light]{border:none}.sui-notification[data-sui-style=light] .sui-notification__title,.sui-notification[data-sui-style=light] .sui-notification__description{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=light][data-sui-variant=info]{background:var(--sui-state-information-light)}.sui-notification[data-sui-style=light][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=light][data-sui-variant=success]{background:var(--sui-state-success-light)}.sui-notification[data-sui-style=light][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=light][data-sui-variant=warning]{background:var(--sui-state-warning-light)}.sui-notification[data-sui-style=light][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=light][data-sui-variant=error]{background:var(--sui-state-error-light)}.sui-notification[data-sui-style=light][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=light][data-sui-variant=feature]{background:var(--sui-state-feature-light)}.sui-notification[data-sui-style=light][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=light][data-sui-variant=default]{background:var(--sui-bg-weak-50)}.sui-notification[data-sui-style=lighter] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter] .sui-notification__description{color:var(--sui-text-strong-950);opacity:.72}.sui-notification[data-sui-style=lighter] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification[data-sui-style=lighter][data-sui-variant=info]{background:var(--sui-state-information-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=success]{background:var(--sui-state-success-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning]{background:var(--sui-state-warning-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=error]{background:var(--sui-state-error-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature]{background:var(--sui-state-feature-lighter)}.sui-notification[data-sui-style=lighter][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification[data-sui-style=lighter][data-sui-variant=default]{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200)}.sui-notification:not([data-sui-style]):not(.sui-notification--has-avatar),.sui-notification[data-sui-style=stroke]:not(.sui-notification--has-avatar){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-custom-shadow-small)}.sui-notification:not([data-sui-style]) .sui-notification__title,.sui-notification[data-sui-style=stroke] .sui-notification__title{color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style]) .sui-notification__description,.sui-notification[data-sui-style=stroke] .sui-notification__description{color:var(--sui-text-sub-600)}.sui-notification:not([data-sui-style]) .sui-notification__close,.sui-notification[data-sui-style=stroke] .sui-notification__close{opacity:.4;color:var(--sui-text-strong-950)}.sui-notification:not([data-sui-style])[data-sui-variant=info] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=info] .sui-notification__icon{color:var(--sui-state-information-base)}.sui-notification:not([data-sui-style])[data-sui-variant=success] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=success] .sui-notification__icon{color:var(--sui-state-success-base)}.sui-notification:not([data-sui-style])[data-sui-variant=warning] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=warning] .sui-notification__icon{color:var(--sui-state-warning-base)}.sui-notification:not([data-sui-style])[data-sui-variant=error] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=error] .sui-notification__icon{color:var(--sui-state-error-base)}.sui-notification:not([data-sui-style])[data-sui-variant=feature] .sui-notification__icon,.sui-notification[data-sui-style=stroke][data-sui-variant=feature] .sui-notification__icon{color:var(--sui-state-feature-base)}.sui-notification__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sui-bg-strong-950)}.sui-notification__avatar img{width:100%;height:100%;object-fit:cover;display:block}.sui-notification__avatar-initials{font-family:var(--sui-font-sans);font-size:14px;font-weight:600;line-height:1;color:var(--sui-text-white-0);text-transform:uppercase;letter-spacing:.02em;-webkit-user-select:none;user-select:none}.sui-notification__icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:2px}.sui-notification__content{display:flex;flex:1 0 0;flex-direction:column;gap:4px;min-width:0}.sui-notification__header{display:flex;align-items:center;gap:6px;min-width:0}.sui-notification__title{margin:0;flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--sui-primary-base)}:host([data-sui-show-more]) .sui-notification__time{margin-right:32px}.sui-notification__time{flex-shrink:0;margin-left:auto;font-family:var(--sui-font-sans);font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-soft-400);white-space:nowrap}.sui-notification__description{margin:0;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}.sui-notification__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.sui-notification__actions:empty{display:none}.sui-notification__close{flex-shrink:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification__close:hover{opacity:1!important}.sui-notification__close ::ng-deep .sui-compact-button__el{position:relative}.sui-notification__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-10px}.sui-notification--hoverable{cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable .sui-notification__more{opacity:0;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-notification--hoverable:hover,.sui-notification--hoverable.sui-notification--active{background:var(--sui-bg-weak-50)}.sui-notification--hoverable:hover .sui-notification__more,.sui-notification--hoverable.sui-notification--active .sui-notification__more{opacity:1}.sui-notification__description{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.sui-notification__meta-time{flex-shrink:0;color:var(--sui-text-soft-400)}.sui-notification__sep{flex-shrink:0;color:var(--sui-text-soft-400);-webkit-user-select:none;user-select:none}.sui-notification__company-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-notification__company-logo:empty{display:none}.sui-notification__company-logo ::ng-deep img,.sui-notification__company-logo ::ng-deep svg{width:16px;height:16px;border-radius:var(--sui-radius-full);object-fit:cover;display:block}.sui-notification__desc-text{min-width:0}.sui-notification__file{align-self:flex-start;max-width:100%;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:var(--sui-radius-8);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);box-sizing:border-box;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__file ::ng-deep .sui-notification__file-size{color:var(--sui-text-soft-400)}.sui-notification__file-icon{flex-shrink:0;color:var(--sui-text-sub-600)}.sui-notification__bubble{align-self:flex-start;max-width:100%;margin-top:8px;padding:8px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);border-radius:4px 8px 10px;box-sizing:border-box;font-family:var(--sui-font-sans);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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-notification__bubble:empty{display:none}.sui-notification__more{position:absolute;top:12px;right:12px;flex-shrink:0}\n"] }]
|
|
12783
12813
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], variantStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "variantStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMore", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], moreClicked: [{ type: i0.Output, args: ["moreClicked"] }] } });
|
|
12784
12814
|
|
|
12785
12815
|
/**
|
|
@@ -12823,6 +12853,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12823
12853
|
* - CVA: el value expuesto es el string concatenado de todas las celdas.
|
|
12824
12854
|
*
|
|
12825
12855
|
* @input length Cantidad de celdas (default 6).
|
|
12856
|
+
* @input size 'large' (80×64, guía) | 'medium' (52×56) | 'small' (44×48).
|
|
12857
|
+
* Además las celdas se achican si no entran en el ancho
|
|
12858
|
+
* del contenedor (extensión SUI, 03-10-2026).
|
|
12826
12859
|
* @input type 'number' | 'text' — 'number' restringe a [0-9] e
|
|
12827
12860
|
* inputmode='numeric'; 'text' acepta cualquier char e
|
|
12828
12861
|
* inputmode='text'.
|
|
@@ -12842,6 +12875,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12842
12875
|
class SuiOtpInput {
|
|
12843
12876
|
// ── Inputs ─────────────────────────────────────────────────────────────────
|
|
12844
12877
|
length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
|
|
12878
|
+
/** Tamaño de la celda: large 80×64 (guía, default) · medium 52×56 · small 44×48. */
|
|
12879
|
+
size = input('large', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
12845
12880
|
type = input('number', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
12846
12881
|
disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
12847
12882
|
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
@@ -13002,13 +13037,13 @@ class SuiOtpInput {
|
|
|
13002
13037
|
this.disabled.set(isDisabled);
|
|
13003
13038
|
}
|
|
13004
13039
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiOtpInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13005
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiOtpInput, isStandalone: true, selector: "sui-otp-input", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", completed: "completed" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.title": "null" }, classAttribute: "sui-otp-input" }, providers: [
|
|
13040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiOtpInput, isStandalone: true, selector: "sui-otp-input", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", completed: "completed" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-sui-size": "size()", "attr.title": "null" }, classAttribute: "sui-otp-input" }, providers: [
|
|
13006
13041
|
{
|
|
13007
13042
|
provide: NG_VALUE_ACCESSOR,
|
|
13008
13043
|
useExisting: forwardRef(() => SuiOtpInput),
|
|
13009
13044
|
multi: true,
|
|
13010
13045
|
},
|
|
13011
|
-
], viewQueries: [{ propertyName: "inputs", predicate: ["cellInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (i of indices(); track i) {\n <input\n #cellInput\n class=\"sui-otp-input__cell\"\n [class.sui-otp-input__cell--error]=\"error()\"\n type=\"text\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n [attr.maxlength]=\"1\"\n [attr.aria-label]=\"'D\u00EDgito ' + (i + 1)\"\n [value]=\"cells()[i]\"\n [disabled]=\"disabled()\"\n (input)=\"onCellInput(i, $event)\"\n (keydown)=\"onCellKeydown(i, $event)\"\n (paste)=\"onCellPaste(i, $event)\"\n (focus)=\"onCellFocus($event)\"\n (blur)=\"onBlur()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px}.sui-otp-input__cell{box-sizing:border-box;width:80px;height:64px;padding:16px 8px;margin:0;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-10);background-color:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);outline:none;font-size:var(--sui-type-title-h5-size);font-weight:var(--sui-type-title-h5-weight);line-height:var(--sui-type-title-h5-line);letter-spacing:var(--sui-type-title-h5-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;color:var(--sui-text-strong-950);caret-color:var(--sui-text-strong-950);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),background-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out)}.sui-otp-input__cell:hover:not(:focus):not(:disabled):not(.sui-otp-input__cell--error){background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-otp-input__cell:focus{border-color:var(--sui-stroke-strong-950);background-color:var(--sui-bg-white-0);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-otp-input__cell--error{border-color:var(--sui-state-error-base)}.sui-otp-input__cell--error:focus{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-otp-input__cell:disabled{background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;color:var(--sui-text-disabled-300);cursor:not-allowed}.sui-otp-input__cell::placeholder{color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13046
|
+
], viewQueries: [{ propertyName: "inputs", predicate: ["cellInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (i of indices(); track i) {\n <input\n #cellInput\n class=\"sui-otp-input__cell\"\n [class.sui-otp-input__cell--error]=\"error()\"\n type=\"text\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n [attr.maxlength]=\"1\"\n [attr.aria-label]=\"'D\u00EDgito ' + (i + 1)\"\n [value]=\"cells()[i]\"\n [disabled]=\"disabled()\"\n (input)=\"onCellInput(i, $event)\"\n (keydown)=\"onCellKeydown(i, $event)\"\n (paste)=\"onCellPaste(i, $event)\"\n (focus)=\"onCellFocus($event)\"\n (blur)=\"onBlur()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;max-width:100%}.sui-otp-input__cell{box-sizing:border-box;width:80px;height:64px;padding:16px 8px;margin:0;flex:0 1 auto;min-width:0;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-10);background-color:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);outline:none;font-size:var(--sui-type-title-h5-size);font-weight:var(--sui-type-title-h5-weight);line-height:var(--sui-type-title-h5-line);letter-spacing:var(--sui-type-title-h5-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;color:var(--sui-text-strong-950);caret-color:var(--sui-text-strong-950);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),background-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out)}.sui-otp-input__cell:hover:not(:focus):not(:disabled):not(.sui-otp-input__cell--error){background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-otp-input__cell:focus{border-color:var(--sui-stroke-strong-950);background-color:var(--sui-bg-white-0);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-otp-input__cell--error{border-color:var(--sui-state-error-base)}.sui-otp-input__cell--error:focus{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-otp-input__cell:disabled{background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;color:var(--sui-text-disabled-300);cursor:not-allowed}.sui-otp-input__cell::placeholder{color:transparent}:host([data-sui-size=medium]) .sui-otp-input__cell{width:52px;height:56px;padding:12px 4px}:host([data-sui-size=small]) .sui-otp-input__cell{width:44px;height:48px;padding:10px 4px;border-radius:var(--sui-radius-8);font-size:var(--sui-type-title-h6-size);font-weight:var(--sui-type-title-h6-weight);line-height:var(--sui-type-title-h6-line);letter-spacing:var(--sui-type-title-h6-spacing)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13012
13047
|
}
|
|
13013
13048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiOtpInput, decorators: [{
|
|
13014
13049
|
type: Component,
|
|
@@ -13017,6 +13052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13017
13052
|
role: 'group',
|
|
13018
13053
|
'[attr.aria-label]': 'ariaLabel()',
|
|
13019
13054
|
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
13055
|
+
'[attr.data-sui-size]': 'size()',
|
|
13020
13056
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
|
|
13021
13057
|
'[attr.title]': 'null',
|
|
13022
13058
|
}, providers: [
|
|
@@ -13025,8 +13061,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13025
13061
|
useExisting: forwardRef(() => SuiOtpInput),
|
|
13026
13062
|
multi: true,
|
|
13027
13063
|
},
|
|
13028
|
-
], template: "@for (i of indices(); track i) {\n <input\n #cellInput\n class=\"sui-otp-input__cell\"\n [class.sui-otp-input__cell--error]=\"error()\"\n type=\"text\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n [attr.maxlength]=\"1\"\n [attr.aria-label]=\"'D\u00EDgito ' + (i + 1)\"\n [value]=\"cells()[i]\"\n [disabled]=\"disabled()\"\n (input)=\"onCellInput(i, $event)\"\n (keydown)=\"onCellKeydown(i, $event)\"\n (paste)=\"onCellPaste(i, $event)\"\n (focus)=\"onCellFocus($event)\"\n (blur)=\"onBlur()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px}.sui-otp-input__cell{box-sizing:border-box;width:80px;height:64px;padding:16px 8px;margin:0;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-10);background-color:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);outline:none;font-size:var(--sui-type-title-h5-size);font-weight:var(--sui-type-title-h5-weight);line-height:var(--sui-type-title-h5-line);letter-spacing:var(--sui-type-title-h5-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;color:var(--sui-text-strong-950);caret-color:var(--sui-text-strong-950);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),background-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out)}.sui-otp-input__cell:hover:not(:focus):not(:disabled):not(.sui-otp-input__cell--error){background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-otp-input__cell:focus{border-color:var(--sui-stroke-strong-950);background-color:var(--sui-bg-white-0);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-otp-input__cell--error{border-color:var(--sui-state-error-base)}.sui-otp-input__cell--error:focus{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-otp-input__cell:disabled{background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;color:var(--sui-text-disabled-300);cursor:not-allowed}.sui-otp-input__cell::placeholder{color:transparent}\n"] }]
|
|
13029
|
-
}], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], inputs: [{ type: i0.ViewChildren, args: ['cellInput', { isSignal: true }] }] } });
|
|
13064
|
+
], template: "@for (i of indices(); track i) {\n <input\n #cellInput\n class=\"sui-otp-input__cell\"\n [class.sui-otp-input__cell--error]=\"error()\"\n type=\"text\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n [attr.maxlength]=\"1\"\n [attr.aria-label]=\"'D\u00EDgito ' + (i + 1)\"\n [value]=\"cells()[i]\"\n [disabled]=\"disabled()\"\n (input)=\"onCellInput(i, $event)\"\n (keydown)=\"onCellKeydown(i, $event)\"\n (paste)=\"onCellPaste(i, $event)\"\n (focus)=\"onCellFocus($event)\"\n (blur)=\"onBlur()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;max-width:100%}.sui-otp-input__cell{box-sizing:border-box;width:80px;height:64px;padding:16px 8px;margin:0;flex:0 1 auto;min-width:0;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-10);background-color:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small);outline:none;font-size:var(--sui-type-title-h5-size);font-weight:var(--sui-type-title-h5-weight);line-height:var(--sui-type-title-h5-line);letter-spacing:var(--sui-type-title-h5-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;color:var(--sui-text-strong-950);caret-color:var(--sui-text-strong-950);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),background-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease-out)}.sui-otp-input__cell:hover:not(:focus):not(:disabled):not(.sui-otp-input__cell--error){background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-otp-input__cell:focus{border-color:var(--sui-stroke-strong-950);background-color:var(--sui-bg-white-0);box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-slate-alpha-16)}.sui-otp-input__cell--error{border-color:var(--sui-state-error-base)}.sui-otp-input__cell--error:focus{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-otp-input__cell:disabled{background-color:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;color:var(--sui-text-disabled-300);cursor:not-allowed}.sui-otp-input__cell::placeholder{color:transparent}:host([data-sui-size=medium]) .sui-otp-input__cell{width:52px;height:56px;padding:12px 4px}:host([data-sui-size=small]) .sui-otp-input__cell{width:44px;height:48px;padding:10px 4px;border-radius:var(--sui-radius-8);font-size:var(--sui-type-title-h6-size);font-weight:var(--sui-type-title-h6-weight);line-height:var(--sui-type-title-h6-line);letter-spacing:var(--sui-type-title-h6-spacing)}\n"] }]
|
|
13065
|
+
}], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], inputs: [{ type: i0.ViewChildren, args: ['cellInput', { isSignal: true }] }] } });
|
|
13030
13066
|
|
|
13031
13067
|
/**
|
|
13032
13068
|
* SUI Page Header — header reutilizable para cada page del empresa.
|
|
@@ -13123,7 +13159,7 @@ class SuiPagination {
|
|
|
13123
13159
|
rangeStart = computed(() => (this.currentPage() - 1) * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
|
|
13124
13160
|
rangeEnd = computed(() => Math.min(this.currentPage() * this.pageSize(), this.total()), ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
|
|
13125
13161
|
/** Items del compact-select de page size, derivados de `pageSizeOptions`. */
|
|
13126
|
-
pageSizeItems = computed(() => this.pageSizeOptions().map((n) => ({ value: n, label: `${n} /
|
|
13162
|
+
pageSizeItems = computed(() => this.pageSizeOptions().map((n) => ({ value: n, label: `${n} / página` })), ...(ngDevMode ? [{ debugName: "pageSizeItems" }] : /* istanbul ignore next */ []));
|
|
13127
13163
|
/** Item actualmente seleccionado en el compact-select (matchea pageSize). */
|
|
13128
13164
|
selectedPageSizeItem = computed(() => {
|
|
13129
13165
|
const ps = this.pageSize();
|
|
@@ -13219,14 +13255,14 @@ class SuiPagination {
|
|
|
13219
13255
|
}
|
|
13220
13256
|
}
|
|
13221
13257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13222
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiPagination, isStandalone: true, selector: "sui-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, nextPrevious: { classPropertyName: "nextPrevious", publicName: "nextPrevious", isSignal: true, isRequired: false, transformFunction: null }, infoFormat: { classPropertyName: "infoFormat", publicName: "infoFormat", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()" } }, ngImport: i0, template: "<!-- \u2550\u2550 SUI Pagination \u2014 SUI 2.0 (Figma 513:3681 / 513:3892) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-pagination\">\n\n <!-- \u2500\u2500 Info text \u2500\u2500 -->\n @if (showInfo() && total() > 0) {\n <p class=\"sui-pagination__info\">\n @if (infoFormat() === 'pages') {\n Page <strong>{{ currentPage() }}</strong> of <strong>{{ totalPages() }}</strong>\n } @else {\n Mostrando <strong>{{ rangeStart() }}-{{ rangeEnd() }}</strong> de <strong>{{ total() }}</strong>\n }\n </p>\n }\n\n <!-- \u2500\u2500 Page buttons \u2500\u2500 -->\n <nav class=\"sui-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n\n <!-- First page (firstLast) -->\n @if (firstLast()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasPrev\"\n [disabled]=\"!hasPrev\"\n (click)=\"first()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Primera p\u00E1gina\"\n >\n <i class=\"ri-arrow-left-double-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Prev page (nextPrevious) -->\n @if (nextPrevious()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasPrev\"\n [disabled]=\"!hasPrev\"\n (click)=\"prev()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <i class=\"ri-arrow-left-s-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Page numbers with ellipsis -->\n @for (page of displayPages(); track $index) {\n @if (page === null) {\n <!-- Ellipsis: celda id\u00E9ntica a los n\u00FAmeros (bg/white-0 + border + padding) -->\n <span class=\"sui-pagination__btn sui-pagination__btn--ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--page\"\n [class.sui-pagination__btn--active]=\"page === currentPage()\"\n (click)=\"goTo(page)\"\n (keydown)=\"onKeydown($event, page)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"'P\u00E1gina ' + page\"\n >\n {{ page }}\n </button>\n }\n }\n\n <!-- Next page (nextPrevious) -->\n @if (nextPrevious()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasNext\"\n [disabled]=\"!hasNext\"\n (click)=\"next()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <i class=\"ri-arrow-right-s-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Last page (firstLast) -->\n @if (firstLast()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasNext\"\n [disabled]=\"!hasNext\"\n (click)=\"last()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"\u00DAltima p\u00E1gina\"\n >\n <i class=\"ri-arrow-right-double-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </nav>\n\n <!-- \u2500\u2500 Advanced panel: page-size compact-select \u2500\u2500 -->\n @if (pageSizeItems().length > 0) {\n <div class=\"sui-pagination__advanced\">\n <sui-compact-select\n size=\"xsmall\"\n [items]=\"pageSizeItems()\"\n [selected]=\"selectedPageSizeItem()\"\n (selectedChange)=\"onPageSizeSelected($event)\"\n />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-pagination__info{margin:0;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-sub-600)}.sui-pagination__info strong{font-weight:500;color:var(--sui-text-strong-950)}.sui-pagination__nav{display:flex;align-items:center;gap:8px}.sui-pagination__advanced{display:flex;align-items:center}.sui-pagination__btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;background:transparent;cursor:pointer;flex-shrink:0;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-weight:var(--sui-type-label-sm-weight);letter-spacing:var(--sui-type-label-sm-spacing);line-height:1;color:var(--sui-text-sub-600)}.sui-pagination__btn:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host(:not([data-sui-type=group])) .sui-pagination__btn--page:not(.sui-pagination__btn--active),:host(:not([data-sui-type=group])) .sui-pagination__btn--ellipsis{border-color:var(--sui-stroke-soft-200)}:host([data-sui-size=medium]) .sui-pagination__btn{height:32px;min-width:32px;border-radius:var(--sui-radius-8);padding:6px;font-size:var(--sui-type-label-sm-size)}:host([data-sui-size=small]) .sui-pagination__btn{height:28px;min-width:28px;border-radius:var(--sui-radius-8);padding:4px;font-size:var(--sui-type-label-xs-size)}:host([data-sui-type=full-radius]) .sui-pagination__btn--page,:host([data-sui-type=full-radius]) .sui-pagination__btn--ellipsis{border-radius:var(--sui-radius-full)}.sui-pagination__btn--page:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-pagination__btn--page.sui-pagination__btn--active{background:var(--sui-bg-weak-50);color:var(--sui-text-sub-600);cursor:default}.sui-pagination__btn--nav i{font-size:20px;line-height:1}.sui-pagination__btn--nav:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host(:not([data-sui-type=group])) .sui-pagination__btn--page:not(.sui-pagination__btn--active):hover:not(:disabled){border-color:transparent}.sui-pagination__btn--ellipsis{background:var(--sui-bg-white-0);color:var(--sui-text-sub-600);cursor:default;pointer-events:none}.sui-pagination__btn--disabled,.sui-pagination__btn:disabled{color:var(--sui-text-disabled-300);background:transparent;cursor:not-allowed;pointer-events:none}:host([data-sui-type=group]) .sui-pagination__nav{gap:0;overflow:clip;border-radius:var(--sui-radius-8);isolation:isolate}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn{border-color:var(--sui-stroke-soft-200);border-radius:0}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:not(:first-child){margin-left:-1px}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:hover:not(:disabled),:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn.sui-pagination__btn--active,:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:focus-visible{position:relative;z-index:1}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn--page{padding-inline:14px}\n"], dependencies: [{ kind: "component", type: SuiCompactSelect, selector: "sui-compact-select", inputs: ["type", "size", "value", "placeholder", "icon", "flag", "items", "selected", "error", "disabled"], outputs: ["selectedChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiPagination, isStandalone: true, selector: "sui-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, nextPrevious: { classPropertyName: "nextPrevious", publicName: "nextPrevious", isSignal: true, isRequired: false, transformFunction: null }, infoFormat: { classPropertyName: "infoFormat", publicName: "infoFormat", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-type": "type()" } }, ngImport: i0, template: "<!-- \u2550\u2550 SUI Pagination \u2014 SUI 2.0 (Figma 513:3681 / 513:3892) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-pagination\">\n\n <!-- \u2500\u2500 Info text \u2500\u2500 -->\n @if (showInfo() && total() > 0) {\n <p class=\"sui-pagination__info\">\n @if (infoFormat() === 'pages') {\n P\u00E1gina <strong>{{ currentPage() }}</strong> de <strong>{{ totalPages() }}</strong>\n } @else {\n Mostrando <strong>{{ rangeStart() }}-{{ rangeEnd() }}</strong> de <strong>{{ total() }}</strong>\n }\n </p>\n }\n\n <!-- \u2500\u2500 Page buttons \u2500\u2500 -->\n <nav class=\"sui-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n\n <!-- First page (firstLast) -->\n @if (firstLast()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasPrev\"\n [disabled]=\"!hasPrev\"\n (click)=\"first()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Primera p\u00E1gina\"\n >\n <i class=\"ri-arrow-left-double-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Prev page (nextPrevious) -->\n @if (nextPrevious()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasPrev\"\n [disabled]=\"!hasPrev\"\n (click)=\"prev()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <i class=\"ri-arrow-left-s-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Page numbers with ellipsis -->\n @for (page of displayPages(); track $index) {\n @if (page === null) {\n <!-- Ellipsis: celda id\u00E9ntica a los n\u00FAmeros (bg/white-0 + border + padding) -->\n <span class=\"sui-pagination__btn sui-pagination__btn--ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--page\"\n [class.sui-pagination__btn--active]=\"page === currentPage()\"\n (click)=\"goTo(page)\"\n (keydown)=\"onKeydown($event, page)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"'P\u00E1gina ' + page\"\n >\n {{ page }}\n </button>\n }\n }\n\n <!-- Next page (nextPrevious) -->\n @if (nextPrevious()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasNext\"\n [disabled]=\"!hasNext\"\n (click)=\"next()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <i class=\"ri-arrow-right-s-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Last page (firstLast) -->\n @if (firstLast()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasNext\"\n [disabled]=\"!hasNext\"\n (click)=\"last()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"\u00DAltima p\u00E1gina\"\n >\n <i class=\"ri-arrow-right-double-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </nav>\n\n <!-- \u2500\u2500 Advanced panel: page-size compact-select \u2500\u2500 -->\n @if (pageSizeItems().length > 0) {\n <div class=\"sui-pagination__advanced\">\n <sui-compact-select\n size=\"xsmall\"\n [items]=\"pageSizeItems()\"\n [selected]=\"selectedPageSizeItem()\"\n (selectedChange)=\"onPageSizeSelected($event)\"\n />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-pagination__info{margin:0;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-sub-600)}.sui-pagination__info strong{font-weight:500;color:var(--sui-text-strong-950)}.sui-pagination__nav{display:flex;align-items:center;gap:8px}.sui-pagination__advanced{display:flex;align-items:center}.sui-pagination__btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;background:transparent;cursor:pointer;flex-shrink:0;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-weight:var(--sui-type-label-sm-weight);letter-spacing:var(--sui-type-label-sm-spacing);line-height:1;color:var(--sui-text-sub-600)}.sui-pagination__btn:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host(:not([data-sui-type=group])) .sui-pagination__btn--page:not(.sui-pagination__btn--active),:host(:not([data-sui-type=group])) .sui-pagination__btn--ellipsis{border-color:var(--sui-stroke-soft-200)}:host([data-sui-size=medium]) .sui-pagination__btn{height:32px;min-width:32px;border-radius:var(--sui-radius-8);padding:6px;font-size:var(--sui-type-label-sm-size)}:host([data-sui-size=small]) .sui-pagination__btn{height:28px;min-width:28px;border-radius:var(--sui-radius-8);padding:4px;font-size:var(--sui-type-label-xs-size)}:host([data-sui-type=full-radius]) .sui-pagination__btn--page,:host([data-sui-type=full-radius]) .sui-pagination__btn--ellipsis{border-radius:var(--sui-radius-full)}.sui-pagination__btn--page:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-pagination__btn--page.sui-pagination__btn--active{background:var(--sui-bg-weak-50);color:var(--sui-text-sub-600);cursor:default}.sui-pagination__btn--nav i{font-size:20px;line-height:1}.sui-pagination__btn--nav:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host(:not([data-sui-type=group])) .sui-pagination__btn--page:not(.sui-pagination__btn--active):hover:not(:disabled){border-color:transparent}.sui-pagination__btn--ellipsis{background:var(--sui-bg-white-0);color:var(--sui-text-sub-600);cursor:default;pointer-events:none}.sui-pagination__btn--disabled,.sui-pagination__btn:disabled{color:var(--sui-text-disabled-300);background:transparent;cursor:not-allowed;pointer-events:none}:host([data-sui-type=group]) .sui-pagination__nav{gap:0;overflow:clip;border-radius:var(--sui-radius-8);isolation:isolate}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn{border-color:var(--sui-stroke-soft-200);border-radius:0}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:not(:first-child){margin-left:-1px}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:hover:not(:disabled),:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn.sui-pagination__btn--active,:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:focus-visible{position:relative;z-index:1}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn--page{padding-inline:14px}\n"], dependencies: [{ kind: "component", type: SuiCompactSelect, selector: "sui-compact-select", inputs: ["type", "size", "value", "placeholder", "icon", "flag", "items", "selected", "error", "disabled"], outputs: ["selectedChange", "clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13223
13259
|
}
|
|
13224
13260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPagination, decorators: [{
|
|
13225
13261
|
type: Component,
|
|
13226
13262
|
args: [{ selector: 'sui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SuiCompactSelect], host: {
|
|
13227
13263
|
'[attr.data-sui-size]': 'size()',
|
|
13228
13264
|
'[attr.data-sui-type]': 'type()',
|
|
13229
|
-
}, template: "<!-- \u2550\u2550 SUI Pagination \u2014 SUI 2.0 (Figma 513:3681 / 513:3892) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-pagination\">\n\n <!-- \u2500\u2500 Info text \u2500\u2500 -->\n @if (showInfo() && total() > 0) {\n <p class=\"sui-pagination__info\">\n @if (infoFormat() === 'pages') {\n
|
|
13265
|
+
}, template: "<!-- \u2550\u2550 SUI Pagination \u2014 SUI 2.0 (Figma 513:3681 / 513:3892) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-pagination\">\n\n <!-- \u2500\u2500 Info text \u2500\u2500 -->\n @if (showInfo() && total() > 0) {\n <p class=\"sui-pagination__info\">\n @if (infoFormat() === 'pages') {\n P\u00E1gina <strong>{{ currentPage() }}</strong> de <strong>{{ totalPages() }}</strong>\n } @else {\n Mostrando <strong>{{ rangeStart() }}-{{ rangeEnd() }}</strong> de <strong>{{ total() }}</strong>\n }\n </p>\n }\n\n <!-- \u2500\u2500 Page buttons \u2500\u2500 -->\n <nav class=\"sui-pagination__nav\" aria-label=\"Paginaci\u00F3n\">\n\n <!-- First page (firstLast) -->\n @if (firstLast()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasPrev\"\n [disabled]=\"!hasPrev\"\n (click)=\"first()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Primera p\u00E1gina\"\n >\n <i class=\"ri-arrow-left-double-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Prev page (nextPrevious) -->\n @if (nextPrevious()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasPrev\"\n [disabled]=\"!hasPrev\"\n (click)=\"prev()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <i class=\"ri-arrow-left-s-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Page numbers with ellipsis -->\n @for (page of displayPages(); track $index) {\n @if (page === null) {\n <!-- Ellipsis: celda id\u00E9ntica a los n\u00FAmeros (bg/white-0 + border + padding) -->\n <span class=\"sui-pagination__btn sui-pagination__btn--ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--page\"\n [class.sui-pagination__btn--active]=\"page === currentPage()\"\n (click)=\"goTo(page)\"\n (keydown)=\"onKeydown($event, page)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n [attr.aria-label]=\"'P\u00E1gina ' + page\"\n >\n {{ page }}\n </button>\n }\n }\n\n <!-- Next page (nextPrevious) -->\n @if (nextPrevious()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasNext\"\n [disabled]=\"!hasNext\"\n (click)=\"next()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <i class=\"ri-arrow-right-s-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n <!-- Last page (firstLast) -->\n @if (firstLast()) {\n <button\n type=\"button\"\n class=\"sui-pagination__btn sui-pagination__btn--nav\"\n [class.sui-pagination__btn--disabled]=\"!hasNext\"\n [disabled]=\"!hasNext\"\n (click)=\"last()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"\u00DAltima p\u00E1gina\"\n >\n <i class=\"ri-arrow-right-double-line\" aria-hidden=\"true\"></i>\n </button>\n }\n\n </nav>\n\n <!-- \u2500\u2500 Advanced panel: page-size compact-select \u2500\u2500 -->\n @if (pageSizeItems().length > 0) {\n <div class=\"sui-pagination__advanced\">\n <sui-compact-select\n size=\"xsmall\"\n [items]=\"pageSizeItems()\"\n [selected]=\"selectedPageSizeItem()\"\n (selectedChange)=\"onPageSizeSelected($event)\"\n />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-pagination__info{margin:0;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-sub-600)}.sui-pagination__info strong{font-weight:500;color:var(--sui-text-strong-950)}.sui-pagination__nav{display:flex;align-items:center;gap:8px}.sui-pagination__advanced{display:flex;align-items:center}.sui-pagination__btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;background:transparent;cursor:pointer;flex-shrink:0;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-weight:var(--sui-type-label-sm-weight);letter-spacing:var(--sui-type-label-sm-spacing);line-height:1;color:var(--sui-text-sub-600)}.sui-pagination__btn:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0),0 0 0 4px var(--sui-primary-alpha-10)}:host(:not([data-sui-type=group])) .sui-pagination__btn--page:not(.sui-pagination__btn--active),:host(:not([data-sui-type=group])) .sui-pagination__btn--ellipsis{border-color:var(--sui-stroke-soft-200)}:host([data-sui-size=medium]) .sui-pagination__btn{height:32px;min-width:32px;border-radius:var(--sui-radius-8);padding:6px;font-size:var(--sui-type-label-sm-size)}:host([data-sui-size=small]) .sui-pagination__btn{height:28px;min-width:28px;border-radius:var(--sui-radius-8);padding:4px;font-size:var(--sui-type-label-xs-size)}:host([data-sui-type=full-radius]) .sui-pagination__btn--page,:host([data-sui-type=full-radius]) .sui-pagination__btn--ellipsis{border-radius:var(--sui-radius-full)}.sui-pagination__btn--page:hover:not(:disabled){background:var(--sui-bg-weak-50)}.sui-pagination__btn--page.sui-pagination__btn--active{background:var(--sui-bg-weak-50);color:var(--sui-text-sub-600);cursor:default}.sui-pagination__btn--nav i{font-size:20px;line-height:1}.sui-pagination__btn--nav:hover:not(:disabled){background:var(--sui-bg-weak-50)}:host(:not([data-sui-type=group])) .sui-pagination__btn--page:not(.sui-pagination__btn--active):hover:not(:disabled){border-color:transparent}.sui-pagination__btn--ellipsis{background:var(--sui-bg-white-0);color:var(--sui-text-sub-600);cursor:default;pointer-events:none}.sui-pagination__btn--disabled,.sui-pagination__btn:disabled{color:var(--sui-text-disabled-300);background:transparent;cursor:not-allowed;pointer-events:none}:host([data-sui-type=group]) .sui-pagination__nav{gap:0;overflow:clip;border-radius:var(--sui-radius-8);isolation:isolate}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn{border-color:var(--sui-stroke-soft-200);border-radius:0}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:not(:first-child){margin-left:-1px}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:hover:not(:disabled),:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn.sui-pagination__btn--active,:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn:focus-visible{position:relative;z-index:1}:host([data-sui-type=group]) .sui-pagination__nav .sui-pagination__btn--page{padding-inline:14px}\n"] }]
|
|
13230
13266
|
}], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], firstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLast", required: false }] }], nextPrevious: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPrevious", required: false }] }], infoFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoFormat", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
|
|
13231
13267
|
|
|
13232
13268
|
/** Condiciones default — las 3 del set de Figma, en español (tuteo). */
|
|
@@ -13504,14 +13540,17 @@ class SuiPopover {
|
|
|
13504
13540
|
/** Tipo de footer. `none` oculta el footer y el separador. */
|
|
13505
13541
|
footer = input('stretch', ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
|
|
13506
13542
|
/** Texto del botón secundario (izquierda). */
|
|
13507
|
-
backLabel = input('
|
|
13543
|
+
backLabel = input('Atrás', ...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
|
|
13508
13544
|
/** Texto del botón primario (derecha). */
|
|
13509
|
-
nextLabel = input('
|
|
13545
|
+
nextLabel = input('Siguiente', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
|
|
13510
13546
|
/** Renderear el botón secundario (Back). Si false, solo se muestra el primario. */
|
|
13511
13547
|
doubleButton = input(true, ...(ngDevMode ? [{ debugName: "doubleButton" }] : /* istanbul ignore next */ []));
|
|
13512
13548
|
/** Progreso del stepper — { current (1-based), total }. Usado en text-stepper
|
|
13513
13549
|
* y stepper. null cae al default del sample de Figma ({ current: 1, total: 4 }). */
|
|
13514
13550
|
step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
13551
|
+
/** Botones del pie: `small` 36 (Figma, default) · `medium` 40 para mobile —
|
|
13552
|
+
* extensión SUI (03-10-2026). */
|
|
13553
|
+
size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
13515
13554
|
/* ── Outputs ── */
|
|
13516
13555
|
/** Click en el botón X de dismiss. */
|
|
13517
13556
|
dismissed = output();
|
|
@@ -13532,15 +13571,15 @@ class SuiPopover {
|
|
|
13532
13571
|
isDotStepper = computed(() => this.footer() === 'stepper', ...(ngDevMode ? [{ debugName: "isDotStepper" }] : /* istanbul ignore next */ []));
|
|
13533
13572
|
/** Config resuelta del step (null → default { current: 1, total: 4 }). */
|
|
13534
13573
|
stepCfg = computed(() => this.step() ?? { current: 1, total: 4 }, ...(ngDevMode ? [{ debugName: "stepCfg" }] : /* istanbul ignore next */ []));
|
|
13535
|
-
/** Texto
|
|
13536
|
-
stepperText = computed(() => `
|
|
13574
|
+
/** Texto «Paso X de N» del text-stepper (era «Step X of N» hasta 03-10-2026). */
|
|
13575
|
+
stepperText = computed(() => `Paso ${this.stepCfg().current} de ${this.stepCfg().total}`, ...(ngDevMode ? [{ debugName: "stepperText" }] : /* istanbul ignore next */ []));
|
|
13537
13576
|
/** Array de dots para el stepper. Cada item: índice activo => primary. */
|
|
13538
13577
|
dots = computed(() => {
|
|
13539
13578
|
const { current, total } = this.stepCfg();
|
|
13540
13579
|
return Array.from({ length: Math.max(1, total) }, (_v, i) => i + 1 === current);
|
|
13541
13580
|
}, ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
|
|
13542
13581
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13543
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiPopover, isStandalone: true, selector: "sui-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, dismissIcon: { classPropertyName: "dismissIcon", publicName: "dismissIcon", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, doubleButton: { classPropertyName: "doubleButton", publicName: "doubleButton", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", back: "back", next: "next" }, host: { properties: { "attr.title": "null", "attr.aria-label": "title() || null", "attr.role": "\"dialog\"", "attr.data-sui-position": "position()", "attr.data-sui-footer": "footer()", "attr.data-sui-tail": "tail() ? \"\" : null" } }, ngImport: i0, template: "@if (tail()) {\n <!-- Tail / flecha. Tri\u00E1ngulo is\u00F3sceles 16\u00D78 (Figma node 4431:81386 / 4431:81222:\n box `h-[8px] w-[16px]`). Mismo mecanismo seamless que sui-tooltip: dos\n tri\u00E1ngulos clip-path superpuestos en `.sui-popover__tail-arrow` \u2014\n `::before` (color de borde, 1px m\u00E1s grande hacia los lados + base) asoma\n como hairline = continuaci\u00F3n del stroke del panel SOLO en los dos lados\n exteriores; `::after` (fill bg-white-0, tama\u00F1o exacto) tapa el interior y\n solapa 1px sobre el borde del panel en la base \u2192 la uni\u00F3n se funde SIN\n l\u00EDnea. El wrapper `.sui-popover__tail` posiciona/centra (12 variantes); el\n `.sui-popover__tail-arrow` se centra+rota sobre su propio centro. -->\n <span class=\"sui-popover__tail\" aria-hidden=\"true\">\n <span class=\"sui-popover__tail-arrow\"></span>\n </span>\n}\n\n<div class=\"sui-popover__panel\">\n <div class=\"sui-popover__content\">\n @if (hasIcon()) {\n <span class=\"sui-popover__icon-wrap\">\n <sui-icon [name]=\"icon()!\" [size]=\"24\" />\n </span>\n }\n\n <div class=\"sui-popover__text\">\n <!-- Body proyectado custom: si el consumer pasa [data-slot=body], se usa\n en lugar de title/description. \u00DAtil para contenido rico. -->\n <ng-content select=\"[data-slot=body]\">\n <p class=\"sui-popover__title\">{{ title() }}</p>\n @if (hasDescription()) {\n <p class=\"sui-popover__description\">{{ description() }}</p>\n }\n </ng-content>\n </div>\n\n @if (dismissIcon()) {\n <!-- Figma modela el dismiss como instancia de Compact Button [1.1]. -->\n <sui-compact-button\n class=\"sui-popover__dismiss\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissed.emit()\"\n />\n }\n </div>\n\n @if (hasFooter()) {\n <div class=\"sui-popover__footer\">\n @if (isTextStepper()) {\n <span class=\"sui-popover__step-text\">{{ stepperText() }}</span>\n }\n\n @if (isDotStepper()) {\n <span class=\"sui-popover__dots\" aria-hidden=\"true\">\n @for (active of dots(); track $index) {\n <span class=\"sui-popover__dot\" [class.sui-popover__dot--active]=\"active\"></span>\n }\n </span>\n }\n\n <!-- Figma modela Back/Next como instancias de Buttons [1.1] (size small:\n 36px, p-8; Back = stroke neutral, Next = filled primary; w-80). Canon\n del proyecto: componentes SUI reales, no maquetas. -->\n <div class=\"sui-popover__actions\">\n @if (doubleButton()) {\n <sui-button\n class=\"sui-popover__action sui-popover__action--back\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"back.emit()\"\n >{{ backLabel() }}</sui-button>\n }\n <sui-button\n class=\"sui-popover__action sui-popover__action--next\"\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"next.emit()\"\n >{{ nextLabel() }}</sui-button>\n </div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;width:320px;position:relative;isolation:isolate;font-family:var(--sui-font-sans)}.sui-popover__panel{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-regular-shadow-medium);overflow:clip;z-index:1}.sui-popover__content{display:flex;flex-direction:column;align-items:flex-start;gap:16px;box-sizing:border-box;width:100%;padding:20px;background:var(--sui-bg-white-0);position:relative;overflow:clip}:host([data-sui-footer=stretch]) .sui-popover__content,:host([data-sui-footer=text-stepper]) .sui-popover__content,:host([data-sui-footer=stepper]) .sui-popover__content{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-popover__icon-wrap{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:11px;flex-shrink:0;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-popover__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;word-break:break-word}.sui-popover__title{margin:0;width:100%;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__description{margin:0;width:100%;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dismiss{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:2px;margin:0;border:0;background:transparent;border-radius:var(--sui-radius-6);color:var(--sui-icon-sub-600);cursor:pointer;transition:background var(--sui-motion-duration-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-fast) var(--sui-motion-ease-out)}.sui-popover__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-popover__dismiss:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-popover__dismiss:active{background:var(--sui-bg-soft-200)}.sui-popover__footer{display:flex;align-items:center;box-sizing:border-box;width:100%;padding:16px 20px;background:var(--sui-bg-white-0);overflow:clip}:host([data-sui-footer=text-stepper]) .sui-popover__footer,:host([data-sui-footer=stepper]) .sui-popover__footer{gap:12px}.sui-popover__step-text{flex-shrink:0;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dots{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.sui-popover__dot{display:block;width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-popover__dot--active{background:var(--sui-primary-base)}.sui-popover__actions{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:12px}:host([data-sui-footer=text-stepper]) .sui-popover__actions,:host([data-sui-footer=stepper]) .sui-popover__actions{justify-content:flex-end}.sui-popover__btn--back:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-popover__btn--back:focus-visible{outline:none;border-color:var(--sui-stroke-strong-950)}.sui-popover__btn--next:hover{background:var(--sui-primary-dark);border-color:var(--sui-primary-dark)}.sui-popover__btn--next:focus-visible{outline:2px solid var(--sui-primary-alpha-16);outline-offset:2px}:host([data-sui-footer=stretch]) .sui-popover__btn{flex:1 0 0;min-width:0}:host([data-sui-footer=text-stepper]) .sui-popover__btn,:host([data-sui-footer=stepper]) .sui-popover__btn{width:80px;flex-shrink:0}.sui-popover__tail{display:block;position:absolute;z-index:2;width:16px;height:8px;pointer-events:none;line-height:0}.sui-popover__tail-arrow{position:absolute;width:16px;height:8px;box-sizing:border-box;transform-origin:center;pointer-events:none}.sui-popover__tail-arrow:before{content:\"\";position:absolute;inset:-1px -1px 0;background:var(--sui-stroke-soft-200);clip-path:polygon(50% 0,100% 100%,0 100%)}.sui-popover__tail-arrow:after{content:\"\";position:absolute;inset:0;background:var(--sui-bg-white-0);clip-path:polygon(50% 0,100% 100%,0 100%)}:host([data-sui-position^=top]){flex-direction:column;padding-top:8px}:host([data-sui-position^=top]) .sui-popover__tail{top:0}:host([data-sui-position^=top]) .sui-popover__tail-arrow{top:calc(50% + 1px);left:50%;transform:translate(-50%,-50%) rotate(0)}:host([data-sui-position^=bottom]){flex-direction:column;padding-bottom:8px}:host([data-sui-position^=bottom]) .sui-popover__tail{bottom:0}:host([data-sui-position^=bottom]) .sui-popover__tail-arrow{top:calc(50% - 1px);left:50%;transform:translate(-50%,-50%) rotate(180deg)}:host([data-sui-position^=right]) .sui-popover__tail,:host([data-sui-position^=left]) .sui-popover__tail{width:8px;height:16px}:host([data-sui-position^=right]){flex-direction:row;align-items:flex-start;padding-right:8px}:host([data-sui-position^=right]) .sui-popover__tail{right:0}:host([data-sui-position^=right]) .sui-popover__tail-arrow{top:50%;left:calc(50% - 1px);transform:translate(-50%,-50%) rotate(90deg)}:host([data-sui-position^=left]){flex-direction:row;align-items:flex-start;padding-left:8px}:host([data-sui-position^=left]) .sui-popover__tail{left:0}:host([data-sui-position^=left]) .sui-popover__tail-arrow{top:50%;left:calc(50% + 1px);transform:translate(-50%,-50%) rotate(-90deg)}:host([data-sui-position=top-left]) .sui-popover__tail,:host([data-sui-position=bottom-left]) .sui-popover__tail{left:32px}:host([data-sui-position=top-center]) .sui-popover__tail,:host([data-sui-position=bottom-center]) .sui-popover__tail{left:50%;margin-left:-8px}:host([data-sui-position=top-right]) .sui-popover__tail,:host([data-sui-position=bottom-right]) .sui-popover__tail{right:32px}:host([data-sui-position=right-top]) .sui-popover__tail,:host([data-sui-position=left-top]) .sui-popover__tail{top:32px}:host([data-sui-position=right-center]) .sui-popover__tail,:host([data-sui-position=left-center]) .sui-popover__tail{top:50%;margin-top:-8px}:host([data-sui-position=right-bottom]) .sui-popover__tail,:host([data-sui-position=left-bottom]) .sui-popover__tail{bottom:32px}@media(prefers-reduced-motion:reduce){.sui-popover__dismiss,.sui-popover__btn{transition:none}}.sui-popover__action{min-width:80px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13582
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiPopover, isStandalone: true, selector: "sui-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, tail: { classPropertyName: "tail", publicName: "tail", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, dismissIcon: { classPropertyName: "dismissIcon", publicName: "dismissIcon", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, doubleButton: { classPropertyName: "doubleButton", publicName: "doubleButton", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", back: "back", next: "next" }, host: { properties: { "attr.title": "null", "attr.aria-label": "title() || null", "attr.role": "\"dialog\"", "attr.data-sui-position": "position()", "attr.data-sui-footer": "footer()", "attr.data-sui-size": "size()", "attr.data-sui-tail": "tail() ? \"\" : null" } }, ngImport: i0, template: "@if (tail()) {\n <!-- Tail / flecha. Tri\u00E1ngulo is\u00F3sceles 16\u00D78 (Figma node 4431:81386 / 4431:81222:\n box `h-[8px] w-[16px]`). Mismo mecanismo seamless que sui-tooltip: dos\n tri\u00E1ngulos clip-path superpuestos en `.sui-popover__tail-arrow` \u2014\n `::before` (color de borde, 1px m\u00E1s grande hacia los lados + base) asoma\n como hairline = continuaci\u00F3n del stroke del panel SOLO en los dos lados\n exteriores; `::after` (fill bg-white-0, tama\u00F1o exacto) tapa el interior y\n solapa 1px sobre el borde del panel en la base \u2192 la uni\u00F3n se funde SIN\n l\u00EDnea. El wrapper `.sui-popover__tail` posiciona/centra (12 variantes); el\n `.sui-popover__tail-arrow` se centra+rota sobre su propio centro. -->\n <span class=\"sui-popover__tail\" aria-hidden=\"true\">\n <span class=\"sui-popover__tail-arrow\"></span>\n </span>\n}\n\n<div class=\"sui-popover__panel\">\n <div class=\"sui-popover__content\">\n @if (hasIcon()) {\n <span class=\"sui-popover__icon-wrap\">\n <sui-icon [name]=\"icon()!\" [size]=\"24\" />\n </span>\n }\n\n <div class=\"sui-popover__text\">\n <!-- Body proyectado custom: si el consumer pasa [data-slot=body], se usa\n en lugar de title/description. \u00DAtil para contenido rico. -->\n <ng-content select=\"[data-slot=body]\">\n <p class=\"sui-popover__title\">{{ title() }}</p>\n @if (hasDescription()) {\n <p class=\"sui-popover__description\">{{ description() }}</p>\n }\n </ng-content>\n </div>\n\n @if (dismissIcon()) {\n <!-- Figma modela el dismiss como instancia de Compact Button [1.1]. -->\n <sui-compact-button\n class=\"sui-popover__dismiss\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissed.emit()\"\n />\n }\n </div>\n\n @if (hasFooter()) {\n <div class=\"sui-popover__footer\">\n @if (isTextStepper()) {\n <span class=\"sui-popover__step-text\">{{ stepperText() }}</span>\n }\n\n @if (isDotStepper()) {\n <span class=\"sui-popover__dots\" aria-hidden=\"true\">\n @for (active of dots(); track $index) {\n <span class=\"sui-popover__dot\" [class.sui-popover__dot--active]=\"active\"></span>\n }\n </span>\n }\n\n <!-- Figma modela Back/Next como instancias de Buttons [1.1] (size small:\n 36px, p-8; Back = stroke neutral, Next = filled primary; w-80). Canon\n del proyecto: componentes SUI reales, no maquetas. -->\n <div class=\"sui-popover__actions\">\n @if (doubleButton()) {\n <sui-button\n class=\"sui-popover__action sui-popover__action--back\"\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"size()\"\n type=\"button\"\n (click)=\"back.emit()\"\n >{{ backLabel() }}</sui-button>\n }\n <sui-button\n class=\"sui-popover__action sui-popover__action--next\"\n variant=\"filled\"\n color=\"primary\"\n [size]=\"size()\"\n type=\"button\"\n (click)=\"next.emit()\"\n >{{ nextLabel() }}</sui-button>\n </div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;width:320px;position:relative;isolation:isolate;font-family:var(--sui-font-sans)}.sui-popover__panel{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-regular-shadow-medium);overflow:clip;z-index:1}.sui-popover__content{display:flex;flex-direction:column;align-items:flex-start;gap:16px;box-sizing:border-box;width:100%;padding:20px;background:var(--sui-bg-white-0);position:relative;overflow:clip}:host([data-sui-footer=stretch]) .sui-popover__content,:host([data-sui-footer=text-stepper]) .sui-popover__content,:host([data-sui-footer=stepper]) .sui-popover__content{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-popover__icon-wrap{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:11px;flex-shrink:0;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-popover__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;word-break:break-word}.sui-popover__title{margin:0;width:100%;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__description{margin:0;width:100%;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dismiss{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:2px;margin:0;border:0;background:transparent;border-radius:var(--sui-radius-6);color:var(--sui-icon-sub-600);cursor:pointer;transition:background var(--sui-motion-duration-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-fast) var(--sui-motion-ease-out)}.sui-popover__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-popover__dismiss:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-popover__dismiss:active{background:var(--sui-bg-soft-200)}.sui-popover__footer{display:flex;align-items:center;box-sizing:border-box;width:100%;padding:16px 20px;background:var(--sui-bg-white-0);overflow:clip}:host([data-sui-footer=text-stepper]) .sui-popover__footer,:host([data-sui-footer=stepper]) .sui-popover__footer{gap:12px}.sui-popover__step-text{flex-shrink:0;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dots{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.sui-popover__dot{display:block;width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-popover__dot--active{background:var(--sui-primary-base)}.sui-popover__actions{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:12px}:host([data-sui-footer=text-stepper]) .sui-popover__actions,:host([data-sui-footer=stepper]) .sui-popover__actions{justify-content:flex-end}:host([data-sui-footer=stretch]) .sui-popover__action{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:host([data-sui-footer=text-stepper]) .sui-popover__action,:host([data-sui-footer=stepper]) .sui-popover__action{min-width:80px;flex-shrink:0}.sui-popover__tail{display:block;position:absolute;z-index:2;width:16px;height:8px;pointer-events:none;line-height:0}.sui-popover__tail-arrow{position:absolute;width:16px;height:8px;box-sizing:border-box;transform-origin:center;pointer-events:none}.sui-popover__tail-arrow:before{content:\"\";position:absolute;inset:-1px -1px 0;background:var(--sui-stroke-soft-200);clip-path:polygon(50% 0,100% 100%,0 100%)}.sui-popover__tail-arrow:after{content:\"\";position:absolute;inset:0;background:var(--sui-bg-white-0);clip-path:polygon(50% 0,100% 100%,0 100%)}:host([data-sui-position^=top]){flex-direction:column;padding-top:8px}:host([data-sui-position^=top]) .sui-popover__tail{top:0}:host([data-sui-position^=top]) .sui-popover__tail-arrow{top:calc(50% + 1px);left:50%;transform:translate(-50%,-50%) rotate(0)}:host([data-sui-position^=bottom]){flex-direction:column;padding-bottom:8px}:host([data-sui-position^=bottom]) .sui-popover__tail{bottom:0}:host([data-sui-position^=bottom]) .sui-popover__tail-arrow{top:calc(50% - 1px);left:50%;transform:translate(-50%,-50%) rotate(180deg)}:host([data-sui-position^=right]) .sui-popover__tail,:host([data-sui-position^=left]) .sui-popover__tail{width:8px;height:16px}:host([data-sui-position^=right]){flex-direction:row;align-items:flex-start;padding-right:8px}:host([data-sui-position^=right]) .sui-popover__tail{right:0}:host([data-sui-position^=right]) .sui-popover__tail-arrow{top:50%;left:calc(50% - 1px);transform:translate(-50%,-50%) rotate(90deg)}:host([data-sui-position^=left]){flex-direction:row;align-items:flex-start;padding-left:8px}:host([data-sui-position^=left]) .sui-popover__tail{left:0}:host([data-sui-position^=left]) .sui-popover__tail-arrow{top:50%;left:calc(50% + 1px);transform:translate(-50%,-50%) rotate(-90deg)}:host([data-sui-position=top-left]) .sui-popover__tail,:host([data-sui-position=bottom-left]) .sui-popover__tail{left:32px}:host([data-sui-position=top-center]) .sui-popover__tail,:host([data-sui-position=bottom-center]) .sui-popover__tail{left:50%;margin-left:-8px}:host([data-sui-position=top-right]) .sui-popover__tail,:host([data-sui-position=bottom-right]) .sui-popover__tail{right:32px}:host([data-sui-position=right-top]) .sui-popover__tail,:host([data-sui-position=left-top]) .sui-popover__tail{top:32px}:host([data-sui-position=right-center]) .sui-popover__tail,:host([data-sui-position=left-center]) .sui-popover__tail{top:50%;margin-top:-8px}:host([data-sui-position=right-bottom]) .sui-popover__tail,:host([data-sui-position=left-bottom]) .sui-popover__tail{bottom:32px}@media(prefers-reduced-motion:reduce){.sui-popover__dismiss{transition:none}}.sui-popover__dismiss ::ng-deep .sui-compact-button__el{position:relative}.sui-popover__dismiss ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-8px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13544
13583
|
}
|
|
13545
13584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPopover, decorators: [{
|
|
13546
13585
|
type: Component,
|
|
@@ -13558,9 +13597,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
13558
13597
|
tail, cubierto por sui-popover.spec.ts. */
|
|
13559
13598
|
'[attr.data-sui-position]': 'position()',
|
|
13560
13599
|
'[attr.data-sui-footer]': 'footer()',
|
|
13600
|
+
'[attr.data-sui-size]': 'size()',
|
|
13561
13601
|
'[attr.data-sui-tail]': 'tail() ? "" : null',
|
|
13562
|
-
}, template: "@if (tail()) {\n <!-- Tail / flecha. Tri\u00E1ngulo is\u00F3sceles 16\u00D78 (Figma node 4431:81386 / 4431:81222:\n box `h-[8px] w-[16px]`). Mismo mecanismo seamless que sui-tooltip: dos\n tri\u00E1ngulos clip-path superpuestos en `.sui-popover__tail-arrow` \u2014\n `::before` (color de borde, 1px m\u00E1s grande hacia los lados + base) asoma\n como hairline = continuaci\u00F3n del stroke del panel SOLO en los dos lados\n exteriores; `::after` (fill bg-white-0, tama\u00F1o exacto) tapa el interior y\n solapa 1px sobre el borde del panel en la base \u2192 la uni\u00F3n se funde SIN\n l\u00EDnea. El wrapper `.sui-popover__tail` posiciona/centra (12 variantes); el\n `.sui-popover__tail-arrow` se centra+rota sobre su propio centro. -->\n <span class=\"sui-popover__tail\" aria-hidden=\"true\">\n <span class=\"sui-popover__tail-arrow\"></span>\n </span>\n}\n\n<div class=\"sui-popover__panel\">\n <div class=\"sui-popover__content\">\n @if (hasIcon()) {\n <span class=\"sui-popover__icon-wrap\">\n <sui-icon [name]=\"icon()!\" [size]=\"24\" />\n </span>\n }\n\n <div class=\"sui-popover__text\">\n <!-- Body proyectado custom: si el consumer pasa [data-slot=body], se usa\n en lugar de title/description. \u00DAtil para contenido rico. -->\n <ng-content select=\"[data-slot=body]\">\n <p class=\"sui-popover__title\">{{ title() }}</p>\n @if (hasDescription()) {\n <p class=\"sui-popover__description\">{{ description() }}</p>\n }\n </ng-content>\n </div>\n\n @if (dismissIcon()) {\n <!-- Figma modela el dismiss como instancia de Compact Button [1.1]. -->\n <sui-compact-button\n class=\"sui-popover__dismiss\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissed.emit()\"\n />\n }\n </div>\n\n @if (hasFooter()) {\n <div class=\"sui-popover__footer\">\n @if (isTextStepper()) {\n <span class=\"sui-popover__step-text\">{{ stepperText() }}</span>\n }\n\n @if (isDotStepper()) {\n <span class=\"sui-popover__dots\" aria-hidden=\"true\">\n @for (active of dots(); track $index) {\n <span class=\"sui-popover__dot\" [class.sui-popover__dot--active]=\"active\"></span>\n }\n </span>\n }\n\n <!-- Figma modela Back/Next como instancias de Buttons [1.1] (size small:\n 36px, p-8; Back = stroke neutral, Next = filled primary; w-80). Canon\n del proyecto: componentes SUI reales, no maquetas. -->\n <div class=\"sui-popover__actions\">\n @if (doubleButton()) {\n <sui-button\n class=\"sui-popover__action sui-popover__action--back\"\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"back.emit()\"\n >{{ backLabel() }}</sui-button>\n }\n <sui-button\n class=\"sui-popover__action sui-popover__action--next\"\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"next.emit()\"\n >{{ nextLabel() }}</sui-button>\n </div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;width:320px;position:relative;isolation:isolate;font-family:var(--sui-font-sans)}.sui-popover__panel{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-regular-shadow-medium);overflow:clip;z-index:1}.sui-popover__content{display:flex;flex-direction:column;align-items:flex-start;gap:16px;box-sizing:border-box;width:100%;padding:20px;background:var(--sui-bg-white-0);position:relative;overflow:clip}:host([data-sui-footer=stretch]) .sui-popover__content,:host([data-sui-footer=text-stepper]) .sui-popover__content,:host([data-sui-footer=stepper]) .sui-popover__content{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-popover__icon-wrap{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:11px;flex-shrink:0;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-popover__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;word-break:break-word}.sui-popover__title{margin:0;width:100%;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__description{margin:0;width:100%;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dismiss{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:2px;margin:0;border:0;background:transparent;border-radius:var(--sui-radius-6);color:var(--sui-icon-sub-600);cursor:pointer;transition:background var(--sui-motion-duration-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-fast) var(--sui-motion-ease-out)}.sui-popover__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-popover__dismiss:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-popover__dismiss:active{background:var(--sui-bg-soft-200)}.sui-popover__footer{display:flex;align-items:center;box-sizing:border-box;width:100%;padding:16px 20px;background:var(--sui-bg-white-0);overflow:clip}:host([data-sui-footer=text-stepper]) .sui-popover__footer,:host([data-sui-footer=stepper]) .sui-popover__footer{gap:12px}.sui-popover__step-text{flex-shrink:0;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dots{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.sui-popover__dot{display:block;width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-popover__dot--active{background:var(--sui-primary-base)}.sui-popover__actions{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:12px}:host([data-sui-footer=text-stepper]) .sui-popover__actions,:host([data-sui-footer=stepper]) .sui-popover__actions{justify-content:flex-end}.sui-popover__btn--back:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-popover__btn--back:focus-visible{outline:none;border-color:var(--sui-stroke-strong-950)}.sui-popover__btn--next:hover{background:var(--sui-primary-dark);border-color:var(--sui-primary-dark)}.sui-popover__btn--next:focus-visible{outline:2px solid var(--sui-primary-alpha-16);outline-offset:2px}:host([data-sui-footer=stretch]) .sui-popover__btn{flex:1 0 0;min-width:0}:host([data-sui-footer=text-stepper]) .sui-popover__btn,:host([data-sui-footer=stepper]) .sui-popover__btn{width:80px;flex-shrink:0}.sui-popover__tail{display:block;position:absolute;z-index:2;width:16px;height:8px;pointer-events:none;line-height:0}.sui-popover__tail-arrow{position:absolute;width:16px;height:8px;box-sizing:border-box;transform-origin:center;pointer-events:none}.sui-popover__tail-arrow:before{content:\"\";position:absolute;inset:-1px -1px 0;background:var(--sui-stroke-soft-200);clip-path:polygon(50% 0,100% 100%,0 100%)}.sui-popover__tail-arrow:after{content:\"\";position:absolute;inset:0;background:var(--sui-bg-white-0);clip-path:polygon(50% 0,100% 100%,0 100%)}:host([data-sui-position^=top]){flex-direction:column;padding-top:8px}:host([data-sui-position^=top]) .sui-popover__tail{top:0}:host([data-sui-position^=top]) .sui-popover__tail-arrow{top:calc(50% + 1px);left:50%;transform:translate(-50%,-50%) rotate(0)}:host([data-sui-position^=bottom]){flex-direction:column;padding-bottom:8px}:host([data-sui-position^=bottom]) .sui-popover__tail{bottom:0}:host([data-sui-position^=bottom]) .sui-popover__tail-arrow{top:calc(50% - 1px);left:50%;transform:translate(-50%,-50%) rotate(180deg)}:host([data-sui-position^=right]) .sui-popover__tail,:host([data-sui-position^=left]) .sui-popover__tail{width:8px;height:16px}:host([data-sui-position^=right]){flex-direction:row;align-items:flex-start;padding-right:8px}:host([data-sui-position^=right]) .sui-popover__tail{right:0}:host([data-sui-position^=right]) .sui-popover__tail-arrow{top:50%;left:calc(50% - 1px);transform:translate(-50%,-50%) rotate(90deg)}:host([data-sui-position^=left]){flex-direction:row;align-items:flex-start;padding-left:8px}:host([data-sui-position^=left]) .sui-popover__tail{left:0}:host([data-sui-position^=left]) .sui-popover__tail-arrow{top:50%;left:calc(50% + 1px);transform:translate(-50%,-50%) rotate(-90deg)}:host([data-sui-position=top-left]) .sui-popover__tail,:host([data-sui-position=bottom-left]) .sui-popover__tail{left:32px}:host([data-sui-position=top-center]) .sui-popover__tail,:host([data-sui-position=bottom-center]) .sui-popover__tail{left:50%;margin-left:-8px}:host([data-sui-position=top-right]) .sui-popover__tail,:host([data-sui-position=bottom-right]) .sui-popover__tail{right:32px}:host([data-sui-position=right-top]) .sui-popover__tail,:host([data-sui-position=left-top]) .sui-popover__tail{top:32px}:host([data-sui-position=right-center]) .sui-popover__tail,:host([data-sui-position=left-center]) .sui-popover__tail{top:50%;margin-top:-8px}:host([data-sui-position=right-bottom]) .sui-popover__tail,:host([data-sui-position=left-bottom]) .sui-popover__tail{bottom:32px}@media(prefers-reduced-motion:reduce){.sui-popover__dismiss,.sui-popover__btn{transition:none}}.sui-popover__action{min-width:80px}\n"] }]
|
|
13563
|
-
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], dismissIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissIcon", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], doubleButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "doubleButton", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], back: [{ type: i0.Output, args: ["back"] }], next: [{ type: i0.Output, args: ["next"] }] } });
|
|
13602
|
+
}, template: "@if (tail()) {\n <!-- Tail / flecha. Tri\u00E1ngulo is\u00F3sceles 16\u00D78 (Figma node 4431:81386 / 4431:81222:\n box `h-[8px] w-[16px]`). Mismo mecanismo seamless que sui-tooltip: dos\n tri\u00E1ngulos clip-path superpuestos en `.sui-popover__tail-arrow` \u2014\n `::before` (color de borde, 1px m\u00E1s grande hacia los lados + base) asoma\n como hairline = continuaci\u00F3n del stroke del panel SOLO en los dos lados\n exteriores; `::after` (fill bg-white-0, tama\u00F1o exacto) tapa el interior y\n solapa 1px sobre el borde del panel en la base \u2192 la uni\u00F3n se funde SIN\n l\u00EDnea. El wrapper `.sui-popover__tail` posiciona/centra (12 variantes); el\n `.sui-popover__tail-arrow` se centra+rota sobre su propio centro. -->\n <span class=\"sui-popover__tail\" aria-hidden=\"true\">\n <span class=\"sui-popover__tail-arrow\"></span>\n </span>\n}\n\n<div class=\"sui-popover__panel\">\n <div class=\"sui-popover__content\">\n @if (hasIcon()) {\n <span class=\"sui-popover__icon-wrap\">\n <sui-icon [name]=\"icon()!\" [size]=\"24\" />\n </span>\n }\n\n <div class=\"sui-popover__text\">\n <!-- Body proyectado custom: si el consumer pasa [data-slot=body], se usa\n en lugar de title/description. \u00DAtil para contenido rico. -->\n <ng-content select=\"[data-slot=body]\">\n <p class=\"sui-popover__title\">{{ title() }}</p>\n @if (hasDescription()) {\n <p class=\"sui-popover__description\">{{ description() }}</p>\n }\n </ng-content>\n </div>\n\n @if (dismissIcon()) {\n <!-- Figma modela el dismiss como instancia de Compact Button [1.1]. -->\n <sui-compact-button\n class=\"sui-popover__dismiss\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissed.emit()\"\n />\n }\n </div>\n\n @if (hasFooter()) {\n <div class=\"sui-popover__footer\">\n @if (isTextStepper()) {\n <span class=\"sui-popover__step-text\">{{ stepperText() }}</span>\n }\n\n @if (isDotStepper()) {\n <span class=\"sui-popover__dots\" aria-hidden=\"true\">\n @for (active of dots(); track $index) {\n <span class=\"sui-popover__dot\" [class.sui-popover__dot--active]=\"active\"></span>\n }\n </span>\n }\n\n <!-- Figma modela Back/Next como instancias de Buttons [1.1] (size small:\n 36px, p-8; Back = stroke neutral, Next = filled primary; w-80). Canon\n del proyecto: componentes SUI reales, no maquetas. -->\n <div class=\"sui-popover__actions\">\n @if (doubleButton()) {\n <sui-button\n class=\"sui-popover__action sui-popover__action--back\"\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"size()\"\n type=\"button\"\n (click)=\"back.emit()\"\n >{{ backLabel() }}</sui-button>\n }\n <sui-button\n class=\"sui-popover__action sui-popover__action--next\"\n variant=\"filled\"\n color=\"primary\"\n [size]=\"size()\"\n type=\"button\"\n (click)=\"next.emit()\"\n >{{ nextLabel() }}</sui-button>\n </div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;width:320px;position:relative;isolation:isolate;font-family:var(--sui-font-sans)}.sui-popover__panel{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-regular-shadow-medium);overflow:clip;z-index:1}.sui-popover__content{display:flex;flex-direction:column;align-items:flex-start;gap:16px;box-sizing:border-box;width:100%;padding:20px;background:var(--sui-bg-white-0);position:relative;overflow:clip}:host([data-sui-footer=stretch]) .sui-popover__content,:host([data-sui-footer=text-stepper]) .sui-popover__content,:host([data-sui-footer=stepper]) .sui-popover__content{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-popover__icon-wrap{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:11px;flex-shrink:0;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-popover__text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;word-break:break-word}.sui-popover__title{margin:0;width:100%;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__description{margin:0;width:100%;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dismiss{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:2px;margin:0;border:0;background:transparent;border-radius:var(--sui-radius-6);color:var(--sui-icon-sub-600);cursor:pointer;transition:background var(--sui-motion-duration-fast) var(--sui-motion-ease-out),color var(--sui-motion-duration-fast) var(--sui-motion-ease-out)}.sui-popover__dismiss:hover{background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-popover__dismiss:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-popover__dismiss:active{background:var(--sui-bg-soft-200)}.sui-popover__footer{display:flex;align-items:center;box-sizing:border-box;width:100%;padding:16px 20px;background:var(--sui-bg-white-0);overflow:clip}:host([data-sui-footer=text-stepper]) .sui-popover__footer,:host([data-sui-footer=stepper]) .sui-popover__footer{gap:12px}.sui-popover__step-text{flex-shrink:0;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-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-popover__dots{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.sui-popover__dot{display:block;width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-popover__dot--active{background:var(--sui-primary-base)}.sui-popover__actions{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:12px}:host([data-sui-footer=text-stepper]) .sui-popover__actions,:host([data-sui-footer=stepper]) .sui-popover__actions{justify-content:flex-end}:host([data-sui-footer=stretch]) .sui-popover__action{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:host([data-sui-footer=text-stepper]) .sui-popover__action,:host([data-sui-footer=stepper]) .sui-popover__action{min-width:80px;flex-shrink:0}.sui-popover__tail{display:block;position:absolute;z-index:2;width:16px;height:8px;pointer-events:none;line-height:0}.sui-popover__tail-arrow{position:absolute;width:16px;height:8px;box-sizing:border-box;transform-origin:center;pointer-events:none}.sui-popover__tail-arrow:before{content:\"\";position:absolute;inset:-1px -1px 0;background:var(--sui-stroke-soft-200);clip-path:polygon(50% 0,100% 100%,0 100%)}.sui-popover__tail-arrow:after{content:\"\";position:absolute;inset:0;background:var(--sui-bg-white-0);clip-path:polygon(50% 0,100% 100%,0 100%)}:host([data-sui-position^=top]){flex-direction:column;padding-top:8px}:host([data-sui-position^=top]) .sui-popover__tail{top:0}:host([data-sui-position^=top]) .sui-popover__tail-arrow{top:calc(50% + 1px);left:50%;transform:translate(-50%,-50%) rotate(0)}:host([data-sui-position^=bottom]){flex-direction:column;padding-bottom:8px}:host([data-sui-position^=bottom]) .sui-popover__tail{bottom:0}:host([data-sui-position^=bottom]) .sui-popover__tail-arrow{top:calc(50% - 1px);left:50%;transform:translate(-50%,-50%) rotate(180deg)}:host([data-sui-position^=right]) .sui-popover__tail,:host([data-sui-position^=left]) .sui-popover__tail{width:8px;height:16px}:host([data-sui-position^=right]){flex-direction:row;align-items:flex-start;padding-right:8px}:host([data-sui-position^=right]) .sui-popover__tail{right:0}:host([data-sui-position^=right]) .sui-popover__tail-arrow{top:50%;left:calc(50% - 1px);transform:translate(-50%,-50%) rotate(90deg)}:host([data-sui-position^=left]){flex-direction:row;align-items:flex-start;padding-left:8px}:host([data-sui-position^=left]) .sui-popover__tail{left:0}:host([data-sui-position^=left]) .sui-popover__tail-arrow{top:50%;left:calc(50% + 1px);transform:translate(-50%,-50%) rotate(-90deg)}:host([data-sui-position=top-left]) .sui-popover__tail,:host([data-sui-position=bottom-left]) .sui-popover__tail{left:32px}:host([data-sui-position=top-center]) .sui-popover__tail,:host([data-sui-position=bottom-center]) .sui-popover__tail{left:50%;margin-left:-8px}:host([data-sui-position=top-right]) .sui-popover__tail,:host([data-sui-position=bottom-right]) .sui-popover__tail{right:32px}:host([data-sui-position=right-top]) .sui-popover__tail,:host([data-sui-position=left-top]) .sui-popover__tail{top:32px}:host([data-sui-position=right-center]) .sui-popover__tail,:host([data-sui-position=left-center]) .sui-popover__tail{top:50%;margin-top:-8px}:host([data-sui-position=right-bottom]) .sui-popover__tail,:host([data-sui-position=left-bottom]) .sui-popover__tail{bottom:32px}@media(prefers-reduced-motion:reduce){.sui-popover__dismiss{transition:none}}.sui-popover__dismiss ::ng-deep .sui-compact-button__el{position:relative}.sui-popover__dismiss ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-8px}\n"] }]
|
|
13603
|
+
}], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], tail: [{ type: i0.Input, args: [{ isSignal: true, alias: "tail", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], dismissIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissIcon", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], doubleButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "doubleButton", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], back: [{ type: i0.Output, args: ["back"] }], next: [{ type: i0.Output, args: ["next"] }] } });
|
|
13564
13604
|
|
|
13565
13605
|
/**
|
|
13566
13606
|
* sui-progress-bar-label — SUI Design System 2.0 · Progress Bar with Label
|
|
@@ -14285,7 +14325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14285
14325
|
* @input readonly deshabilita clicks (display only)
|
|
14286
14326
|
* @input halfStep inline + readonly: renderiza half-fill basado en value decimal
|
|
14287
14327
|
* @input showValue inline: muestra "4.5" al lado de los íconos
|
|
14288
|
-
* @input reviewCount inline: muestra "5.2K
|
|
14328
|
+
* @input reviewCount inline: muestra "5.2K calificaciones" al lado (formato corto)
|
|
14289
14329
|
* @input reviewLink inline: link "18 reviews" al lado
|
|
14290
14330
|
* @input alignment inline: 'inline' (only) | 'vertical' | 'horizontal'
|
|
14291
14331
|
* @input emojis array de chars Unicode para type='emoji' (default 😞😕😐🙂😄)
|
|
@@ -14346,7 +14386,7 @@ class SuiRating {
|
|
|
14346
14386
|
*/
|
|
14347
14387
|
reason = model('', ...(ngDevMode ? [{ debugName: "reason" }] : /* istanbul ignore next */ []));
|
|
14348
14388
|
/** Placeholder del textarea en bar-area. Figma: "Tell us why!". */
|
|
14349
|
-
reasonPlaceholder = input('
|
|
14389
|
+
reasonPlaceholder = input('Cuéntanos por qué', ...(ngDevMode ? [{ debugName: "reasonPlaceholder" }] : /* istanbul ignore next */ []));
|
|
14350
14390
|
/** Filas del textarea en bar-area. El alto mínimo del área de comentario lo
|
|
14351
14391
|
* fija el CSS (min-height 72px = Figma) para preservar el envelope del card;
|
|
14352
14392
|
* `rows` solo importa si se quiere un área inicial MÁS alta que ese piso. */
|
|
@@ -14561,7 +14601,7 @@ class SuiRating {
|
|
|
14561
14601
|
useExisting: forwardRef(() => SuiRating),
|
|
14562
14602
|
multi: true,
|
|
14563
14603
|
},
|
|
14564
|
-
], ngImport: i0, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <!-- Est\u00E1tico a prop\u00F3sito: son cinco a la vez y el animado pesa ~1 MB\n cada uno, en bucle infinito (ver sui-emoji-static.ts). -->\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" [animated]=\"false\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [suiHref]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel", "animated"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14604
|
+
], ngImport: i0, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <!-- Est\u00E1tico a prop\u00F3sito: son cinco a la vez y el animado pesa ~1 MB\n cada uno, en bucle infinito (ver sui-emoji-static.ts). -->\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" [animated]=\"false\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} {{ reviewCount() === 1 ? 'calificaci\u00F3n' : 'calificaciones' }}</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [suiHref]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiEmoji, selector: "sui-emoji", inputs: ["name", "src", "size", "ariaLabel", "animated"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SuiHref, selector: "a[suiHref]", inputs: ["suiHref"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14565
14605
|
}
|
|
14566
14606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiRating, decorators: [{
|
|
14567
14607
|
type: Component,
|
|
@@ -14580,7 +14620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
14580
14620
|
'[attr.aria-label]': 'ariaLabel()',
|
|
14581
14621
|
'[attr.aria-readonly]': '!isInteractive() ? "true" : null',
|
|
14582
14622
|
'[attr.data-disabled]': 'disabledByForm() ? "" : null',
|
|
14583
|
-
}, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <!-- Est\u00E1tico a prop\u00F3sito: son cinco a la vez y el animado pesa ~1 MB\n cada uno, en bucle infinito (ver sui-emoji-static.ts). -->\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" [animated]=\"false\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} Ratings</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [suiHref]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"] }]
|
|
14623
|
+
}, template: "@switch (appearance()) {\n\n @case ('inline') {\n @if (alignment() === 'vertical') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--vertical\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else if (alignment() === 'horizontal') {\n <div class=\"sui-rating__icons\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n @if (showValue() || reviewCount() !== null || reviewLink()) {\n <div class=\"sui-rating__meta sui-rating__meta--horizontal\">\n <ng-container *ngTemplateOutlet=\"metaContent\" />\n </div>\n }\n } @else {\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n }\n }\n\n @case ('cell') {\n <div class=\"sui-rating__cells\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n <ng-container *ngTemplateOutlet=\"iconCell; context: { $implicit: cell }\" />\n }\n </div>\n }\n\n @case ('bar') {\n <ng-container *ngTemplateOutlet=\"barRow\" />\n }\n\n @case ('bar-area') {\n <div class=\"sui-rating__area\">\n <ng-container *ngTemplateOutlet=\"barRow\" />\n <div class=\"sui-rating__area-input\">\n @if (readonly()) {\n <p class=\"sui-rating__area-text\" [class.sui-rating__area-text--placeholder]=\"!reason()\">\n {{ reason() || reasonPlaceholder() }}\n </p>\n } @else {\n <textarea\n class=\"sui-rating__area-textarea\"\n [rows]=\"reasonRows()\"\n [value]=\"reason()\"\n [placeholder]=\"reasonPlaceholder()\"\n [disabled]=\"disabledByForm()\"\n [attr.aria-label]=\"reasonPlaceholder()\"\n (input)=\"onReasonInput($event)\"\n (blur)=\"onTouched()\"></textarea>\n }\n </div>\n </div>\n }\n}\n\n<!-- Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. -->\n<ng-template #barRow>\n <div class=\"sui-rating__bar\" (mouseleave)=\"onCellLeave()\">\n @for (cell of cells(); track cell.index) {\n @if (readonly()) {\n <div\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </div>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__bar-cell\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: cell }\" />\n </button>\n }\n }\n </div>\n</ng-template>\n\n<!-- Single icon (inline appearance). -->\n<ng-template #iconCell let-cell>\n @if (readonly()) {\n <span\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\">\n <sui-icon [name]=\"cellIconName(cell.fill)\" [size]=\"iconPx()\" />\n </span>\n } @else {\n <button\n type=\"button\"\n class=\"sui-rating__icon\"\n [attr.data-fill]=\"cell.fill\"\n [attr.data-cell-state]=\"cell.cellState\"\n [attr.data-selected]=\"value() === cell.index\"\n [disabled]=\"disabledByForm()\"\n role=\"radio\"\n [attr.aria-checked]=\"value() === cell.index\"\n [attr.aria-label]=\"cell.index + ' de ' + max()\"\n (click)=\"onCellClick(cell.index)\"\n (mouseenter)=\"onCellEnter(cell.index)\"\n (mouseleave)=\"onCellLeave()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <sui-icon [name]=\"cellIconName(cell.fill === 'empty' ? 'empty' : 'full')\" [size]=\"iconPx()\" />\n </button>\n }\n</ng-template>\n\n<!-- Cell content (bar / bar-area appearance): seg\u00FAn type.\n star/heart usan barIconName(cellState) para distinguir:\n default \u2192 outline | hover \u2192 relleno gris (Empty Filled) | selected \u2192 relleno color. -->\n<ng-template #cellContent let-cell>\n @switch (type()) {\n @case ('star') {\n <sui-icon [name]=\"barIconName('star', cell.cellState)\" [size]=\"20\" />\n }\n @case ('heart') {\n <sui-icon [name]=\"barIconName('heart', cell.cellState)\" [size]=\"20\" />\n }\n @case ('emoji') {\n <!-- Est\u00E1tico a prop\u00F3sito: son cinco a la vez y el animado pesa ~1 MB\n cada uno, en bucle infinito (ver sui-emoji-static.ts). -->\n <sui-emoji class=\"sui-rating__emoji\" [name]=\"cell.emoji\" size=\"sm\" [animated]=\"false\" />\n }\n @case ('number') {\n <span class=\"sui-rating__number\">{{ cell.index }}</span>\n }\n }\n</ng-template>\n\n<!-- Meta (value + reviewCount + link), inline appearance only -->\n<ng-template #metaContent>\n @if (showValue()) {\n <span class=\"sui-rating__value\">{{ valueLabel() }}</span>\n }\n @if (showValue() && reviewCount() !== null) {\n <span class=\"sui-rating__sep\" aria-hidden=\"true\">\u2219</span>\n }\n @if (reviewCount() !== null) {\n <span class=\"sui-rating__count\">{{ reviewCountLabel() }} {{ reviewCount() === 1 ? 'calificaci\u00F3n' : 'calificaciones' }}</span>\n }\n @if (reviewLink(); as link) {\n @if (link.href) {\n <a class=\"sui-rating__link\" [suiHref]=\"link.href\">{{ link.label }}</a>\n } @else {\n <button type=\"button\" class=\"sui-rating__link\">{{ link.label }}</button>\n }\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;font-family:var(--sui-font-sans);align-items:center;gap:2px}:host([data-disabled]){opacity:.5;pointer-events:none}:host([data-appearance=inline][data-alignment=inline]){flex-direction:row;flex-wrap:nowrap}:host([data-appearance=inline][data-alignment=vertical]){flex-direction:column;align-items:flex-start;gap:8px}:host([data-appearance=inline][data-alignment=horizontal]){flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}.sui-rating__icons{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}.sui-rating__icon{appearance:none;border:0;margin:0;padding:0;background:transparent;font:inherit;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-stroke-sub-300, #d1d1d1);transition:color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=star]) .sui-rating__icon[data-fill=full],:host([data-type=star]) .sui-rating__icon[data-fill=half]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__icon[data-fill=full],:host([data-type=heart]) .sui-rating__icon[data-fill=half]{color:var(--sui-state-error-base, #fb3748)}button.sui-rating__icon{cursor:pointer;border-radius:4px}button.sui-rating__icon:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px}.sui-rating__meta{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.sui-rating__meta--vertical{align-self:flex-start}.sui-rating__value,.sui-rating__count{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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap}.sui-rating__sep{color:var(--sui-text-strong-950);margin:0 2px}.sui-rating__link{appearance:none;border:0;background:transparent;font:inherit;padding:0;margin:0;cursor:pointer;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-decoration:underline;text-decoration-skip-ink:none;text-underline-offset:2px;white-space:nowrap}.sui-rating__link:hover{color:var(--sui-text-strong-950)}.sui-rating__link:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:2px;border-radius:2px}:host([data-appearance=cell]){display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.sui-rating__cells{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}:host([data-appearance=cell]) .sui-rating__icon{padding:12px;border-radius:var(--sui-radius-10, 10px);border:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box;transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),border-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),box-shadow var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-appearance=cell]) .sui-rating__icon[data-cell-state=hover]{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-appearance=bar]){display:inline-block;align-items:stretch}:host([data-appearance=bar-area]){display:block;width:100%}.sui-rating__bar{display:inline-flex;align-items:stretch;border:1px solid var(--sui-stroke-soft-200);border-radius:0;overflow:hidden;background:var(--sui-bg-white-0)}:host([data-appearance=bar-area]) .sui-rating__bar{display:flex;width:100%;border:0;border-bottom:1px solid var(--sui-stroke-soft-200);border-radius:0;background:transparent}.sui-rating__bar-cell{appearance:none;margin:0;font:inherit;flex-shrink:0;width:64px;min-height:36px;display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--sui-bg-white-0);border:0;border-left:1px solid var(--sui-stroke-soft-200);cursor:default;color:var(--sui-stroke-sub-300);transition:background-color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),color var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}.sui-rating__bar-cell:first-child{border-left:0}:host([data-appearance=bar-area]) .sui-rating__bar-cell{flex:1 0 0;width:auto;min-width:0;background:transparent}button.sui-rating__bar-cell{cursor:pointer}button.sui-rating__bar-cell:focus-visible{outline:2px solid var(--sui-text-strong-950);outline-offset:-2px}:host([data-type=star]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-yellow-500, #f6b51e)}:host([data-type=heart]) .sui-rating__bar-cell[data-cell-state=selected]{color:var(--sui-state-error-base, #fb3748)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=hover] .sui-rating__number,:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__number{color:var(--sui-text-strong-950)}:host([data-type=number]) .sui-rating__bar-cell[data-cell-state=selected],:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected]{background:var(--sui-bg-weak-50)}.sui-rating__number{font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-sub-600);text-align:center;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__emoji{display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.5);opacity:.55;transition:filter var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out),opacity var(--sui-motion-duration-x-fast, .12s) var(--sui-motion-ease-out, ease-out)}:host([data-type=emoji]) .sui-rating__bar-cell[data-cell-state=selected] .sui-rating__emoji{filter:grayscale(0);opacity:1}.sui-rating__area{display:flex;flex-direction:column;align-items:stretch;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12, 12px);overflow:hidden}.sui-rating__area-input{display:flex;flex:1 0 0;align-items:flex-start;justify-content:flex-start;padding:12px;background:var(--sui-bg-white-0)}.sui-rating__area-textarea{appearance:none;display:block;width:100%;min-height:72px;border:0;margin:0;padding:0;background:transparent;resize:none;font-family:var(--sui-font-sans);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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-textarea::placeholder{color:var(--sui-text-soft-400)}.sui-rating__area-textarea:focus-visible{outline:none}.sui-rating__area-text{width:100%;min-height:72px;margin:0;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-rating__area-text--placeholder{color:var(--sui-text-soft-400)}\n"] }]
|
|
14584
14624
|
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], halfStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "halfStep", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], reviewCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewCount", required: false }] }], reviewLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviewLink", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], reason: [{ type: i0.Input, args: [{ isSignal: true, alias: "reason", required: false }] }, { type: i0.Output, args: ["reasonChange"] }], reasonPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasonPlaceholder", required: false }] }], reasonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasonRows", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
14585
14625
|
|
|
14586
14626
|
/* ═══ SUI Rich Editor Item — SUI Design System 2.0 ══════════════════════
|
|
@@ -15156,7 +15196,7 @@ class SuiSelect {
|
|
|
15156
15196
|
useExisting: forwardRef(() => SuiSelect),
|
|
15157
15197
|
multi: true,
|
|
15158
15198
|
},
|
|
15159
|
-
], 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 });
|
|
15199
|
+
], 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 [class.sui-select__panel--large]=\"size() === 'large'\"\n [class.sui-select__panel--xlarge]=\"size() === 'xlarge'\"\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-size=large]) .sui-select__value,:host([data-sui-size=xlarge]) .sui-select__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}: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}.sui-select__panel--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:12px 8px}.sui-select__panel--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label,.sui-select__panel--xlarge sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-select__panel:not(.sui-select__panel--large):not(.sui-select__panel--xlarge) sui-dropdown-item{min-height:44px;padding:12px 8px}}\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 });
|
|
15160
15200
|
}
|
|
15161
15201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSelect, decorators: [{
|
|
15162
15202
|
type: Component,
|
|
@@ -15184,7 +15224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
15184
15224
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
15185
15225
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
15186
15226
|
'[attr.data-sui-open]': 'isOpen() ? "" : null',
|
|
15187
|
-
}, 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"] }]
|
|
15227
|
+
}, 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 [class.sui-select__panel--large]=\"size() === 'large'\"\n [class.sui-select__panel--xlarge]=\"size() === 'xlarge'\"\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-size=large]) .sui-select__value,:host([data-sui-size=xlarge]) .sui-select__value{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}: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}.sui-select__panel--large sui-dropdown-item{min-height:44px;padding:10px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:12px 8px}.sui-select__panel--large sui-dropdown-item ::ng-deep .sui-dropdown-item__label,.sui-select__panel--xlarge sui-dropdown-item ::ng-deep .sui-dropdown-item__label{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}@media(max-width:767px){.sui-select__panel:not(.sui-select__panel--large):not(.sui-select__panel--xlarge) sui-dropdown-item{min-height:44px;padding:12px 8px}}\n"] }]
|
|
15188
15228
|
}], 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: [{
|
|
15189
15229
|
type: HostListener,
|
|
15190
15230
|
args: ['keydown', ['$event']]
|
|
@@ -16118,7 +16158,7 @@ class SuiStepper {
|
|
|
16118
16158
|
return {
|
|
16119
16159
|
index: i,
|
|
16120
16160
|
state,
|
|
16121
|
-
label: list[i]?.label ?? `
|
|
16161
|
+
label: list[i]?.label ?? `Paso ${i + 1}`,
|
|
16122
16162
|
number: String(i + 1),
|
|
16123
16163
|
isLast: i === length - 1,
|
|
16124
16164
|
};
|
|
@@ -16257,6 +16297,12 @@ class SuiStoreCard {
|
|
|
16257
16297
|
isFavorite = input(false, ...(ngDevMode ? [{ debugName: "isFavorite" }] : /* istanbul ignore next */ []));
|
|
16258
16298
|
/** Si true, no se navega al detalle (caso suspendido). El padre puede sobreescribir. */
|
|
16259
16299
|
disableLink = input(false, ...(ngDevMode ? [{ debugName: "disableLink" }] : /* istanbul ignore next */ []));
|
|
16300
|
+
/** Ruta base del detalle: la tarjeta navega a `[linkBase, store.id]`. El
|
|
16301
|
+
* default es la ruta del cliente de Master Pedidos; otra app pasa la suya. */
|
|
16302
|
+
linkBase = input('/cliente/restaurante', ...(ngDevMode ? [{ debugName: "linkBase" }] : /* istanbul ignore next */ []));
|
|
16303
|
+
/** Corazón de favorito: `small` 36 (default) · `medium` 40 para mobile —
|
|
16304
|
+
* extensión SUI (03-10-2026). */
|
|
16305
|
+
size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
16260
16306
|
/**
|
|
16261
16307
|
* El texto de Envío y el de Distancia, ya escritos por quien llama.
|
|
16262
16308
|
*
|
|
@@ -16295,8 +16341,10 @@ class SuiStoreCard {
|
|
|
16295
16341
|
const s = this.store();
|
|
16296
16342
|
if (this.disableLink() || s.isSuspended)
|
|
16297
16343
|
return null;
|
|
16298
|
-
return [
|
|
16344
|
+
return [this.linkBase(), s.id];
|
|
16299
16345
|
}, ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
|
|
16346
|
+
/** Glyph del corazón: 18 en small, 20 en medium. */
|
|
16347
|
+
favIconSize = computed(() => (this.size() === 'medium' ? 20 : 18), ...(ngDevMode ? [{ debugName: "favIconSize" }] : /* istanbul ignore next */ []));
|
|
16300
16348
|
initial = computed(() => this.store().name?.charAt(0) ?? '', ...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
|
|
16301
16349
|
/**
|
|
16302
16350
|
* El puntaje con cuántas opiniones lo sostienen: «4.67 (12)».
|
|
@@ -16383,12 +16431,14 @@ class SuiStoreCard {
|
|
|
16383
16431
|
this.ratingClicked.emit({ id: s.id, name: s.name, logoUrl: s.logoUrl ?? null });
|
|
16384
16432
|
}
|
|
16385
16433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null }, deliveryText: { classPropertyName: "deliveryText", publicName: "deliveryText", isSignal: true, isRequired: false, transformFunction: null }, distanceText: { classPropertyName: "distanceText", publicName: "distanceText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, ngImport: i0, template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"var(--sui-primary-base, #fa7319)\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- `null` en `deliveryText` = esta columna no existe, y no un guion:\n un hueco rotulado \u00ABEnv\u00EDo\u00BB sobre nada se lee como dato faltante.\n Quien no pasa nada sigue viendo la etiqueta deducida. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver las opiniones y la informaci\u00F3n del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n <!-- El chevron es lo que dice que la nota ABRE algo. Sin \u00E9l el\n stat se lee como dato muerto y nadie lo toca \u2014 el mismo\n remate que la ficha del local usa junto al puntaje. Va\n siempre, incluso sin opiniones: el modal tambi\u00E9n trae la\n pesta\u00F1a de informaci\u00F3n \u2014mapa, horario, direcci\u00F3n\u2014, que sirve\n igual el primer d\u00EDa del local. -->\n <sui-icon class=\"store__stat-chevron\" name=\"arrow-right-s-line\" [size]=\"14\"></sui-icon>\n </span>\n </button>\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- Las dos columnas de la derecha desaparecen con `null` (ver\n `deliveryText`/`distanceText` en el .ts): con tres columnas el\n reparto sobra y el distrito deja de recortarse. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n @if (distanceLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n }\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:var(--sui-primary-darkest, #b85513);background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-static-white, #fff);border:2px solid var(--sui-static-white, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}.store__stat--elastico{overflow:hidden}.store__stat--elastico .store__stat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__stat--elastico .store__stat-texto{overflow:hidden;text-overflow:ellipsis;min-width:0}.store__stat-chevron{color:var(--sui-text-soft-400, #a3a3a3);margin-left:-1px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiImgRetry, selector: "img[suiImgRetry]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiStoreCard, isStandalone: true, selector: "sui-store-card", inputs: { store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, isFavorite: { classPropertyName: "isFavorite", publicName: "isFavorite", isSignal: true, isRequired: false, transformFunction: null }, disableLink: { classPropertyName: "disableLink", publicName: "disableLink", isSignal: true, isRequired: false, transformFunction: null }, linkBase: { classPropertyName: "linkBase", publicName: "linkBase", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, deliveryText: { classPropertyName: "deliveryText", publicName: "deliveryText", isSignal: true, isRequired: false, transformFunction: null }, distanceText: { classPropertyName: "distanceText", publicName: "distanceText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleFavorite: "toggleFavorite", ratingClicked: "ratingClicked" }, host: { properties: { "attr.data-sui-size": "size()" } }, ngImport: i0, template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"favIconSize()\"\n color=\"var(--sui-primary-base, #fa7319)\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- `null` en `deliveryText` = esta columna no existe, y no un guion:\n un hueco rotulado \u00ABEnv\u00EDo\u00BB sobre nada se lee como dato faltante.\n Quien no pasa nada sigue viendo la etiqueta deducida. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver las opiniones y la informaci\u00F3n del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n <!-- El chevron es lo que dice que la nota ABRE algo. Sin \u00E9l el\n stat se lee como dato muerto y nadie lo toca \u2014 el mismo\n remate que la ficha del local usa junto al puntaje. Va\n siempre, incluso sin opiniones: el modal tambi\u00E9n trae la\n pesta\u00F1a de informaci\u00F3n \u2014mapa, horario, direcci\u00F3n\u2014, que sirve\n igual el primer d\u00EDa del local. -->\n <sui-icon class=\"store__stat-chevron\" name=\"arrow-right-s-line\" [size]=\"14\"></sui-icon>\n </span>\n </button>\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- Las dos columnas de la derecha desaparecen con `null` (ver\n `deliveryText`/`distanceText` en el .ts): con tres columnas el\n reparto sobra y el distrito deja de recortarse. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n <!-- La distancia tambi\u00E9n es de largo variable (\u00ABmenos de 500 m\u00BB): en\n una tarjeta angosta baja a dos l\u00EDneas en vez de salirse. -->\n @if (distanceLabel() !== null) {\n <div class=\"store__stat store__stat--distancia\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n }\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:var(--sui-primary-darkest, #b85513);background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-static-white, #fff);border:2px solid var(--sui-static-white, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}.store__stat--elastico{overflow:hidden}.store__stat--elastico .store__stat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__stat--elastico .store__stat-texto{overflow:hidden;text-overflow:ellipsis;min-width:0}.store__stat--distancia{flex-shrink:1;min-width:64px}.store__stat--distancia .store__stat-value{white-space:normal;text-wrap:balance}.store__stat:not(.store__stat--elastico):not(.store__stat--distancia){flex-shrink:0}.store__stat-chevron{color:var(--sui-text-soft-400, #a3a3a3);margin-left:-1px}:host([data-sui-size=medium]) .store__fav{width:40px;height:40px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiImgRetry, selector: "img[suiImgRetry]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16387
16435
|
}
|
|
16388
16436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiStoreCard, decorators: [{
|
|
16389
16437
|
type: Component,
|
|
16390
|
-
args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon, SuiImgRetry], template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"18\"\n color=\"var(--sui-primary-base, #fa7319)\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- `null` en `deliveryText` = esta columna no existe, y no un guion:\n un hueco rotulado \u00ABEnv\u00EDo\u00BB sobre nada se lee como dato faltante.\n Quien no pasa nada sigue viendo la etiqueta deducida. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver las opiniones y la informaci\u00F3n del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n <!-- El chevron es lo que dice que la nota ABRE algo. Sin \u00E9l el\n stat se lee como dato muerto y nadie lo toca \u2014 el mismo\n remate que la ficha del local usa junto al puntaje. Va\n siempre, incluso sin opiniones: el modal tambi\u00E9n trae la\n pesta\u00F1a de informaci\u00F3n \u2014mapa, horario, direcci\u00F3n\u2014, que sirve\n igual el primer d\u00EDa del local. -->\n <sui-icon class=\"store__stat-chevron\" name=\"arrow-right-s-line\" [size]=\"14\"></sui-icon>\n </span>\n </button>\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- Las dos columnas de la derecha desaparecen con `null` (ver\n `deliveryText`/`distanceText` en el .ts): con tres columnas el\n reparto sobra y el distrito deja de recortarse. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n @if (distanceLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n }\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:var(--sui-primary-darkest, #b85513);background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-static-white, #fff);border:2px solid var(--sui-static-white, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}.store__stat--elastico{overflow:hidden}.store__stat--elastico .store__stat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__stat--elastico .store__stat-texto{overflow:hidden;text-overflow:ellipsis;min-width:0}.store__stat-chevron{color:var(--sui-text-soft-400, #a3a3a3);margin-left:-1px}\n"] }]
|
|
16391
|
-
|
|
16438
|
+
args: [{ selector: 'sui-store-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, SuiIcon, SuiImgRetry], host: {
|
|
16439
|
+
'[attr.data-sui-size]': 'size()',
|
|
16440
|
+
}, template: "<a class=\"store\"\n [class.store--suspended]=\"store().isSuspended\"\n [class.store--closed]=\"!store().isOpen && !store().isSuspended && !store().isOwnerPreview\"\n [class.store--preview]=\"store().isOwnerPreview\"\n [routerLink]=\"link()\"\n (click)=\"onCardClick($event)\">\n\n <div class=\"store__cover\"\n [class.store__cover--fallback]=\"!store().coverUrl\">\n <!-- <img> real (no background CSS): permite retry nativo via suiImgRetry\n cuando un load falla (red flaky) + fade-in al cargar. El fallback\n oscuro queda debajo como placeholder hasta que la imagen aparece. -->\n @if (store().coverUrl) {\n <img class=\"store__cover-img\"\n suiImgRetry\n [src]=\"store().coverUrl\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\" />\n }\n <div class=\"store__cover-grad\"></div>\n\n @if (!store().isOwnerPreview) {\n <button type=\"button\"\n class=\"store__fav\"\n [class.store__fav--active]=\"isFavorite()\"\n (click)=\"onFavClick($event)\"\n aria-label=\"Favorito\">\n <sui-icon\n [name]=\"isFavorite() ? 'heart-fill' : 'heart-line'\"\n [size]=\"favIconSize()\"\n color=\"var(--sui-primary-base, #fa7319)\"\n ></sui-icon>\n </button>\n }\n\n @if (store().isSuspended) {\n <span class=\"store__status store__status--suspended\">No disponible</span>\n } @else if (previewBadge(); as pb) {\n <span class=\"store__status\"\n [class.store__status--draft]=\"pb.variant === 'draft'\"\n [class.store__status--pending]=\"pb.variant === 'pending'\"\n [class.store__status--rejected]=\"pb.variant === 'rejected'\">\n {{ pb.label }}\n </span>\n } @else {\n <span class=\"store__status\"\n [class.store__status--open]=\"store().isOpen\"\n [class.store__status--closed]=\"!store().isOpen\">\n {{ store().isOpen ? 'Abierto' : 'Cerrado' }}\n </span>\n }\n </div>\n\n <div class=\"store__body\">\n <div class=\"store__logo\">\n @if (store().logoUrl) {\n <!-- suiImgRetry reintenta loads fallidos; si muere definitivo, el\n atributo data-sui-img-dead lo oculta via CSS (queda el fondo). -->\n <img suiImgRetry [src]=\"store().logoUrl\" [alt]=\"store().name\" />\n } @else {\n {{ initial() }}\n }\n </div>\n <div class=\"store__info\">\n <h3 class=\"store__name\">{{ store().name }}</h3>\n <p class=\"store__type\">{{ store().businessType }}</p>\n </div>\n\n <!-- Meta a ANCHO COMPLETO de la card (hijo directo del body con wrap):\n antes viv\u00EDa dentro de store__info y heredaba el sangrado del logo\n (60px muertos a la izquierda). -->\n @if (store().isOwnerPreview) {\n <!-- Modo preview (owner viendo borrador/revisi\u00F3n, super-admin revisando):\n solo Ubicaci\u00F3n + Env\u00EDo. Rating + Distancia no aplican antes de aprobar. -->\n <div class=\"store__meta store__meta--preview\">\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- `null` en `deliveryText` = esta columna no existe, y no un guion:\n un hueco rotulado \u00ABEnv\u00EDo\u00BB sobre nada se lee como dato faltante.\n Quien no pasa nada sigue viendo la etiqueta deducida. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n </div>\n } @else {\n <div class=\"store__meta\">\n <button\n type=\"button\"\n class=\"store__stat store__stat--clickable\"\n (click)=\"onRatingClick($event)\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"'Ver las opiniones y la informaci\u00F3n del local'\"\n >\n <span class=\"store__stat-label\">Calificaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"star-fill\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n {{ ratingLabel() }}\n <!-- El chevron es lo que dice que la nota ABRE algo. Sin \u00E9l el\n stat se lee como dato muerto y nadie lo toca \u2014 el mismo\n remate que la ficha del local usa junto al puntaje. Va\n siempre, incluso sin opiniones: el modal tambi\u00E9n trae la\n pesta\u00F1a de informaci\u00F3n \u2014mapa, horario, direcci\u00F3n\u2014, que sirve\n igual el primer d\u00EDa del local. -->\n <sui-icon class=\"store__stat-chevron\" name=\"arrow-right-s-line\" [size]=\"14\"></sui-icon>\n </span>\n </button>\n <!-- El distrito es el \u00FAnico dato de largo variable de la fila, as\u00ED que\n es el que cede: ver \u00ABSan Jer\u00F3ni\u2026\u00BB cuesta menos que ver los cuatro\n stats pis\u00E1ndose. Por eso lleva `--elastico`. -->\n <div class=\"store__stat store__stat--elastico\">\n <span class=\"store__stat-label\">Ubicaci\u00F3n</span>\n <span class=\"store__stat-value\">\n <sui-icon name=\"map-pin-line\" [size]=\"13\" color=\"var(--sui-primary-base, #fa7319)\"></sui-icon>\n <span class=\"store__stat-texto\">{{ store().district || '\u2014' }}</span>\n </span>\n </div>\n <!-- Las dos columnas de la derecha desaparecen con `null` (ver\n `deliveryText`/`distanceText` en el .ts): con tres columnas el\n reparto sobra y el distrito deja de recortarse. -->\n @if (deliveryLabel() !== null) {\n <div class=\"store__stat\">\n <span class=\"store__stat-label\">Env\u00EDo</span>\n <span class=\"store__stat-value\">{{ deliveryLabel() }}</span>\n </div>\n }\n <!-- La distancia tambi\u00E9n es de largo variable (\u00ABmenos de 500 m\u00BB): en\n una tarjeta angosta baja a dos l\u00EDneas en vez de salirse. -->\n @if (distanceLabel() !== null) {\n <div class=\"store__stat store__stat--distancia\">\n <span class=\"store__stat-label\">Distancia</span>\n <span class=\"store__stat-value\">{{ distanceLabel() }}</span>\n </div>\n }\n </div>\n }\n </div>\n</a>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block}.store{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.store img{-webkit-user-drag:none;pointer-events:none}.store{display:block;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease;cursor:pointer}.store:active{transform:scale(.995);box-shadow:0 4px 14px #00000014}.store--suspended{cursor:not-allowed;opacity:.6}.store--closed .store__cover{filter:grayscale(1) brightness(.92);transition:filter .2s ease}.store--preview{cursor:default}.store--preview:active{transform:none;box-shadow:none}.store__cover{height:120px;position:relative;overflow:hidden;background:linear-gradient(135deg,#3a3a3a,#171717)}.store__cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease-out}.store__cover-img.sui-img-loaded{opacity:1}.store__cover-img[data-sui-img-dead]{display:none}.store__cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#00000059);pointer-events:none}.store__fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;transition:background .15s ease}.store__fav:active{background:#fff}.store__status{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:4px;z-index:1;letter-spacing:.01em}.store__status:before{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--sui-state-success-base, #22c55e)}.store__status--open{color:var(--sui-state-success-base, #16a34a)}.store__status--open:before{background:var(--sui-state-success-base, #22c55e)}.store__status--closed{color:var(--sui-state-faded-base, #94a3b8)}.store__status--closed:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--suspended{color:var(--sui-state-error-base, #dc2626)}.store__status--suspended:before{background:var(--sui-state-error-base, #dc2626)}.store__status--draft{color:var(--sui-state-faded-base, #475569);background:#fffffff5}.store__status--draft:before{background:var(--sui-state-faded-base, #94a3b8)}.store__status--pending{color:var(--sui-primary-darkest, #b85513);background:#fffffff5}.store__status--pending:before{background:var(--sui-primary-base, #fa7319);animation:store-pulse 1.6s ease-in-out infinite}.store__status--rejected{color:var(--sui-state-error-base, #b91c1c);background:#fffffff5}.store__status--rejected:before{background:var(--sui-state-error-base, #dc2626)}@keyframes store-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.4)}}.store__body{padding:12px 14px 14px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.store__logo img[data-sui-img-dead]{display:none}.store__logo{width:48px;height:48px;border-radius:10px;background:var(--sui-static-white, #fff);border:2px solid var(--sui-static-white, #fff);box-shadow:0 1px 4px #0000001f;flex-shrink:0;margin-top:-32px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--sui-primary-base, #fa7319);overflow:hidden;position:relative;z-index:2}.store__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.store__info{flex:1;min-width:0}.store__name{font-size:20px;line-height:26px;font-weight:700;color:var(--sui-text-strong-950, #171717);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__type{font-size:14px;line-height:20px;font-weight:500;color:var(--sui-text-sub-600, #5c5c5c);margin:0 0 8px}.store__meta{width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:2px;padding-top:14px;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb)}.store__meta--preview{justify-content:flex-start;gap:32px}.store__stat{display:flex;flex-direction:column;gap:2px;min-width:0}.store__stat--clickable{background:transparent;border:none;padding:4px 6px;margin:-4px -6px;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.store__stat--clickable:hover{background:var(--sui-bg-weak-50, #f5f7fa)}.store__stat--clickable:active{background:var(--sui-bg-soft-200, #ebeef2)}.store__stat-label{font-size:10px;color:var(--sui-text-soft-400, #a3a3a3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.store__stat-value{font-size:13px;font-weight:700;color:var(--sui-text-strong-950, #171717);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.store__stat-value svg{color:var(--sui-primary-base, #fa7319);flex-shrink:0}.store__stat--elastico{overflow:hidden}.store__stat--elastico .store__stat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.store__stat--elastico .store__stat-texto{overflow:hidden;text-overflow:ellipsis;min-width:0}.store__stat--distancia{flex-shrink:1;min-width:64px}.store__stat--distancia .store__stat-value{white-space:normal;text-wrap:balance}.store__stat:not(.store__stat--elastico):not(.store__stat--distancia){flex-shrink:0}.store__stat-chevron{color:var(--sui-text-soft-400, #a3a3a3);margin-left:-1px}:host([data-sui-size=medium]) .store__fav{width:40px;height:40px}\n"] }]
|
|
16441
|
+
}], propDecorators: { store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], isFavorite: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavorite", required: false }] }], disableLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableLink", required: false }] }], linkBase: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkBase", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], deliveryText: [{ type: i0.Input, args: [{ isSignal: true, alias: "deliveryText", required: false }] }], distanceText: [{ type: i0.Input, args: [{ isSignal: true, alias: "distanceText", required: false }] }], toggleFavorite: [{ type: i0.Output, args: ["toggleFavorite"] }], ratingClicked: [{ type: i0.Output, args: ["ratingClicked"] }] } });
|
|
16392
16442
|
|
|
16393
16443
|
/**
|
|
16394
16444
|
* Card de producto (catálogo del cliente). Presentacional: recibe los datos por
|
|
@@ -16471,6 +16521,14 @@ class SuiProductCard {
|
|
|
16471
16521
|
* se ve SIEMPRE: también con `available=false` (el agotado es justo el
|
|
16472
16522
|
* que el dueño quiere tocar) y sin que `closed` lo apague. Nunca stepper. */
|
|
16473
16523
|
action = input('add', ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
|
|
16524
|
+
/** Precio de referencia (antes del descuento). Si es MAYOR que `price`, la
|
|
16525
|
+
* card muestra el precio en rojo con la chapa «-N%» al lado y este precio
|
|
16526
|
+
* tachado debajo. Igual o menor → se ignora. El porcentaje se calcula, no se
|
|
16527
|
+
* pasa: un tercer número podría quedar desincronizado de los otros dos. */
|
|
16528
|
+
precioLista = input(null, ...(ngDevMode ? [{ debugName: "precioLista" }] : /* istanbul ignore next */ []));
|
|
16529
|
+
/** Tamaño de los botones del pie: `small` 36 (default) · `medium` 40 para
|
|
16530
|
+
* mobile — extensión SUI (03-10-2026). */
|
|
16531
|
+
size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
16474
16532
|
/** Tap en la card (abrir detalle del producto). */
|
|
16475
16533
|
openDetail = output();
|
|
16476
16534
|
/** Tap en el botón "+" (agregar al carrito). */
|
|
@@ -16482,6 +16540,18 @@ class SuiProductCard {
|
|
|
16482
16540
|
/** Tap en el lápiz (solo con `action="edit"`). */
|
|
16483
16541
|
edit = output();
|
|
16484
16542
|
formattedPrice = computed(() => (this.price() ?? 0).toFixed(2), ...(ngDevMode ? [{ debugName: "formattedPrice" }] : /* istanbul ignore next */ []));
|
|
16543
|
+
/** Descuento resuelto: solo si `precioLista` > `price`. */
|
|
16544
|
+
descuento = computed(() => {
|
|
16545
|
+
const lista = this.precioLista();
|
|
16546
|
+
const precio = this.price() ?? 0;
|
|
16547
|
+
if (lista == null || !(lista > precio))
|
|
16548
|
+
return null;
|
|
16549
|
+
return { pct: Math.round((1 - precio / lista) * 100), antes: lista.toFixed(2) };
|
|
16550
|
+
}, ...(ngDevMode ? [{ debugName: "descuento" }] : /* istanbul ignore next */ []));
|
|
16551
|
+
/** Glyph del «+» / lápiz: 18 en small, 20 en medium. */
|
|
16552
|
+
iconSize = computed(() => (this.size() === 'medium' ? 20 : 18), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
16553
|
+
/** Glyph del stepper: 16 en small, 20 en medium. */
|
|
16554
|
+
stepIconSize = computed(() => (this.size() === 'medium' ? 20 : 16), ...(ngDevMode ? [{ debugName: "stepIconSize" }] : /* istanbul ignore next */ []));
|
|
16485
16555
|
showStepper = computed(() => this.action() !== 'edit' && this.available() && this.quantity() > 0, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
|
|
16486
16556
|
/** Config resuelta de la imagen (string → { url }; `position` default 50).
|
|
16487
16557
|
* null = sin imagen → fallback. */
|
|
@@ -16530,12 +16600,14 @@ class SuiProductCard {
|
|
|
16530
16600
|
onDec(event) { event.stopPropagation(); this.decrement.emit(); }
|
|
16531
16601
|
onEdit(event) { event.stopPropagation(); this.edit.emit(); }
|
|
16532
16602
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16533
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiProductCard, isStandalone: true, selector: "sui-product-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, available: { classPropertyName: "available", publicName: "available", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, closed: { classPropertyName: "closed", publicName: "closed", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, unavailableLabel: { classPropertyName: "unavailableLabel", publicName: "unavailableLabel", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement", edit: "edit" }, ngImport: i0, template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\n [class.product--edit]=\"action() === 'edit'\"\n (click)=\"onCard()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <div class=\"product__img\"\n [class.product__img--icon]=\"showIconFallback()\"\n [class.product__img--named]=\"showNamedFallback()\"\n [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (imageCfg(); as img) {\n <img [ngSrc]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\"\n (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\n } @else if (showNamedFallback()) {\n <div class=\"product__band\">\n <span class=\"product__band-name\">{{ name() }}</span>\n </div>\n } @else {\n <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n }\n @if (!available()) {\n <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n }\n </div>\n\n <div class=\"product__body\">\n <h3 class=\"product__name\">{{ name() }}</h3>\n @if (description()) {\n <p class=\"product__desc\">{{ description() }}</p>\n }\n <div class=\"product__footer\">\n <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n @if (action() === 'edit') {\n <button type=\"button\" class=\"product__add product__add--edit\"\n (click)=\"onEdit($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Editar\">\n <sui-icon name=\"pencil-line\" [size]=\"18\" />\n </button>\n } @else if (available()) {\n @if (showStepper()) {\n <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n <button type=\"button\" class=\"product__step\"\n (click)=\"onDec($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"16\" />\n </button>\n <span class=\"product__step-qty\">{{ quantity() }}</span>\n <button type=\"button\" class=\"product__step\"\n (click)=\"onInc($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [disabled]=\"closed()\"\n aria-label=\"Agregar uno\">\n <sui-icon name=\"add-line\" [size]=\"16\" />\n </button>\n </div>\n } @else {\n <button type=\"button\" class=\"product__add\"\n (click)=\"onAdd($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [disabled]=\"closed()\"\n aria-label=\"Agregar al carrito\">\n <sui-icon name=\"add-line\" [size]=\"18\" />\n </button>\n }\n }\n </div>\n </div>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}.product{width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product--edit{cursor:pointer}.product__img{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiProductCard, isStandalone: true, selector: "sui-product-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, available: { classPropertyName: "available", publicName: "available", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, closed: { classPropertyName: "closed", publicName: "closed", isSignal: true, isRequired: false, transformFunction: null }, currencySymbol: { classPropertyName: "currencySymbol", publicName: "currencySymbol", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, unavailableLabel: { classPropertyName: "unavailableLabel", publicName: "unavailableLabel", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, precioLista: { classPropertyName: "precioLista", publicName: "precioLista", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement", edit: "edit" }, host: { properties: { "attr.data-sui-size": "size()" } }, ngImport: i0, template: "<!-- La card NO es un <button>: adentro hay botones (\u00AB+\u00BB, stepper, l\u00E1piz) y un\n bot\u00F3n dentro de otro es HTML inv\u00E1lido. La tarjeta es un <div> y lo que la\n abre es `.product__hit`, un bot\u00F3n invisible estirado sobre toda la card\n (patr\u00F3n \u00ABstretched button\u00BB); los botones del pie van por encima de \u00E9l. -->\n<div class=\"product\"\n [class.product--unavailable]=\"!available()\"\n [class.product--edit]=\"action() === 'edit'\"\n (click)=\"onCard()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <button type=\"button\" class=\"product__hit\" [attr.aria-label]=\"name()\"></button>\n\n <div class=\"product__img\"\n [class.product__img--icon]=\"showIconFallback()\"\n [class.product__img--named]=\"showNamedFallback()\"\n [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (imageCfg(); as img) {\n <img [ngSrc]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\"\n (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\n } @else if (showNamedFallback()) {\n <div class=\"product__band\">\n <span class=\"product__band-name\">{{ name() }}</span>\n </div>\n } @else {\n <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n }\n @if (!available()) {\n <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n }\n </div>\n\n <div class=\"product__body\">\n <h3 class=\"product__name\">{{ name() }}</h3>\n @if (description()) {\n <p class=\"product__desc\">{{ description() }}</p>\n }\n <div class=\"product__footer\">\n @if (descuento(); as d) {\n <div class=\"product__prices\">\n <span class=\"product__price product__price--oferta\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n <span class=\"product__pct\">-{{ d.pct }}%</span>\n <s class=\"product__price-was\">{{ currencySymbol() }} {{ d.antes }}</s>\n </div>\n } @else {\n <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n }\n @if (action() === 'edit') {\n <button type=\"button\" class=\"product__add product__add--edit\"\n (click)=\"onEdit($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Editar\">\n <sui-icon name=\"pencil-line\" [size]=\"iconSize()\" />\n </button>\n } @else if (available()) {\n @if (showStepper()) {\n <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n <button type=\"button\" class=\"product__step\"\n (click)=\"onDec($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"stepIconSize()\" />\n </button>\n <span class=\"product__step-qty\">{{ quantity() }}</span>\n <button type=\"button\" class=\"product__step\"\n (click)=\"onInc($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [disabled]=\"closed()\"\n aria-label=\"Agregar uno\">\n <sui-icon name=\"add-line\" [size]=\"stepIconSize()\" />\n </button>\n </div>\n } @else {\n <button type=\"button\" class=\"product__add\"\n (click)=\"onAdd($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [disabled]=\"closed()\"\n aria-label=\"Agregar al carrito\">\n <sui-icon name=\"add-line\" [size]=\"iconSize()\" />\n </button>\n }\n }\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}@media print{:host{content-visibility:visible}}.product{position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product--edit{cursor:pointer}.product:has(.product__hit:focus-visible){outline:2px solid var(--sui-primary-base, #fa7319);outline-offset:2px}.product__hit{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:none;border-radius:inherit;background:transparent;cursor:inherit;-webkit-tap-highlight-color:transparent}.product__hit:focus{outline:none}.product__img{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{position:relative;z-index:2;width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{position:relative;z-index:2;display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}.product__prices{flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;line-height:1.15}.product__price--oferta{white-space:nowrap;color:var(--sui-red-700, #d02533)}:host-context([data-theme=dark]) .product__price--oferta{white-space:nowrap;color:var(--sui-red-400, #ff6875)}.product__pct{padding:2px 5px;border-radius:4px;background:var(--sui-red-700, #d02533);color:var(--sui-static-white, #fff);font-size:11px;font-weight:600;line-height:12px;letter-spacing:.02em;white-space:nowrap}.product__price-was{flex-basis:100%;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap}:host([data-sui-size=medium]) .product__footer{flex-wrap:wrap;row-gap:8px}:host([data-sui-size=medium]) .product__price{white-space:nowrap}:host([data-sui-size=medium]) .product__add{width:40px;height:40px;margin-left:auto}:host([data-sui-size=medium]) .product__stepper{height:40px;border-radius:20px;margin-left:auto}:host([data-sui-size=medium]) .product__step{width:40px;height:40px}:host([data-sui-size=medium]) .product__step-qty{min-width:24px;font-size:16px}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16534
16604
|
}
|
|
16535
16605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, decorators: [{
|
|
16536
16606
|
type: Component,
|
|
16537
|
-
args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon],
|
|
16538
|
-
|
|
16607
|
+
args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], host: {
|
|
16608
|
+
'[attr.data-sui-size]': 'size()',
|
|
16609
|
+
}, template: "<!-- La card NO es un <button>: adentro hay botones (\u00AB+\u00BB, stepper, l\u00E1piz) y un\n bot\u00F3n dentro de otro es HTML inv\u00E1lido. La tarjeta es un <div> y lo que la\n abre es `.product__hit`, un bot\u00F3n invisible estirado sobre toda la card\n (patr\u00F3n \u00ABstretched button\u00BB); los botones del pie van por encima de \u00E9l. -->\n<div class=\"product\"\n [class.product--unavailable]=\"!available()\"\n [class.product--edit]=\"action() === 'edit'\"\n (click)=\"onCard()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\">\n <button type=\"button\" class=\"product__hit\" [attr.aria-label]=\"name()\"></button>\n\n <div class=\"product__img\"\n [class.product__img--icon]=\"showIconFallback()\"\n [class.product__img--named]=\"showNamedFallback()\"\n [class.product__img--cargando]=\"imageCfg() && cargandoImagen()\"\n [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (imageCfg(); as img) {\n <img [ngSrc]=\"urlMostrada() ?? img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\"\n (load)=\"imagenLista()\" (error)=\"imagenFallo()\" />\n } @else if (showNamedFallback()) {\n <div class=\"product__band\">\n <span class=\"product__band-name\">{{ name() }}</span>\n </div>\n } @else {\n <sui-icon class=\"product__icon\" name=\"image-line\" [size]=\"32\" />\n }\n @if (!available()) {\n <span class=\"product__tag product__tag--unavail\">{{ unavailableLabel() }}</span>\n }\n </div>\n\n <div class=\"product__body\">\n <h3 class=\"product__name\">{{ name() }}</h3>\n @if (description()) {\n <p class=\"product__desc\">{{ description() }}</p>\n }\n <div class=\"product__footer\">\n @if (descuento(); as d) {\n <div class=\"product__prices\">\n <span class=\"product__price product__price--oferta\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n <span class=\"product__pct\">-{{ d.pct }}%</span>\n <s class=\"product__price-was\">{{ currencySymbol() }} {{ d.antes }}</s>\n </div>\n } @else {\n <span class=\"product__price\">{{ currencySymbol() }} {{ formattedPrice() }}</span>\n }\n @if (action() === 'edit') {\n <button type=\"button\" class=\"product__add product__add--edit\"\n (click)=\"onEdit($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n aria-label=\"Editar\">\n <sui-icon name=\"pencil-line\" [size]=\"iconSize()\" />\n </button>\n } @else if (available()) {\n @if (showStepper()) {\n <div class=\"product__stepper\" (click)=\"$event.stopPropagation()\">\n <button type=\"button\" class=\"product__step\"\n (click)=\"onDec($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [attr.aria-label]=\"quantity() === 1 ? 'Quitar del carrito' : 'Quitar uno'\">\n <sui-icon [name]=\"quantity() === 1 ? 'delete-bin-line' : 'subtract-line'\" [size]=\"stepIconSize()\" />\n </button>\n <span class=\"product__step-qty\">{{ quantity() }}</span>\n <button type=\"button\" class=\"product__step\"\n (click)=\"onInc($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [disabled]=\"closed()\"\n aria-label=\"Agregar uno\">\n <sui-icon name=\"add-line\" [size]=\"stepIconSize()\" />\n </button>\n </div>\n } @else {\n <button type=\"button\" class=\"product__add\"\n (click)=\"onAdd($event)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n [disabled]=\"closed()\"\n aria-label=\"Agregar al carrito\">\n <sui-icon name=\"add-line\" [size]=\"iconSize()\" />\n </button>\n }\n }\n </div>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}@media print{:host{content-visibility:visible}}.product{position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),box-shadow .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product:active{transform:scale(.98);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, .06))}.product--unavailable{opacity:.55;cursor:not-allowed}.product--unavailable .product__img{filter:grayscale(.55)}.product--edit{cursor:pointer}.product:has(.product__hit:focus-visible){outline:2px solid var(--sui-primary-base, #fa7319);outline-offset:2px}.product__hit{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:none;border-radius:inherit;background:transparent;cursor:inherit;-webkit-tap-highlight-color:transparent}.product__hit:focus{outline:none}.product__img{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img img{object-fit:cover}.product__img--cargando:after{content:\"\";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon{background:linear-gradient(135deg,var(--brand-400, #fb9a56) 0%,var(--brand-500, #fa7319) 100%);display:flex;align-items:center;justify-content:center}.product__img--named{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon{color:color-mix(in srgb,var(--sui-static-white, #fff) 70%,transparent)}.product__band{width:100%;height:100%;background:var(--fallback-color, #999);display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#ffffffeb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--brand-500, #fa7319);text-transform:uppercase;letter-spacing:.05em}.product__tag--unavail{color:#64748b;background:#fffffff2}.product__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717));line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc{font-size:11px;color:var(--sui-text-sub-600, var(--text-sub, #5c5c5c));line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--sui-text-strong-950, var(--text-strong, #171717))}.product__add{position:relative;z-index:2;width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950, var(--text-strong, #171717));color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1)),opacity .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__add:active{transform:scale(.94)}.product__add:disabled{opacity:.4;cursor:not-allowed}.product__stepper{position:relative;z-index:2;display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950, var(--text-strong, #171717));flex-shrink:0;overflow:hidden}.product__step{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform .15s var(--sui-ease-out-strong, cubic-bezier(.16, 1, .3, 1))}.product__step:active{transform:scale(.88)}.product__step:disabled{opacity:.4;cursor:not-allowed}.product__step-qty{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);-webkit-user-select:none;user-select:none}.product__prices{flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;line-height:1.15}.product__price--oferta{white-space:nowrap;color:var(--sui-red-700, #d02533)}:host-context([data-theme=dark]) .product__price--oferta{white-space:nowrap;color:var(--sui-red-400, #ff6875)}.product__pct{padding:2px 5px;border-radius:4px;background:var(--sui-red-700, #d02533);color:var(--sui-static-white, #fff);font-size:11px;font-weight:600;line-height:12px;letter-spacing:.02em;white-space:nowrap}.product__price-was{flex-basis:100%;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap}:host([data-sui-size=medium]) .product__footer{flex-wrap:wrap;row-gap:8px}:host([data-sui-size=medium]) .product__price{white-space:nowrap}:host([data-sui-size=medium]) .product__add{width:40px;height:40px;margin-left:auto}:host([data-sui-size=medium]) .product__stepper{height:40px;border-radius:20px;margin-left:auto}:host([data-sui-size=medium]) .product__step{width:40px;height:40px}:host([data-sui-size=medium]) .product__step-qty{min-width:24px;font-size:16px}@keyframes sui-product-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.product__img--cargando:after{animation:none}}\n"] }]
|
|
16610
|
+
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: true }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], available: [{ type: i0.Input, args: [{ isSignal: true, alias: "available", required: false }] }], quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], closed: [{ type: i0.Input, args: [{ isSignal: true, alias: "closed", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], unavailableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableLabel", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], precioLista: [{ type: i0.Input, args: [{ isSignal: true, alias: "precioLista", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], openDetail: [{ type: i0.Output, args: ["openDetail"] }], add: [{ type: i0.Output, args: ["add"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }], edit: [{ type: i0.Output, args: ["edit"] }] } });
|
|
16539
16611
|
|
|
16540
16612
|
/**
|
|
16541
16613
|
* SUI Switch Card — SUI Design System 2.0
|
|
@@ -16814,7 +16886,7 @@ class SuiSwitchLabel {
|
|
|
16814
16886
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
16815
16887
|
sublabel = input(null, ...(ngDevMode ? [{ debugName: "sublabel" }] : /* istanbul ignore next */ []));
|
|
16816
16888
|
description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
16817
|
-
/** Tamaño del switch interno — lo decide el padre (componente dumb). */
|
|
16889
|
+
/** Tamaño del switch interno y del texto (large/xlarge → 16/24) — lo decide el padre (componente dumb). */
|
|
16818
16890
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
16819
16891
|
/** Badge junto al label — string shorthand ('NEW') o SuiBadgeConfig
|
|
16820
16892
|
(label + color/variant/size, tipado como sui-badge). null = sin badge. */
|
|
@@ -16918,13 +16990,13 @@ class SuiSwitchLabel {
|
|
|
16918
16990
|
this._disabledByForm.set(isDisabled);
|
|
16919
16991
|
}
|
|
16920
16992
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchLabel, isStandalone: true, selector: "sui-switch-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
|
|
16993
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSwitchLabel, isStandalone: true, selector: "sui-switch-label", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", linkClick: "linkClick" }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.data-sui-size": "size()", "attr.data-sui-flip": "flip() ? \"\" : null", "attr.data-sui-with-description": "description() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null" } }, providers: [
|
|
16922
16994
|
{
|
|
16923
16995
|
provide: NG_VALUE_ACCESSOR,
|
|
16924
16996
|
useExisting: forwardRef(() => SuiSwitchLabel),
|
|
16925
16997
|
multi: true,
|
|
16926
16998
|
},
|
|
16927
|
-
], ngImport: i0, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-switch-label__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n @if (linkCfg(); as link) {\n <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n con estilos propios) + soporte href/target/rel. -->\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n [href]=\"link.href ?? null\"\n [target]=\"link.target ?? null\"\n [rel]=\"link.rel ?? null\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link.label }}</sui-link-button>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16999
|
+
], ngImport: i0, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-switch-label__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n @if (linkCfg(); as link) {\n <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n con estilos propios) + soporte href/target/rel. -->\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n [href]=\"link.href ?? null\"\n [target]=\"link.target ?? null\"\n [rel]=\"link.rel ?? null\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link.label }}</sui-link-button>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host([data-sui-size=large]) .sui-switch-label__label,:host([data-sui-size=xlarge]) .sui-switch-label__label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-switch-label__content{padding-top:2px}\n"], dependencies: [{ kind: "component", type: SuiSwitch, selector: "sui-switch", inputs: ["size", "checked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16928
17000
|
}
|
|
16929
17001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSwitchLabel, decorators: [{
|
|
16930
17002
|
type: Component,
|
|
@@ -16935,11 +17007,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
16935
17007
|
multi: true,
|
|
16936
17008
|
},
|
|
16937
17009
|
], host: {
|
|
17010
|
+
/* Driver del texto por tamaño en el SCSS (regla del 03-10-2026). */
|
|
17011
|
+
'[attr.data-sui-size]': 'size()',
|
|
16938
17012
|
'[attr.data-sui-flip]': 'flip() ? "" : null',
|
|
16939
17013
|
'[attr.data-sui-with-description]': 'description() ? "" : null',
|
|
16940
17014
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
16941
17015
|
'(click)': 'onLabelClick($event)',
|
|
16942
|
-
}, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-switch-label__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n @if (linkCfg(); as link) {\n <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n con estilos propios) + soporte href/target/rel. -->\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n [href]=\"link.href ?? null\"\n [target]=\"link.target ?? null\"\n [rel]=\"link.rel ?? null\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link.label }}</sui-link-button>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}\n"] }]
|
|
17016
|
+
}, template: "<sui-switch\n class=\"sui-switch-label__switch\"\n [size]=\"size()\"\n [checked]=\"effectiveActive()\"\n [disabled]=\"isDisabled()\"\n (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n <div class=\"sui-switch-label__title\">\n <span class=\"sui-switch-label__label\">{{ label() }}</span>\n @if (sublabel(); as sl) {\n <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n }\n @if (badgeCfg(); as bcfg) {\n <sui-badge\n class=\"sui-switch-label__badge\"\n [color]=\"bcfg.color ?? 'orange'\"\n [variant]=\"bcfg.variant ?? 'light'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n }\n </div>\n\n @if (description(); as desc) {\n <p class=\"sui-switch-label__description\">{{ desc }}</p>\n\n @if (linkCfg(); as link) {\n <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n con estilos propios) + soporte href/target/rel. -->\n <sui-link-button\n variant=\"primary\"\n size=\"small\"\n [disabled]=\"isDisabled()\"\n [href]=\"link.href ?? null\"\n [target]=\"link.target ?? null\"\n [rel]=\"link.rel ?? null\"\n (clicked)=\"onLinkClick($event)\"\n >{{ link.label }}</sui-link-button>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host([data-sui-size=large]) .sui-switch-label__label,:host([data-sui-size=xlarge]) .sui-switch-label__label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-switch-label__content{padding-top:2px}\n"] }]
|
|
16943
17017
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
|
|
16944
17018
|
|
|
16945
17019
|
/**
|
|
@@ -16961,7 +17035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
16961
17035
|
* />
|
|
16962
17036
|
*
|
|
16963
17037
|
* Tamaños (extensión SUI, 03-10-2026): small 32 · medium 36 (default) ·
|
|
16964
|
-
* large 40.
|
|
17038
|
+
* large 40. small y medium con texto label-sm 14; large en label-md 16/24 (regla
|
|
17039
|
+
* del 03-10-2026). Cambia el alto y el aire lateral.
|
|
16965
17040
|
*
|
|
16966
17041
|
* También acepta objetos:
|
|
16967
17042
|
* <sui-tab-chips
|
|
@@ -17033,7 +17108,7 @@ class SuiTabChips {
|
|
|
17033
17108
|
nav.scrollTo({ left: Math.max(0, offset), behavior: 'smooth' });
|
|
17034
17109
|
}
|
|
17035
17110
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17036
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()", "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;line-height:var(--sui-type-label-
|
|
17111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()", "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17037
17112
|
}
|
|
17038
17113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, decorators: [{
|
|
17039
17114
|
type: Component,
|
|
@@ -17043,7 +17118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
17043
17118
|
(que mide ~50px → el sticky no se enganchaba). Gate por clase de host. */
|
|
17044
17119
|
'[class.sui-tab-chips--host-sticky]': 'sticky()',
|
|
17045
17120
|
'[attr.data-sui-size]': 'size()',
|
|
17046
|
-
}, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;line-height:var(--sui-type-label-
|
|
17121
|
+
}, template: "@if (sticky()) {\n <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n #nav\n class=\"sui-tab-chips\"\n [class.sui-tab-chips--sticky]=\"sticky()\"\n [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n role=\"tablist\"\n>\n @for (chip of normalizedChips(); track chip.value) {\n <button\n type=\"button\"\n class=\"sui-tab-chips__chip\"\n [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n [attr.data-sui-chip-value]=\"chip.value\"\n [attr.aria-selected]=\"value() === chip.value\"\n [attr.tabindex]=\"value() === chip.value ? 0 : -1\"\n role=\"tab\"\n (click)=\"select(chip.value)\"\n >\n <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n @if (chip.count) {\n <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n }\n </button>\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
|
|
17047
17122
|
}], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], sentinelRef: [{
|
|
17048
17123
|
type: ViewChild,
|
|
17049
17124
|
args: ['sentinel']
|
|
@@ -17503,9 +17578,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
17503
17578
|
* radius-full, overflow-clip, icon arrow-right-s-line 18px, SIN shadow
|
|
17504
17579
|
*
|
|
17505
17580
|
* PENDING VERIFY:
|
|
17506
|
-
* - `size`: el Tab Menu Horizontal de Figma no expone eje size.
|
|
17507
|
-
*
|
|
17508
|
-
*
|
|
17581
|
+
* - `size`: el Tab Menu Horizontal de Figma no expone eje size. Extensión SUI
|
|
17582
|
+
* (03-10-2026): small 40 · medium 48 (Figma) · large 52 · xlarge 56 de
|
|
17583
|
+
* franja tocable; large/xlarge con texto 16 (mobile).
|
|
17509
17584
|
* - `disabled` por ítem es extensión SUI (Figma no muestra estado Disabled).
|
|
17510
17585
|
*
|
|
17511
17586
|
* Historia: hasta la v0.2.x este componente vivía como `<sui-tabs variant="line">`;
|
|
@@ -17517,9 +17592,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
17517
17592
|
class SuiTabMenuHorizontal {
|
|
17518
17593
|
tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
17519
17594
|
active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
|
|
17520
|
-
/**
|
|
17521
|
-
|
|
17595
|
+
/** Alto de la franja tocable (cada pestaña ocupa todo el alto) — extensión
|
|
17596
|
+
SUI (03-10-2026): small 40 · medium 48 (Figma, default) · large 52 ·
|
|
17597
|
+
xlarge 56. large y xlarge llevan el texto a 16 (mobile). */
|
|
17522
17598
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
17599
|
+
/** Glyph del ícono de la pestaña: 24 en xlarge, 20 en el resto. */
|
|
17600
|
+
iconSize = computed(() => (this.size() === 'xlarge' ? 24 : 20), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
17523
17601
|
tabChange = output();
|
|
17524
17602
|
isActive(tab) {
|
|
17525
17603
|
return this.active() === tab.value;
|
|
@@ -17531,13 +17609,13 @@ class SuiTabMenuHorizontal {
|
|
|
17531
17609
|
this.tabChange.emit(tab.value);
|
|
17532
17610
|
}
|
|
17533
17611
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuHorizontal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17534
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabMenuHorizontal, isStandalone: true, selector: "sui-tab-menu-horizontal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, ngImport: i0, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n @for (tab of tabs(); track tab.value) {\n <button\n type=\"button\"\n class=\"sui-tab-menu-horizontal__item\"\n [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"
|
|
17612
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabMenuHorizontal, isStandalone: true, selector: "sui-tab-menu-horizontal", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, ngImport: i0, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n @for (tab of tabs(); track tab.value) {\n <button\n type=\"button\"\n class=\"sui-tab-menu-horizontal__item\"\n [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"iconSize()\" />\n }\n <span class=\"sui-tab-menu-horizontal__text\">\n <span class=\"sui-tab-menu-horizontal__label\">{{ tab.label }}</span>\n @if (tab.number) {\n <span class=\"sui-tab-menu-horizontal__badge\">{{ tab.number }}</span>\n }\n </span>\n @if (tab.rightIcon) {\n <span class=\"sui-tab-menu-horizontal__chevron\">\n <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n </span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-horizontal__track{display:flex;align-items:flex-start;gap:24px;padding:0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tab-menu-horizontal__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-horizontal__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__leading{flex-shrink:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item--active{color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item--active .sui-tab-menu-horizontal__leading{color:var(--sui-icon-strong-950)}.sui-tab-menu-horizontal__item--active:after{background:var(--sui-primary-base)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active){color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__leading{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__chevron{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-size=small]) .sui-tab-menu-horizontal__track{gap:20px}:host([data-sui-size=small]) .sui-tab-menu-horizontal__item{padding:10px 0}:host([data-sui-size=large]) .sui-tab-menu-horizontal__item,:host([data-sui-size=xlarge]) .sui-tab-menu-horizontal__item{font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large]) .sui-tab-menu-horizontal__item{padding:14px 0}:host([data-sui-size=xlarge]) .sui-tab-menu-horizontal__track{gap:28px}:host([data-sui-size=xlarge]) .sui-tab-menu-horizontal__item{padding:16px 0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17535
17613
|
}
|
|
17536
17614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuHorizontal, decorators: [{
|
|
17537
17615
|
type: Component,
|
|
17538
17616
|
args: [{ selector: 'sui-tab-menu-horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
|
|
17539
17617
|
'[attr.data-sui-size]': 'size()',
|
|
17540
|
-
}, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n @for (tab of tabs(); track tab.value) {\n <button\n type=\"button\"\n class=\"sui-tab-menu-horizontal__item\"\n [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"
|
|
17618
|
+
}, template: "<!-- Tab Menu Horizontal \u2014 pesta\u00F1as con subrayado (Figma 3511:9958) -->\n<div class=\"sui-tab-menu-horizontal__track\" role=\"tablist\">\n @for (tab of tabs(); track tab.value) {\n <button\n type=\"button\"\n class=\"sui-tab-menu-horizontal__item\"\n [class.sui-tab-menu-horizontal__item--active]=\"isActive(tab)\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon class=\"sui-tab-menu-horizontal__leading\" [name]=\"tab.icon\" [size]=\"iconSize()\" />\n }\n <span class=\"sui-tab-menu-horizontal__text\">\n <span class=\"sui-tab-menu-horizontal__label\">{{ tab.label }}</span>\n @if (tab.number) {\n <span class=\"sui-tab-menu-horizontal__badge\">{{ tab.number }}</span>\n }\n </span>\n @if (tab.rightIcon) {\n <span class=\"sui-tab-menu-horizontal__chevron\">\n <sui-icon name=\"arrow-right-s-line\" [size]=\"18\" />\n </span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-tab-menu-horizontal__track{display:flex;align-items:flex-start;gap:24px;padding:0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tab-menu-horizontal__badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-horizontal__item{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__leading{flex-shrink:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__text{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tab-menu-horizontal__item .sui-tab-menu-horizontal__chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item--active{color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item--active .sui-tab-menu-horizontal__leading{color:var(--sui-icon-strong-950)}.sui-tab-menu-horizontal__item--active:after{background:var(--sui-primary-base)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active){color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__leading{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__chevron{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item:disabled{cursor:not-allowed;opacity:.4}:host([data-sui-size=small]) .sui-tab-menu-horizontal__track{gap:20px}:host([data-sui-size=small]) .sui-tab-menu-horizontal__item{padding:10px 0}:host([data-sui-size=large]) .sui-tab-menu-horizontal__item,:host([data-sui-size=xlarge]) .sui-tab-menu-horizontal__item{font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}:host([data-sui-size=large]) .sui-tab-menu-horizontal__item{padding:14px 0}:host([data-sui-size=xlarge]) .sui-tab-menu-horizontal__track{gap:28px}:host([data-sui-size=xlarge]) .sui-tab-menu-horizontal__item{padding:16px 0}\n"] }]
|
|
17541
17619
|
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
|
|
17542
17620
|
|
|
17543
17621
|
/**
|
|
@@ -17705,13 +17783,13 @@ class SuiSegmentedControl {
|
|
|
17705
17783
|
this.tabChange.emit(tab.value);
|
|
17706
17784
|
}
|
|
17707
17785
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSegmentedControl, isStandalone: true, selector: "sui-segmented-control", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n <div\n class=\"sui-segmented-control__indicator\"\n [style.transform]=\"indicatorStyle().transform\"\n [style.width]=\"indicatorStyle().width\"\n ></div>\n @for (tab of tabs(); track tab.value) {\n <button\n #segmentItem\n type=\"button\"\n class=\"sui-segmented-control__item\"\n [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n }\n @if (!tab.iconOnly) {\n <span>{{ tab.label }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item
|
|
17786
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSegmentedControl, isStandalone: true, selector: "sui-segmented-control", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", tabChange: "tabChange" }, host: { properties: { "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "segmentTrack", first: true, predicate: ["segmentTrack"], descendants: true }, { propertyName: "segmentItems", predicate: ["segmentItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n <div\n class=\"sui-segmented-control__indicator\"\n [style.transform]=\"indicatorStyle().transform\"\n [style.width]=\"indicatorStyle().width\"\n ></div>\n @for (tab of tabs(); track tab.value) {\n <button\n #segmentItem\n type=\"button\"\n class=\"sui-segmented-control__item\"\n [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n }\n @if (!tab.iconOnly) {\n <span>{{ tab.label }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item,:host([data-sui-size=xlarge]) .sui-segmented-control__item{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:4px}:host([data-sui-size=large]) .sui-segmented-control__item--icon-only{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17709
17787
|
}
|
|
17710
17788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSegmentedControl, decorators: [{
|
|
17711
17789
|
type: Component,
|
|
17712
17790
|
args: [{ selector: 'sui-segmented-control', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
|
|
17713
17791
|
'[attr.data-sui-size]': 'size()',
|
|
17714
|
-
}, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n <div\n class=\"sui-segmented-control__indicator\"\n [style.transform]=\"indicatorStyle().transform\"\n [style.width]=\"indicatorStyle().width\"\n ></div>\n @for (tab of tabs(); track tab.value) {\n <button\n #segmentItem\n type=\"button\"\n class=\"sui-segmented-control__item\"\n [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n }\n @if (!tab.iconOnly) {\n <span>{{ tab.label }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item
|
|
17792
|
+
}, template: "<!-- Segmented Control \u2014 pill iOS con indicador animado (Figma 2604:114) -->\n<div #segmentTrack class=\"sui-segmented-control__track\" role=\"tablist\">\n <div\n class=\"sui-segmented-control__indicator\"\n [style.transform]=\"indicatorStyle().transform\"\n [style.width]=\"indicatorStyle().width\"\n ></div>\n @for (tab of tabs(); track tab.value) {\n <button\n #segmentItem\n type=\"button\"\n class=\"sui-segmented-control__item\"\n [class.sui-segmented-control__item--active]=\"isActive(tab)\"\n [class.sui-segmented-control__item--icon-only]=\"tab.iconOnly && tab.icon\"\n [disabled]=\"tab.disabled\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled ? true : null\"\n [attr.aria-label]=\"tab.iconOnly && tab.icon ? tab.label : null\"\n role=\"tab\"\n (click)=\"select(tab)\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n @if (tab.icon) {\n <sui-icon [name]=\"tab.icon\" [size]=\"20\" />\n }\n @if (!tab.iconOnly) {\n <span>{{ tab.label }}</span>\n }\n </button>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.sui-segmented-control__track{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-segmented-control__indicator{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px #0e121b0f,0 2px 4px #0e121b08;transition:transform var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1),width var(--sui-motion-duration-fast) cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:0}.sui-segmented-control__item{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto;color:var(--sui-text-soft-400);text-align:center;white-space:nowrap}.sui-segmented-control__item--icon-only{gap:0}.sui-segmented-control__item--active{color:var(--sui-text-strong-950)}.sui-segmented-control__item:hover:not(:disabled):not(.sui-segmented-control__item--active){color:var(--sui-text-sub-600)}.sui-segmented-control__item:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}:host([data-sui-size=small]) .sui-segmented-control__item{font-size:var(--sui-type-label-xs-size)}:host([data-sui-size=large]) .sui-segmented-control__item,:host([data-sui-size=xlarge]) .sui-segmented-control__item{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=large]) .sui-segmented-control__item{padding:4px}:host([data-sui-size=large]) .sui-segmented-control__item--icon-only{padding:6px}:host([data-sui-size=xlarge]) .sui-segmented-control__item{padding:8px}\n"] }]
|
|
17715
17793
|
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }, { type: i0.Output, args: ["activeChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], segmentItems: [{
|
|
17716
17794
|
type: ViewChildren,
|
|
17717
17795
|
args: ['segmentItem', { read: ElementRef }]
|
|
@@ -18138,7 +18216,7 @@ class SuiTagInput {
|
|
|
18138
18216
|
useExisting: forwardRef(() => SuiTagInput),
|
|
18139
18217
|
multi: true,
|
|
18140
18218
|
},
|
|
18141
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-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-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);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)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{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)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiTag, selector: "sui-tag", inputs: ["tagStyle", "size", "leading", "sublabel", "dismissible", "interactive", "disabled", "dismissLabel"], outputs: ["dismiss"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18219
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-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-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}:host([data-sui-size=large]) .sui-tag-input__control,:host([data-sui-size=xlarge]) .sui-tag-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);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)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{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)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"], dependencies: [{ kind: "component", type: SuiTag, selector: "sui-tag", inputs: ["tagStyle", "size", "leading", "sublabel", "dismissible", "interactive", "disabled", "dismissLabel"], outputs: ["dismiss"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18142
18220
|
}
|
|
18143
18221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTagInput, decorators: [{
|
|
18144
18222
|
type: Component,
|
|
@@ -18154,7 +18232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18154
18232
|
'[attr.data-sui-size]': 'size()',
|
|
18155
18233
|
'[attr.data-sui-error]': 'error() ? "" : null',
|
|
18156
18234
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
18157
|
-
}, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-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-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);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)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{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)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
18235
|
+
}, template: "<!-- Label (Figma \"Label [1.1]\" arriba del field) \u2014 delegado a sui-form-label. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-tag-input__label-host\"\n />\n}\n\n<!-- Input box \"Basic\" \u2014 texto libre. Click en cualquier zona enfoca el input. -->\n<div\n class=\"sui-tag-input__field\"\n [class.sui-tag-input__field--error]=\"error()\"\n [class.sui-tag-input__field--disabled]=\"isDisabled()\"\n (mousedown)=\"onFieldPointerDown($event)\"\n>\n <input\n #inputEl\n class=\"sui-tag-input__control\"\n type=\"text\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"draft()\"\n autocomplete=\"off\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Trailing icon (Figma rightIcon / pickRight, node 428:4819) \u2014 20\u00D720 info-custom-fill\n (rightIcon=true), un icono custom (rightIcon=\"nombre\"), o el contenido que\n proyecte el consumer en [slot=right]. -->\n @if (rightIconCfg(); as rightIconName) {\n <span class=\"sui-tag-input__right\">\n <ng-content select=\"[slot=right]\">\n <sui-icon [name]=\"rightIconName\" [size]=\"20\" />\n </ng-content>\n </span>\n }\n</div>\n\n<!-- Tags row (Figma frame \"Tags\") \u2014 fila aparte debajo del input, pt=4 gap=8, wrap. -->\n@if (hasTags()) {\n <div class=\"sui-tag-input__tags\" role=\"list\">\n @for (tag of value(); track $index) {\n <sui-tag\n role=\"listitem\"\n tagStyle=\"stroke\"\n [dismissible]=\"true\"\n [disabled]=\"isDisabled()\"\n [dismissLabel]=\"'Quitar ' + tag\"\n (dismiss)=\"removeAt($index)\"\n >\n {{ tag }}\n </sui-tag>\n }\n </div>\n}\n\n<!-- Hint / error message \u2014 delegado a sui-form-hint.\n El hint neutral muestra el icono 16\u00D716 `information-fill` (Figma node\n I428:4900;266:5272); el error conserva su icono default (error-warning-line). -->\n@if (error() ? errorMessage() : hint()) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"error() ? undefined : 'information-fill'\"\n class=\"sui-tag-input__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host{display:block;margin-bottom:4px}.sui-tag-input__field{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),background-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-tag-input__field{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}:host([data-sui-size=small]) .sui-tag-input__field{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}:host([data-sui-size=medium]) .sui-tag-input__field,:host(:not([data-sui-size])) .sui-tag-input__field{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}:host([data-sui-size=large]) .sui-tag-input__field{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}:host([data-sui-size=xlarge]) .sui-tag-input__field{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-tag-input__control{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;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);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}@media(max-width:767px){.sui-tag-input__control{font-size:16px}}:host([data-sui-size=large]) .sui-tag-input__control,:host([data-sui-size=xlarge]) .sui-tag-input__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}.sui-tag-input__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}:host([data-sui-disabled]) .sui-tag-input__right{color:var(--sui-icon-disabled-300)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:hover .sui-tag-input__control::placeholder{color:var(--sui-text-sub-600)}:host(:not([data-sui-disabled]):not([data-sui-error])) .sui-tag-input__field:focus-within{background:var(--sui-bg-white-0);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)}:host([data-sui-error]) .sui-tag-input__field,.sui-tag-input__field--error{border-color:var(--sui-state-error-base)}:host([data-sui-error]) .sui-tag-input__field:focus-within{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)}:host([data-sui-disabled]) .sui-tag-input__field,.sui-tag-input__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control{color:var(--sui-text-disabled-300);cursor:not-allowed}:host([data-sui-disabled]) .sui-tag-input__control::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host{display:block;margin-top:4px}\n"] }]
|
|
18158
18236
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], commaSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "commaSeparator", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], maxTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTags", required: false }] }], addOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOnBlur", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], tagAdded: [{ type: i0.Output, args: ["tagAdded"] }], tagRemoved: [{ type: i0.Output, args: ["tagRemoved"] }], inputEl: [{
|
|
18159
18237
|
type: ViewChild,
|
|
18160
18238
|
args: ['inputEl']
|
|
@@ -18241,6 +18319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18241
18319
|
* convention, bump it then — flagged here so it isn't silently changed.
|
|
18242
18320
|
*
|
|
18243
18321
|
* @input rows: number — Filas iniciales del textarea (default 4)
|
|
18322
|
+
* @input size: SuiTextareaSize — padding/radio, mismos nombres que sui-input (default medium)
|
|
18244
18323
|
* @input label: string | null — Texto del label
|
|
18245
18324
|
* @input sublabel: string | null — Texto secundario del label (ej. "Optional")
|
|
18246
18325
|
* @input required: boolean — Muestra asterisco rojo en el label
|
|
@@ -18257,6 +18336,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18257
18336
|
*/
|
|
18258
18337
|
class SuiTextarea {
|
|
18259
18338
|
rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
18339
|
+
/**
|
|
18340
|
+
* Padding y radio del campo, con los mismos nombres que `sui-input`:
|
|
18341
|
+
* medium (default, el de la guía) 10/12 · large 12/14 · xlarge 14/16 ·
|
|
18342
|
+
* small 8/10 · xsmall 6/8. Extensión SUI (03-10-2026).
|
|
18343
|
+
*/
|
|
18344
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
18260
18345
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
18261
18346
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
18262
18347
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
@@ -18334,13 +18419,13 @@ class SuiTextarea {
|
|
|
18334
18419
|
this._disabledByForm.set(isDisabled);
|
|
18335
18420
|
}
|
|
18336
18421
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18337
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTextarea, isStandalone: true, selector: "sui-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-resizable": "resizable() ? \"\" : null" } }, providers: [
|
|
18422
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTextarea, isStandalone: true, selector: "sui-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.data-sui-error": "error() ? \"\" : null", "attr.data-sui-disabled": "isDisabled() ? \"\" : null", "attr.data-sui-readonly": "readonly() ? \"\" : null", "attr.data-sui-resizable": "resizable() ? \"\" : null", "attr.data-sui-size": "size()" } }, providers: [
|
|
18338
18423
|
{
|
|
18339
18424
|
provide: NG_VALUE_ACCESSOR,
|
|
18340
18425
|
useExisting: forwardRef(() => SuiTextarea),
|
|
18341
18426
|
multi: true,
|
|
18342
18427
|
},
|
|
18343
|
-
], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n size=\"medium\"\n class=\"sui-textarea__label-host\"\n />\n}\n\n<div\n class=\"sui-textarea__field\"\n [class.sui-textarea__field--error]=\"error()\"\n [class.sui-textarea__field--disabled]=\"isDisabled()\"\n [class.sui-textarea__field--readonly]=\"readonly()\"\n>\n <textarea\n class=\"sui-textarea__control\"\n [rows]=\"rows()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxLength() && maxLength()! > 0 ? maxLength() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n ></textarea>\n\n @if (showCounter() || resizable()) {\n <!-- Character Counter row [1.1] \u2014 Figma 435:5712.\n In Figma the \"<n>/<max>\" text and the resize handle live together in a\n single bottom row (flex, gap 6px, justify-end). The text only renders\n when [maxLength] is set; the handle renders whenever the textarea is\n resizable \u2014 independent of maxLength (matches Figma, where every state\n shows the handle in the bottom-right corner while resizable). -->\n <div class=\"sui-textarea__counter\" aria-hidden=\"true\">\n @if (showCounter()) {\n <span class=\"sui-textarea__counter-text\">{{ counterText() }}</span>\n }\n @if (resizable()) {\n <!-- Resize handle \u2014 Figma 435:5715 (12\u00D712, currentColor).\n Two diagonal strokes \u2014 SUI v1.2 oficial (doc /ui/textarea + Figma\n 435:5715, mismo path en Default/Error/Disabled, solo cambia el stroke\n color). El \"M ... M ...\" son las 2 diagonales. -->\n <svg\n class=\"sui-textarea__resize-icon\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.11111 2L2 9.11111M10 6.44444L6.44444 10\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <!-- Hint Text [1.1] \u2014 Figma 435:5731 (neutral) / 435:7200 (error).\n Ambos estados usan `information-fill` 16\u00D716 como \u00EDcono del hint\n (nodos I435:5731;266:5272 y I435:7200;266:5286 \u2014 verificado MCP).\n El override [icon] fuerza information-fill en los dos casos: neutral\n (que por default no tiene \u00EDcono) y error (que por default resuelve a\n error-warning-line). El color sigue del variant (sub-600 / error-base). -->\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"'information-fill'\"\n class=\"sui-textarea__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host{display:block;margin-bottom:4px}.sui-textarea__field{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),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)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);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-textarea__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}.sui-textarea__control{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);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);-webkit-appearance:none;appearance:none}:host([data-sui-resizable]) .sui-textarea__control{resize:vertical}:host(:not([data-sui-resizable])) .sui-textarea__control{resize:none}.sui-textarea__control::-webkit-resizer{display:none}.sui-textarea__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly]{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control:focus{outline:none}.sui-textarea__counter{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error .sui-textarea__counter{color:var(--sui-state-error-base)}.sui-textarea__field--disabled .sui-textarea__counter{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18428
|
+
], ngImport: i0, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n size=\"medium\"\n class=\"sui-textarea__label-host\"\n />\n}\n\n<div\n class=\"sui-textarea__field\"\n [class.sui-textarea__field--error]=\"error()\"\n [class.sui-textarea__field--disabled]=\"isDisabled()\"\n [class.sui-textarea__field--readonly]=\"readonly()\"\n>\n <textarea\n class=\"sui-textarea__control\"\n [rows]=\"rows()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxLength() && maxLength()! > 0 ? maxLength() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n ></textarea>\n\n @if (showCounter() || resizable()) {\n <!-- Character Counter row [1.1] \u2014 Figma 435:5712.\n In Figma the \"<n>/<max>\" text and the resize handle live together in a\n single bottom row (flex, gap 6px, justify-end). The text only renders\n when [maxLength] is set; the handle renders whenever the textarea is\n resizable \u2014 independent of maxLength (matches Figma, where every state\n shows the handle in the bottom-right corner while resizable). -->\n <div class=\"sui-textarea__counter\" aria-hidden=\"true\">\n @if (showCounter()) {\n <span class=\"sui-textarea__counter-text\">{{ counterText() }}</span>\n }\n @if (resizable()) {\n <!-- Resize handle \u2014 Figma 435:5715 (12\u00D712, currentColor).\n Two diagonal strokes \u2014 SUI v1.2 oficial (doc /ui/textarea + Figma\n 435:5715, mismo path en Default/Error/Disabled, solo cambia el stroke\n color). El \"M ... M ...\" son las 2 diagonales. -->\n <svg\n class=\"sui-textarea__resize-icon\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.11111 2L2 9.11111M10 6.44444L6.44444 10\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <!-- Hint Text [1.1] \u2014 Figma 435:5731 (neutral) / 435:7200 (error).\n Ambos estados usan `information-fill` 16\u00D716 como \u00EDcono del hint\n (nodos I435:5731;266:5272 y I435:7200;266:5286 \u2014 verificado MCP).\n El override [icon] fuerza information-fill en los dos casos: neutral\n (que por default no tiene \u00EDcono) y error (que por default resuelve a\n error-warning-line). El color sigue del variant (sub-600 / error-base). -->\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"'information-fill'\"\n class=\"sui-textarea__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host{display:block;margin-bottom:4px}.sui-textarea__field{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),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)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);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-textarea__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=xsmall]) .sui-textarea__field{padding:6px 6px 6px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-textarea__field{padding:8px 8px 8px 10px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-textarea__field{padding:12px 12px 12px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-textarea__field{padding:14px 14px 14px 16px;border-radius:var(--sui-radius-12)}.sui-textarea__control{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);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);-webkit-appearance:none;appearance:none}@media(max-width:767px){.sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}}:host([data-sui-size=large]) .sui-textarea__control,:host([data-sui-size=xlarge]) .sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-resizable]) .sui-textarea__control{resize:vertical}:host(:not([data-sui-resizable])) .sui-textarea__control{resize:none}.sui-textarea__control::-webkit-resizer{display:none}.sui-textarea__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly]{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control:focus{outline:none}.sui-textarea__counter{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error .sui-textarea__counter{color:var(--sui-state-error-base)}.sui-textarea__field--disabled .sui-textarea__counter{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
18344
18429
|
}
|
|
18345
18430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTextarea, decorators: [{
|
|
18346
18431
|
type: Component,
|
|
@@ -18355,8 +18440,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18355
18440
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
18356
18441
|
'[attr.data-sui-readonly]': 'readonly() ? "" : null',
|
|
18357
18442
|
'[attr.data-sui-resizable]': 'resizable() ? "" : null',
|
|
18358
|
-
|
|
18359
|
-
|
|
18443
|
+
'[attr.data-sui-size]': 'size()',
|
|
18444
|
+
}, template: "@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n size=\"medium\"\n class=\"sui-textarea__label-host\"\n />\n}\n\n<div\n class=\"sui-textarea__field\"\n [class.sui-textarea__field--error]=\"error()\"\n [class.sui-textarea__field--disabled]=\"isDisabled()\"\n [class.sui-textarea__field--readonly]=\"readonly()\"\n>\n <textarea\n class=\"sui-textarea__control\"\n [rows]=\"rows()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxLength() && maxLength()! > 0 ? maxLength() : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n ></textarea>\n\n @if (showCounter() || resizable()) {\n <!-- Character Counter row [1.1] \u2014 Figma 435:5712.\n In Figma the \"<n>/<max>\" text and the resize handle live together in a\n single bottom row (flex, gap 6px, justify-end). The text only renders\n when [maxLength] is set; the handle renders whenever the textarea is\n resizable \u2014 independent of maxLength (matches Figma, where every state\n shows the handle in the bottom-right corner while resizable). -->\n <div class=\"sui-textarea__counter\" aria-hidden=\"true\">\n @if (showCounter()) {\n <span class=\"sui-textarea__counter-text\">{{ counterText() }}</span>\n }\n @if (resizable()) {\n <!-- Resize handle \u2014 Figma 435:5715 (12\u00D712, currentColor).\n Two diagonal strokes \u2014 SUI v1.2 oficial (doc /ui/textarea + Figma\n 435:5715, mismo path en Default/Error/Disabled, solo cambia el stroke\n color). El \"M ... M ...\" son las 2 diagonales. -->\n <svg\n class=\"sui-textarea__resize-icon\"\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.11111 2L2 9.11111M10 6.44444L6.44444 10\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n }\n</div>\n\n@if (error() ? errorMessage() : hint()) {\n <!-- Hint Text [1.1] \u2014 Figma 435:5731 (neutral) / 435:7200 (error).\n Ambos estados usan `information-fill` 16\u00D716 como \u00EDcono del hint\n (nodos I435:5731;266:5272 y I435:7200;266:5286 \u2014 verificado MCP).\n El override [icon] fuerza information-fill en los dos casos: neutral\n (que por default no tiene \u00EDcono) y error (que por default resuelve a\n error-warning-line). El color sigue del variant (sub-600 / error-base). -->\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n [icon]=\"'information-fill'\"\n class=\"sui-textarea__hint-host\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host{display:block;margin-bottom:4px}.sui-textarea__field{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out),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)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);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-textarea__field--error{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}:host([data-sui-size=xsmall]) .sui-textarea__field{padding:6px 6px 6px 8px;border-radius:var(--sui-radius-8)}:host([data-sui-size=small]) .sui-textarea__field{padding:8px 8px 8px 10px;border-radius:var(--sui-radius-10)}:host([data-sui-size=large]) .sui-textarea__field{padding:12px 12px 12px 14px;border-radius:var(--sui-radius-12)}:host([data-sui-size=xlarge]) .sui-textarea__field{padding:14px 14px 14px 16px;border-radius:var(--sui-radius-12)}.sui-textarea__control{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);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);-webkit-appearance:none;appearance:none}@media(max-width:767px){.sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}}:host([data-sui-size=large]) .sui-textarea__control,:host([data-sui-size=xlarge]) .sui-textarea__control{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-resizable]) .sui-textarea__control{resize:vertical}:host(:not([data-sui-resizable])) .sui-textarea__control{resize:none}.sui-textarea__control::-webkit-resizer{display:none}.sui-textarea__control::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly]{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control:focus{outline:none}.sui-textarea__counter{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error .sui-textarea__counter{color:var(--sui-state-error-base)}.sui-textarea__field--disabled .sui-textarea__counter{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__hint-host{display:block;margin-top:4px}\n"] }]
|
|
18445
|
+
}], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", 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"] }] } });
|
|
18360
18446
|
|
|
18361
18447
|
/**
|
|
18362
18448
|
* SUI Time Picker Duration — SUI Design System 2.0
|
|
@@ -18507,12 +18593,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18507
18593
|
}, template: "<!--\n TimePickerItems \u2014 Figma 165483:5687.\n Direction=Right: [Left] [Right?] [Check?]\n Direction=Center: [Left] [Check?] [Right?]\n En Right (sin rightText) el check queda al final tras el Left group.\n-->\n<span class=\"sui-time-picker-item__left\">\n <span class=\"sui-time-picker-item__time\">{{ time() }}</span>\n @if (meridiem()) {\n <span class=\"sui-time-picker-item__meridiem\">{{ meridiem() }}</span>\n }\n</span>\n\n@if (direction() === 'center' && active()) {\n <sui-icon class=\"sui-time-picker-item__check\" name=\"checkbox-circle-fill\" [size]=\"14\" />\n}\n\n@if (hasRight()) {\n <span class=\"sui-time-picker-item__right\">\n <span class=\"sui-time-picker-item__time\">{{ rightTime() }}</span>\n @if (rightMeridiem()) {\n <span class=\"sui-time-picker-item__meridiem\">{{ rightMeridiem() }}</span>\n }\n </span>\n}\n\n@if (direction() === 'right' && active()) {\n <sui-icon class=\"sui-time-picker-item__check\" name=\"checkbox-circle-fill\" [size]=\"14\" />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;height:36px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);background:var(--sui-bg-white-0, #fff);overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}:host(:hover),:host([data-sui-highlighted]){background:var(--sui-bg-weak-50, #f7f7f7)}:host(:focus-visible){background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]){background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-disabled]){background:var(--sui-bg-white-0, #fff);cursor:not-allowed;pointer-events:none}.sui-time-picker-item__left,.sui-time-picker-item__right{display:flex;flex:1 1 0;min-width:0;align-items:center;gap:3px}.sui-time-picker-item__right{justify-content:flex-end}.sui-time-picker-item__time,.sui-time-picker-item__meridiem{flex-shrink:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker-item__time{color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker-item__meridiem{color:var(--sui-text-soft-400, #a3a3a3)}:host([data-sui-active]) .sui-time-picker-item__time{color:var(--sui-text-strong-950, #171717)}:host([data-sui-disabled]) .sui-time-picker-item__time,:host([data-sui-disabled]) .sui-time-picker-item__meridiem{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-time-picker-item__check{flex-shrink:0;display:inline-flex;color:var(--sui-primary-base, #fa7319)}\n"] }]
|
|
18508
18594
|
}], propDecorators: { time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: true }] }], meridiem: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridiem", required: false }] }], rightTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTime", required: false }] }], rightMeridiem: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightMeridiem", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
18509
18595
|
|
|
18510
|
-
/** Texto por defecto de cada type (
|
|
18596
|
+
/** Texto por defecto de cada type, en español (03-10-2026; el Figma trae
|
|
18597
|
+
* Available / Busy / In-meeting / Offline). */
|
|
18511
18598
|
const STATUS_LABELS = {
|
|
18512
|
-
available: '
|
|
18513
|
-
busy: '
|
|
18514
|
-
'in-meeting': '
|
|
18515
|
-
offline: '
|
|
18599
|
+
available: 'Disponible',
|
|
18600
|
+
busy: 'Ocupado',
|
|
18601
|
+
'in-meeting': 'En reunión',
|
|
18602
|
+
offline: 'Desconectado',
|
|
18516
18603
|
};
|
|
18517
18604
|
/**
|
|
18518
18605
|
* SUI Time Picker Select Status — SUI Design System 2.0
|
|
@@ -18710,57 +18797,6 @@ const DEFAULT_DURATION_PRESETS = [
|
|
|
18710
18797
|
{ label: '1 h', minutes: 60 },
|
|
18711
18798
|
];
|
|
18712
18799
|
|
|
18713
|
-
/**
|
|
18714
|
-
* SUI Time Picker — SUI Design System 2.0
|
|
18715
|
-
*
|
|
18716
|
-
* Figma file: 8p1k72aKKvzJV4XcvPS4VO
|
|
18717
|
-
* Nodos VERIFIED via MCP get_design_context:
|
|
18718
|
-
* - 165483:5687 TimePickerItems (fila de lista — sub-componente)
|
|
18719
|
-
* - 165483:6046 TimePickerSelectDuration (pill de duración — sub-componente)
|
|
18720
|
-
* - 165596:41348 TimePickerSelectStatus (pill de estado — sub-componente)
|
|
18721
|
-
* El nodo 165596:41348 SÍ pertenece a este set (TimePickerSelectStatus): es un
|
|
18722
|
-
* pill de disponibilidad standalone (Available/Busy/In-meeting/Offline × 4
|
|
18723
|
-
* estados = 16 variantes). Vive en sui-time-picker-status.* — un comentario
|
|
18724
|
-
* anterior lo daba erróneamente por "no relacionado". El panel contenedor no
|
|
18725
|
-
* tiene nodo dedicado en Figma; se compone aquí a partir de los sub-componentes
|
|
18726
|
-
* + el chrome de popover canon del DS (sui-datepicker). El status pill NO se
|
|
18727
|
-
* monta en este popover por default (es para schedulers/disponibilidad); el
|
|
18728
|
-
* consumer lo usa suelto, igual que <sui-time-picker-item> fuera del picker.
|
|
18729
|
-
*
|
|
18730
|
-
* **Arquitectura**: trigger (input field) que abre un panel con columnas
|
|
18731
|
-
* scrollables de hora / minuto / (periodo AM-PM en 12h) usando
|
|
18732
|
-
* <sui-time-picker-item>, más una fila opcional de presets de duración usando
|
|
18733
|
-
* <sui-time-picker-duration>. Patrón staged-value + Cancel/Apply.
|
|
18734
|
-
*
|
|
18735
|
-
* El panel del popover se delega a `sui-dropdown-menu` vía `[origin]=triggerEl`
|
|
18736
|
-
* (mismo stack que sui-select): CDK Overlay con FlexibleConnectedPositionStrategy
|
|
18737
|
-
* (flip arriba/abajo según espacio disponible), reposición en scroll, backdrop
|
|
18738
|
-
* transparent (outside-click close), Escape y disposeOnNavigation. Así el panel
|
|
18739
|
-
* NO se corta abajo y abre donde hay más espacio. El modo `inline` NO usa overlay
|
|
18740
|
-
* — renderiza el panel inline (sin trigger ni flotación).
|
|
18741
|
-
*
|
|
18742
|
-
* COMPONE (dependencias ya homologadas):
|
|
18743
|
-
* - sui-time-picker-item / sui-time-picker-duration (sub-piezas de este set)
|
|
18744
|
-
* - sui-form-label / sui-form-hint (label + hint, como sui-input/sui-select)
|
|
18745
|
-
* - sui-button (footer Cancel/Apply)
|
|
18746
|
-
* - sui-icon (trigger icon + chevron)
|
|
18747
|
-
* - sui-dropdown-menu / sui-dropdown-panel (overlay del popover, como sui-select)
|
|
18748
|
-
*
|
|
18749
|
-
* PROJECT EXTENSIONS (no en los nodos Figma — el set solo define las piezas):
|
|
18750
|
-
* - Trigger input + popover (Figma solo da las filas y pills sueltas).
|
|
18751
|
-
* - Formato 12h (default, AM/PM como en los items) y 24h.
|
|
18752
|
-
* - [step] de minutos, [durationPresets], [inline], [showFooter].
|
|
18753
|
-
* - CVA: writeValue/registerOnChange para FormControl.
|
|
18754
|
-
*
|
|
18755
|
-
* @input label / sublabel / required / tooltip / hint / errorMessage / error
|
|
18756
|
-
* @input placeholder / disabled / size
|
|
18757
|
-
* @input format — '12h' (default, AM/PM) | '24h'
|
|
18758
|
-
* @input step — incremento de minutos en la lista (default 5)
|
|
18759
|
-
* @input durationPresets — pills de duración rápida (default 15/30/45/60 min)
|
|
18760
|
-
* @input inline — renderiza el panel sin trigger ni popover
|
|
18761
|
-
* @input showFooter — muestra Cancel/Apply (default true)
|
|
18762
|
-
* @model value — SuiTimeValue | null (two-way + CVA)
|
|
18763
|
-
*/
|
|
18764
18800
|
class SuiTimePicker {
|
|
18765
18801
|
// ── Inputs ───────────────────────────────────────────────────────────
|
|
18766
18802
|
label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -18772,7 +18808,16 @@ class SuiTimePicker {
|
|
|
18772
18808
|
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
18773
18809
|
placeholder = input('Seleccionar hora', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
18774
18810
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
18811
|
+
/**
|
|
18812
|
+
* Alto del campo: small 36 · medium 40 (default) · large 48 (extensión SUI,
|
|
18813
|
+
* 03-10-2026, para mobile: mismo alto que sui-input/sui-select large). En
|
|
18814
|
+
* large las filas del panel miden 44 y Cancelar/Aplicar van en large.
|
|
18815
|
+
*/
|
|
18775
18816
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
18817
|
+
/** sui-form-label no tiene large: el label queda en medium. */
|
|
18818
|
+
labelSize = computed(() => this.size() === 'small' ? 'small' : 'medium', ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
|
|
18819
|
+
/** Botones del footer: large (48) con el campo large; small (36) si no. */
|
|
18820
|
+
footerButtonSize = computed(() => this.size() === 'large' ? 'large' : 'small', ...(ngDevMode ? [{ debugName: "footerButtonSize" }] : /* istanbul ignore next */ []));
|
|
18776
18821
|
/** Formato de display: '12h' (AM/PM) o '24h'. */
|
|
18777
18822
|
format = input('12h', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
18778
18823
|
/** Incremento de minutos de la lista (1, 5, 15, ...). Default 5. */
|
|
@@ -19034,7 +19079,7 @@ class SuiTimePicker {
|
|
|
19034
19079
|
useExisting: forwardRef(() => SuiTimePicker),
|
|
19035
19080
|
multi: true,
|
|
19036
19081
|
},
|
|
19037
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "_columnEls", predicate: ["columnEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"size()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n #columnEl\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { 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: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19082
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "_menu", first: true, predicate: SuiDropdownMenu, descendants: true, isSignal: true }, { propertyName: "_columnEls", predicate: ["columnEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n [class.sui-time-picker__panel--large]=\"size() === 'large'\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n #columnEl\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"footerButtonSize()\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n [size]=\"footerButtonSize()\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-time-picker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-time-picker__panel--large .sui-time-picker__option{height:44px;padding:10px 12px}.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__time,.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__meridiem{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}@media(max-width:767px){.sui-time-picker__option{height:44px;padding:12px}}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}:host([data-sui-size=large]) .sui-time-picker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiButton, selector: "sui-button", inputs: ["variant", "color", "size", "onlyIcon", "disabled", "leftIcon", "rightIcon", "type"] }, { 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: SuiTimePickerItem, selector: "sui-time-picker-item", inputs: ["time", "meridiem", "rightTime", "rightMeridiem", "direction", "active", "highlighted", "disabled"], outputs: ["clicked"] }, { kind: "component", type: SuiTimePickerDuration, selector: "sui-time-picker-duration", inputs: ["label", "active", "disabled"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19038
19083
|
}
|
|
19039
19084
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTimePicker, decorators: [{
|
|
19040
19085
|
type: Component,
|
|
@@ -19060,7 +19105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
19060
19105
|
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
19061
19106
|
'[attr.data-sui-format]': 'format()',
|
|
19062
19107
|
'[attr.data-sui-size]': 'size()',
|
|
19063
|
-
}, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"
|
|
19108
|
+
}, template: "<!-- Label (slot superior) \u2014 mismo patr\u00F3n que sui-input/sui-select. -->\n@if (label()) {\n <sui-form-label\n [label]=\"label()!\"\n [sublabel]=\"sublabel()\"\n [required]=\"required()\"\n [tooltip]=\"tooltip()\"\n [size]=\"labelSize()\"\n class=\"sui-time-picker__label-host\"\n (click)=\"toggle()\"\n />\n}\n\n<!-- Trigger (input + icono reloj) \u2014 solo si no es inline. -->\n@if (!inline()) {\n <button\n #triggerEl\n type=\"button\"\n class=\"sui-time-picker__trigger\"\n [class.sui-time-picker__trigger--error]=\"error()\"\n [class.sui-time-picker__trigger--open]=\"open()\"\n [class.sui-time-picker__trigger--filled]=\"value() !== null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"open()\"\n (click)=\"toggle()\"\n >\n <sui-icon class=\"sui-time-picker__trigger-icon\" name=\"time-line\" [size]=\"20\" />\n <span\n class=\"sui-time-picker__trigger-text\"\n [class.sui-time-picker__trigger-text--placeholder]=\"!value()\"\n >\n {{ triggerText() }}\n </span>\n <sui-icon class=\"sui-time-picker__trigger-chevron\" name=\"arrow-down-s-line\" [size]=\"20\" />\n </button>\n}\n\n<!-- Hint / error message \u2014 mismo slot que sui-input/sui-select. -->\n@if (!inline() && (error() ? errorMessage() : hint())) {\n <sui-form-hint\n [message]=\"error() ? errorMessage() : hint()\"\n [variant]=\"error() ? 'error' : 'neutral'\"\n class=\"sui-time-picker__hint-host\"\n />\n}\n\n<!--\n Panel (popover) \u2014 el contenido vive en un ng-template reutilizado por:\n \u00B7 inline() \u2192 render directo (sin overlay, sin trigger)\n \u00B7 !inline() \u2192 proyectado al sui-dropdown-menu (CDK Overlay con flip\n arriba/abajo, reposici\u00F3n en scroll, backdrop, Escape, disposeOnNavigation).\n As\u00ED el panel NO se corta abajo y abre donde hay m\u00E1s espacio (igual que sui-select).\n-->\n<ng-template #panelTpl>\n <div\n class=\"sui-time-picker__panel\"\n [class.sui-time-picker__panel--inline]=\"inline()\"\n [class.sui-time-picker__panel--large]=\"size() === 'large'\"\n role=\"dialog\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n <!-- Columnas scrollables: hora / minuto / (periodo en 12h). -->\n <div class=\"sui-time-picker__columns\">\n <!-- Columna HORA -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Hora\"\n >\n @for (item of hourItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"hourLabelOf(item)\"\n [active]=\"isHourActive(item)\"\n (clicked)=\"selectHour(item)\"\n />\n }\n </div>\n\n <!-- Columna MINUTO -->\n <div\n #columnEl\n class=\"sui-time-picker__column\"\n role=\"listbox\"\n aria-label=\"Minuto\"\n >\n @for (item of minuteItems(); track trackColumn($index, item)) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"item.label\"\n [active]=\"isMinuteActive(item)\"\n (clicked)=\"selectMinute(item)\"\n />\n }\n </div>\n\n <!-- Columna PERIODO (solo 12h) -->\n @if (showPeriod()) {\n <div\n #columnEl\n class=\"sui-time-picker__column sui-time-picker__column--period\"\n role=\"listbox\"\n aria-label=\"AM/PM\"\n >\n @for (p of periods; track p) {\n <sui-time-picker-item\n class=\"sui-time-picker__option\"\n [time]=\"p\"\n [active]=\"isPeriodActive(p)\"\n (clicked)=\"selectPeriod(p)\"\n />\n }\n </div>\n }\n </div>\n\n <!-- Presets de duraci\u00F3n (pills) \u2014 Figma TimePickerSelectDuration. -->\n @if (durationPresets().length) {\n <div class=\"sui-time-picker__presets\" role=\"group\" aria-label=\"Duraci\u00F3n r\u00E1pida\">\n @for (p of durationPresets(); track trackPreset($index, p)) {\n <sui-time-picker-duration\n [label]=\"p.label\"\n [active]=\"isPresetActive($index)\"\n (clicked)=\"selectPreset(p, $index)\"\n />\n }\n </div>\n }\n\n <!-- Footer Cancel/Apply. -->\n @if (showFooter()) {\n <footer class=\"sui-time-picker__footer\">\n <sui-button\n variant=\"stroke\"\n color=\"neutral\"\n [size]=\"footerButtonSize()\"\n type=\"button\"\n (click)=\"cancel()\"\n >\n Cancelar\n </sui-button>\n <sui-button\n variant=\"filled\"\n color=\"primary\"\n [size]=\"footerButtonSize()\"\n type=\"button\"\n (click)=\"apply()\"\n >\n Aplicar\n </sui-button>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Inline mode \u2014 render directo del panel (sin overlay ni trigger). -->\n@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n}\n\n<!--\n Popover mode \u2014 el panel flota v\u00EDa sui-dropdown-menu anclado al trigger\n (igual que sui-select). Hereda flip arriba/abajo, reposici\u00F3n en scroll,\n backdrop transparent (outside-click), Escape y disposeOnNavigation.\n El componente abre/cierra el menu desde openPopover()/cancel()/apply();\n (openedChange) re-sincroniza open() en los closes del overlay.\n-->\n@if (!inline()) {\n <sui-dropdown-menu\n [origin]=\"triggerEl() ?? null\"\n [disabled]=\"isDisabled()\"\n [matchWidth]=\"false\"\n [minWidth]=\"240\"\n panelClass=\"sui-time-picker__overlay-pane\"\n (openedChange)=\"onMenuOpenedChange($event)\"\n >\n <ng-template suiDropdownPanel>\n <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n </ng-template>\n </sui-dropdown-menu>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;font-family:var(--sui-font-sans, var(--font-sans, sans-serif))}.sui-time-picker__trigger{display:inline-flex;align-items:center;gap:8px;width:100%;min-width:180px;height:40px;padding:0 12px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));cursor:pointer;outline:none;font:inherit;color:var(--sui-text-strong-950, #171717);transition:border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)),box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1))}.sui-time-picker__trigger:hover:not(:disabled){border-color:var(--sui-stroke-sub-300, #d1d1d1)}.sui-time-picker__trigger:focus-visible:not(:disabled){border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff),0 0 0 4px color-mix(in oklab,var(--sui-stroke-strong-950, #171717) 16%,transparent)}.sui-time-picker__trigger--error{border-color:var(--sui-state-error-base, #fb3748)}.sui-time-picker__trigger--open{border-color:var(--sui-stroke-strong-950, #171717)}.sui-time-picker__trigger:disabled{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;border:none}:host([data-sui-size=small]) .sui-time-picker__trigger{height:36px;border-radius:var(--sui-radius-8, 8px)}:host([data-sui-size=large]) .sui-time-picker__trigger{height:48px;padding:0 14px;gap:10px;border-radius:var(--sui-radius-12, 12px)}.sui-time-picker__panel--large .sui-time-picker__option{height:44px;padding:10px 12px}.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__time,.sui-time-picker__panel--large .sui-time-picker__option ::ng-deep .sui-time-picker-item__meridiem{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}@media(max-width:767px){.sui-time-picker__option{height:44px;padding:12px}}.sui-time-picker__trigger-icon,.sui-time-picker__trigger-chevron{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker__trigger-text{flex:1 1 auto;text-align:left;font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-time-picker__trigger-text--placeholder{color:var(--sui-text-soft-400, #a3a3a3);font-weight:400}:host([data-sui-size=large]) .sui-time-picker__trigger-text{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}\n"] }]
|
|
19064
19109
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], durationPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "durationPresets", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", 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 }] }], _columnEls: [{ type: i0.ViewChildren, args: ['columnEl', { isSignal: true }] }] } });
|
|
19065
19110
|
|
|
19066
19111
|
/**
|
|
@@ -19475,14 +19520,14 @@ class SuiToastOutlet {
|
|
|
19475
19520
|
this.observedSlots.clear();
|
|
19476
19521
|
}
|
|
19477
19522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiToastOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19478
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiToastOutlet, isStandalone: true, selector: "sui-toast-outlet", host: { properties: { "style.--sui-toast-bottom-offset.px": "liquidTabOffset()", "class.sui-toast-outlet--native-tab": "tabBarActive()" } }, viewQueries: [{ propertyName: "slotRefs", predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (pos of positions; track pos) {\n @if (toastsByPosition()[pos].length > 0) {\n <div\n class=\"sui-toast-stack\"\n [attr.data-sui-position]=\"pos\"\n [attr.data-expanded]=\"isExpanded(pos) ? 'true' : 'false'\"\n [style.--sui-toast-count]=\"toastsByPosition()[pos].length\"\n (mouseenter)=\"onStackEnter(pos)\"\n (mouseleave)=\"onStackLeave(pos)\"\n (touchstart)=\"onStackEnter(pos)\"\n aria-live=\"polite\"\n aria-label=\"Notificaciones\"\n >\n @for (toast of toastsByPosition()[pos]; track trackById($index, toast)) {\n <div\n #slot\n class=\"sui-toast-slot\"\n [class.sui-toast-slot--leaving]=\"isLeaving(toast.id)\"\n [class.sui-toast-slot--manual-dismiss]=\"isManuallyDismissed(toast.id)\"\n role=\"status\"\n [attr.data-toast-id]=\"toast.id\"\n [attr.data-toast-style]=\"toast.style\"\n [style.--toast-index]=\"computeVisualIndex(toast)\"\n [style.--toast-offset.px]=\"computeExpandOffset(toast)\"\n [attr.data-front]=\"computeVisualIndex(toast) === 0 ? 'true' : 'false'\"\n >\n <sui-alert\n [variant]=\"toast.variant\"\n [variantStyle]=\"toast.style\"\n size=\"large\"\n [title]=\"toast.title\"\n [description]=\"toast.description ?? null\"\n [dismissible]=\"false\"\n >\n @if (toast.action; as act) {\n <sui-link-button\n slot=\"action\"\n variant=\"modifiable\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onAction(toast)\"\n >{{ act.label }}</sui-link-button>\n }\n </sui-alert>\n @if (toast.dismissible) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192\n el icono hereda el currentColor que el slot wrapper setea seg\u00FAn\n [data-toast-style]), NO un <button> maqueta. El outlet SIGUE\n siendo due\u00F1o del X (dispara dismissManual con su flow de\n fade-out CSS) \u2014 solo cambia el markup del bot\u00F3n, no el\n comportamiento (timers/stacking/animaci\u00F3n intactos). -->\n <sui-compact-button\n class=\"sui-toast-slot__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissManual(toast)\"\n />\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-toast-stack{position:fixed;z-index:9000;pointer-events:none;max-width:360px;width:calc(100vw - 40px);min-height:90px;--toast-gap: 10px}.sui-toast-stack[data-sui-position=top-left]{top:max(20px,env(safe-area-inset-top,20px));left:20px}.sui-toast-stack[data-sui-position=top-center]{top:max(20px,env(safe-area-inset-top,20px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=top-right]{top:max(20px,env(safe-area-inset-top,20px));right:20px}.sui-toast-stack[data-sui-position=bottom-left]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:20px}.sui-toast-stack[data-sui-position=bottom-center]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=bottom-right]{bottom:max(12px,env(safe-area-inset-bottom,12px));right:20px}@media(max-width:767px){.sui-toast-stack{max-width:none;width:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=top-]{top:max(12px,env(safe-area-inset-top,12px));bottom:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=bottom-]{bottom:max(12px,env(safe-area-inset-bottom,12px));top:auto;left:12px;right:12px;transform:none}}:host(.sui-toast-outlet--native-tab) .sui-toast-stack[data-sui-position^=bottom-]{bottom:var(--sui-toast-bottom-offset, 20px)}.sui-toast-slot{position:absolute;width:100%;pointer-events:auto;z-index:calc(100 - var(--toast-index, 0));bottom:0;--offset-y: calc(var(--toast-index, 0) * -10px);--scale: calc(1 - var(--toast-index, 0) * .05);transform:translateY(var(--offset-y)) scale(var(--scale));transform-origin:bottom center;opacity:1}.sui-toast-slot:nth-child(n+4){opacity:0;pointer-events:none}.sui-toast-slot{transition:opacity .2s ease-out,transform .5s cubic-bezier(.22,1,.36,1)}@starting-style{.sui-toast-slot{opacity:0;transform:translateY(100%) scale(.94)}}.sui-toast-slot.sui-toast-slot--leaving{opacity:0;transform:translateY(40%) scale(.9);pointer-events:none}.sui-toast-slot.sui-toast-slot--leaving[data-front=true],.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(100%) scale(1)}.sui-toast-slot>sui-alert{display:block;box-shadow:var(--sui-custom-shadow-small);border-radius:var(--sui-radius-12)}.sui-toast-slot__close{position:absolute;top:12px;right:12px;color:var(--sui-text-strong-950, #171717);opacity:.48;transition:opacity .15s ease-out;-webkit-tap-highlight-color:transparent}.sui-toast-slot__close:hover{opacity:.78}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close{color:var(--sui-static-white, #ffffff);opacity:.72}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:hover,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:hover{opacity:.92}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving{transform:translateY(-40%) scale(.9)}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving[data-front=true],.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(-100%) scale(1)}@starting-style{.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{opacity:0;transform:translateY(-100%) scale(.94)}}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{bottom:auto;top:0;--offset-y: calc(var(--toast-index, 0) * 10px);transform-origin:top center}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot[data-front=true]{animation-name:sui-toast-enter-top}.sui-toast-stack[data-sui-position^=bottom-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true] .sui-toast-slot{--offset-y: calc(var(--toast-offset, 0px) * -1);--scale: 1;opacity:1}.sui-toast-stack[data-sui-position^=top-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=top-][data-expanded=true] .sui-toast-slot{--offset-y: var(--toast-offset, 0px);--scale: 1;opacity:1}@media(prefers-reduced-motion:reduce){.sui-toast-slot{transition:none}}\n"], dependencies: [{ kind: "component", type: SuiAlert, selector: "sui-alert", inputs: ["variant", "variantStyle", "size", "title", "description", "showIcon", "dismissible", "autoHideOnDismiss", "actions"], outputs: ["closed"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19523
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiToastOutlet, isStandalone: true, selector: "sui-toast-outlet", host: { properties: { "style.--sui-toast-bottom-offset.px": "liquidTabOffset()", "class.sui-toast-outlet--native-tab": "tabBarActive()" } }, viewQueries: [{ propertyName: "slotRefs", predicate: ["slot"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (pos of positions; track pos) {\n @if (toastsByPosition()[pos].length > 0) {\n <div\n class=\"sui-toast-stack\"\n [attr.data-sui-position]=\"pos\"\n [attr.data-expanded]=\"isExpanded(pos) ? 'true' : 'false'\"\n [style.--sui-toast-count]=\"toastsByPosition()[pos].length\"\n (mouseenter)=\"onStackEnter(pos)\"\n (mouseleave)=\"onStackLeave(pos)\"\n (touchstart)=\"onStackEnter(pos)\"\n aria-live=\"polite\"\n aria-label=\"Notificaciones\"\n >\n @for (toast of toastsByPosition()[pos]; track trackById($index, toast)) {\n <div\n #slot\n class=\"sui-toast-slot\"\n [class.sui-toast-slot--leaving]=\"isLeaving(toast.id)\"\n [class.sui-toast-slot--manual-dismiss]=\"isManuallyDismissed(toast.id)\"\n role=\"status\"\n [attr.data-toast-id]=\"toast.id\"\n [attr.data-toast-style]=\"toast.style\"\n [style.--toast-index]=\"computeVisualIndex(toast)\"\n [style.--toast-offset.px]=\"computeExpandOffset(toast)\"\n [attr.data-front]=\"computeVisualIndex(toast) === 0 ? 'true' : 'false'\"\n >\n <sui-alert\n [variant]=\"toast.variant\"\n [variantStyle]=\"toast.style\"\n size=\"large\"\n [title]=\"toast.title\"\n [description]=\"toast.description ?? null\"\n [dismissible]=\"false\"\n >\n @if (toast.action; as act) {\n <sui-link-button\n slot=\"action\"\n variant=\"modifiable\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onAction(toast)\"\n >{{ act.label }}</sui-link-button>\n }\n </sui-alert>\n @if (toast.dismissible) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192\n el icono hereda el currentColor que el slot wrapper setea seg\u00FAn\n [data-toast-style]), NO un <button> maqueta. El outlet SIGUE\n siendo due\u00F1o del X (dispara dismissManual con su flow de\n fade-out CSS) \u2014 solo cambia el markup del bot\u00F3n, no el\n comportamiento (timers/stacking/animaci\u00F3n intactos). -->\n <sui-compact-button\n class=\"sui-toast-slot__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissManual(toast)\"\n />\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-toast-stack{position:fixed;z-index:9000;pointer-events:none;max-width:360px;width:calc(100vw - 40px);min-height:90px;--toast-gap: 10px}.sui-toast-stack[data-sui-position=top-left]{top:max(20px,env(safe-area-inset-top,20px));left:20px}.sui-toast-stack[data-sui-position=top-center]{top:max(20px,env(safe-area-inset-top,20px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=top-right]{top:max(20px,env(safe-area-inset-top,20px));right:20px}.sui-toast-stack[data-sui-position=bottom-left]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:20px}.sui-toast-stack[data-sui-position=bottom-center]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=bottom-right]{bottom:max(12px,env(safe-area-inset-bottom,12px));right:20px}@media(max-width:767px){.sui-toast-stack{max-width:none;width:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=top-]{top:max(12px,env(safe-area-inset-top,12px));bottom:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=bottom-]{bottom:max(12px,env(safe-area-inset-bottom,12px));top:auto;left:12px;right:12px;transform:none}}:host(.sui-toast-outlet--native-tab) .sui-toast-stack[data-sui-position^=bottom-]{bottom:var(--sui-toast-bottom-offset, 20px)}.sui-toast-slot{position:absolute;width:100%;pointer-events:auto;z-index:calc(100 - var(--toast-index, 0));bottom:0;--offset-y: calc(var(--toast-index, 0) * -10px);--scale: calc(1 - var(--toast-index, 0) * .05);transform:translateY(var(--offset-y)) scale(var(--scale));transform-origin:bottom center;opacity:1}.sui-toast-slot:nth-child(n+4){opacity:0;pointer-events:none}.sui-toast-slot{transition:opacity .2s ease-out,transform .5s cubic-bezier(.22,1,.36,1)}@starting-style{.sui-toast-slot{opacity:0;transform:translateY(100%) scale(.94)}}.sui-toast-slot.sui-toast-slot--leaving{opacity:0;transform:translateY(40%) scale(.9);pointer-events:none}.sui-toast-slot.sui-toast-slot--leaving[data-front=true],.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(100%) scale(1)}.sui-toast-slot>sui-alert{display:block;box-shadow:var(--sui-custom-shadow-small);border-radius:var(--sui-radius-12)}.sui-toast-slot__close{position:absolute;top:12px;right:12px;color:var(--sui-text-strong-950, #171717);opacity:.48;transition:opacity .15s ease-out;-webkit-tap-highlight-color:transparent}.sui-toast-slot__close:hover{opacity:.78}.sui-toast-slot__close ::ng-deep .sui-compact-button__el{position:relative}.sui-toast-slot__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-10px}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close{color:var(--sui-static-white, #ffffff);opacity:.72}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:hover,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:hover{opacity:.92}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving{transform:translateY(-40%) scale(.9)}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving[data-front=true],.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(-100%) scale(1)}@starting-style{.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{opacity:0;transform:translateY(-100%) scale(.94)}}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{bottom:auto;top:0;--offset-y: calc(var(--toast-index, 0) * 10px);transform-origin:top center}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot[data-front=true]{animation-name:sui-toast-enter-top}.sui-toast-stack[data-sui-position^=bottom-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true] .sui-toast-slot{--offset-y: calc(var(--toast-offset, 0px) * -1);--scale: 1;opacity:1}.sui-toast-stack[data-sui-position^=top-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=top-][data-expanded=true] .sui-toast-slot{--offset-y: var(--toast-offset, 0px);--scale: 1;opacity:1}@media(prefers-reduced-motion:reduce){.sui-toast-slot{transition:none}}\n"], dependencies: [{ kind: "component", type: SuiAlert, selector: "sui-alert", inputs: ["variant", "variantStyle", "size", "title", "description", "showIcon", "dismissible", "autoHideOnDismiss", "actions"], outputs: ["closed"] }, { kind: "component", type: SuiLinkButton, selector: "sui-link-button", inputs: ["variant", "size", "underline", "disabled", "leftIcon", "rightIcon", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19479
19524
|
}
|
|
19480
19525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiToastOutlet, decorators: [{
|
|
19481
19526
|
type: Component,
|
|
19482
19527
|
args: [{ selector: 'sui-toast-outlet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiAlert, SuiLinkButton, SuiCompactButton], host: {
|
|
19483
19528
|
'[style.--sui-toast-bottom-offset.px]': 'liquidTabOffset()',
|
|
19484
19529
|
'[class.sui-toast-outlet--native-tab]': 'tabBarActive()',
|
|
19485
|
-
}, template: "@for (pos of positions; track pos) {\n @if (toastsByPosition()[pos].length > 0) {\n <div\n class=\"sui-toast-stack\"\n [attr.data-sui-position]=\"pos\"\n [attr.data-expanded]=\"isExpanded(pos) ? 'true' : 'false'\"\n [style.--sui-toast-count]=\"toastsByPosition()[pos].length\"\n (mouseenter)=\"onStackEnter(pos)\"\n (mouseleave)=\"onStackLeave(pos)\"\n (touchstart)=\"onStackEnter(pos)\"\n aria-live=\"polite\"\n aria-label=\"Notificaciones\"\n >\n @for (toast of toastsByPosition()[pos]; track trackById($index, toast)) {\n <div\n #slot\n class=\"sui-toast-slot\"\n [class.sui-toast-slot--leaving]=\"isLeaving(toast.id)\"\n [class.sui-toast-slot--manual-dismiss]=\"isManuallyDismissed(toast.id)\"\n role=\"status\"\n [attr.data-toast-id]=\"toast.id\"\n [attr.data-toast-style]=\"toast.style\"\n [style.--toast-index]=\"computeVisualIndex(toast)\"\n [style.--toast-offset.px]=\"computeExpandOffset(toast)\"\n [attr.data-front]=\"computeVisualIndex(toast) === 0 ? 'true' : 'false'\"\n >\n <sui-alert\n [variant]=\"toast.variant\"\n [variantStyle]=\"toast.style\"\n size=\"large\"\n [title]=\"toast.title\"\n [description]=\"toast.description ?? null\"\n [dismissible]=\"false\"\n >\n @if (toast.action; as act) {\n <sui-link-button\n slot=\"action\"\n variant=\"modifiable\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onAction(toast)\"\n >{{ act.label }}</sui-link-button>\n }\n </sui-alert>\n @if (toast.dismissible) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192\n el icono hereda el currentColor que el slot wrapper setea seg\u00FAn\n [data-toast-style]), NO un <button> maqueta. El outlet SIGUE\n siendo due\u00F1o del X (dispara dismissManual con su flow de\n fade-out CSS) \u2014 solo cambia el markup del bot\u00F3n, no el\n comportamiento (timers/stacking/animaci\u00F3n intactos). -->\n <sui-compact-button\n class=\"sui-toast-slot__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissManual(toast)\"\n />\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-toast-stack{position:fixed;z-index:9000;pointer-events:none;max-width:360px;width:calc(100vw - 40px);min-height:90px;--toast-gap: 10px}.sui-toast-stack[data-sui-position=top-left]{top:max(20px,env(safe-area-inset-top,20px));left:20px}.sui-toast-stack[data-sui-position=top-center]{top:max(20px,env(safe-area-inset-top,20px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=top-right]{top:max(20px,env(safe-area-inset-top,20px));right:20px}.sui-toast-stack[data-sui-position=bottom-left]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:20px}.sui-toast-stack[data-sui-position=bottom-center]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=bottom-right]{bottom:max(12px,env(safe-area-inset-bottom,12px));right:20px}@media(max-width:767px){.sui-toast-stack{max-width:none;width:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=top-]{top:max(12px,env(safe-area-inset-top,12px));bottom:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=bottom-]{bottom:max(12px,env(safe-area-inset-bottom,12px));top:auto;left:12px;right:12px;transform:none}}:host(.sui-toast-outlet--native-tab) .sui-toast-stack[data-sui-position^=bottom-]{bottom:var(--sui-toast-bottom-offset, 20px)}.sui-toast-slot{position:absolute;width:100%;pointer-events:auto;z-index:calc(100 - var(--toast-index, 0));bottom:0;--offset-y: calc(var(--toast-index, 0) * -10px);--scale: calc(1 - var(--toast-index, 0) * .05);transform:translateY(var(--offset-y)) scale(var(--scale));transform-origin:bottom center;opacity:1}.sui-toast-slot:nth-child(n+4){opacity:0;pointer-events:none}.sui-toast-slot{transition:opacity .2s ease-out,transform .5s cubic-bezier(.22,1,.36,1)}@starting-style{.sui-toast-slot{opacity:0;transform:translateY(100%) scale(.94)}}.sui-toast-slot.sui-toast-slot--leaving{opacity:0;transform:translateY(40%) scale(.9);pointer-events:none}.sui-toast-slot.sui-toast-slot--leaving[data-front=true],.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(100%) scale(1)}.sui-toast-slot>sui-alert{display:block;box-shadow:var(--sui-custom-shadow-small);border-radius:var(--sui-radius-12)}.sui-toast-slot__close{position:absolute;top:12px;right:12px;color:var(--sui-text-strong-950, #171717);opacity:.48;transition:opacity .15s ease-out;-webkit-tap-highlight-color:transparent}.sui-toast-slot__close:hover{opacity:.78}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close{color:var(--sui-static-white, #ffffff);opacity:.72}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:hover,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:hover{opacity:.92}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving{transform:translateY(-40%) scale(.9)}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving[data-front=true],.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(-100%) scale(1)}@starting-style{.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{opacity:0;transform:translateY(-100%) scale(.94)}}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{bottom:auto;top:0;--offset-y: calc(var(--toast-index, 0) * 10px);transform-origin:top center}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot[data-front=true]{animation-name:sui-toast-enter-top}.sui-toast-stack[data-sui-position^=bottom-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true] .sui-toast-slot{--offset-y: calc(var(--toast-offset, 0px) * -1);--scale: 1;opacity:1}.sui-toast-stack[data-sui-position^=top-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=top-][data-expanded=true] .sui-toast-slot{--offset-y: var(--toast-offset, 0px);--scale: 1;opacity:1}@media(prefers-reduced-motion:reduce){.sui-toast-slot{transition:none}}\n"] }]
|
|
19530
|
+
}, template: "@for (pos of positions; track pos) {\n @if (toastsByPosition()[pos].length > 0) {\n <div\n class=\"sui-toast-stack\"\n [attr.data-sui-position]=\"pos\"\n [attr.data-expanded]=\"isExpanded(pos) ? 'true' : 'false'\"\n [style.--sui-toast-count]=\"toastsByPosition()[pos].length\"\n (mouseenter)=\"onStackEnter(pos)\"\n (mouseleave)=\"onStackLeave(pos)\"\n (touchstart)=\"onStackEnter(pos)\"\n aria-live=\"polite\"\n aria-label=\"Notificaciones\"\n >\n @for (toast of toastsByPosition()[pos]; track trackById($index, toast)) {\n <div\n #slot\n class=\"sui-toast-slot\"\n [class.sui-toast-slot--leaving]=\"isLeaving(toast.id)\"\n [class.sui-toast-slot--manual-dismiss]=\"isManuallyDismissed(toast.id)\"\n role=\"status\"\n [attr.data-toast-id]=\"toast.id\"\n [attr.data-toast-style]=\"toast.style\"\n [style.--toast-index]=\"computeVisualIndex(toast)\"\n [style.--toast-offset.px]=\"computeExpandOffset(toast)\"\n [attr.data-front]=\"computeVisualIndex(toast) === 0 ? 'true' : 'false'\"\n >\n <sui-alert\n [variant]=\"toast.variant\"\n [variantStyle]=\"toast.style\"\n size=\"large\"\n [title]=\"toast.title\"\n [description]=\"toast.description ?? null\"\n [dismissible]=\"false\"\n >\n @if (toast.action; as act) {\n <sui-link-button\n slot=\"action\"\n variant=\"modifiable\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onAction(toast)\"\n >{{ act.label }}</sui-link-button>\n }\n </sui-alert>\n @if (toast.dismissible) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192\n el icono hereda el currentColor que el slot wrapper setea seg\u00FAn\n [data-toast-style]), NO un <button> maqueta. El outlet SIGUE\n siendo due\u00F1o del X (dispara dismissManual con su flow de\n fade-out CSS) \u2014 solo cambia el markup del bot\u00F3n, no el\n comportamiento (timers/stacking/animaci\u00F3n intactos). -->\n <sui-compact-button\n class=\"sui-toast-slot__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissManual(toast)\"\n />\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-toast-stack{position:fixed;z-index:9000;pointer-events:none;max-width:360px;width:calc(100vw - 40px);min-height:90px;--toast-gap: 10px}.sui-toast-stack[data-sui-position=top-left]{top:max(20px,env(safe-area-inset-top,20px));left:20px}.sui-toast-stack[data-sui-position=top-center]{top:max(20px,env(safe-area-inset-top,20px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=top-right]{top:max(20px,env(safe-area-inset-top,20px));right:20px}.sui-toast-stack[data-sui-position=bottom-left]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:20px}.sui-toast-stack[data-sui-position=bottom-center]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=bottom-right]{bottom:max(12px,env(safe-area-inset-bottom,12px));right:20px}@media(max-width:767px){.sui-toast-stack{max-width:none;width:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=top-]{top:max(12px,env(safe-area-inset-top,12px));bottom:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=bottom-]{bottom:max(12px,env(safe-area-inset-bottom,12px));top:auto;left:12px;right:12px;transform:none}}:host(.sui-toast-outlet--native-tab) .sui-toast-stack[data-sui-position^=bottom-]{bottom:var(--sui-toast-bottom-offset, 20px)}.sui-toast-slot{position:absolute;width:100%;pointer-events:auto;z-index:calc(100 - var(--toast-index, 0));bottom:0;--offset-y: calc(var(--toast-index, 0) * -10px);--scale: calc(1 - var(--toast-index, 0) * .05);transform:translateY(var(--offset-y)) scale(var(--scale));transform-origin:bottom center;opacity:1}.sui-toast-slot:nth-child(n+4){opacity:0;pointer-events:none}.sui-toast-slot{transition:opacity .2s ease-out,transform .5s cubic-bezier(.22,1,.36,1)}@starting-style{.sui-toast-slot{opacity:0;transform:translateY(100%) scale(.94)}}.sui-toast-slot.sui-toast-slot--leaving{opacity:0;transform:translateY(40%) scale(.9);pointer-events:none}.sui-toast-slot.sui-toast-slot--leaving[data-front=true],.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(100%) scale(1)}.sui-toast-slot>sui-alert{display:block;box-shadow:var(--sui-custom-shadow-small);border-radius:var(--sui-radius-12)}.sui-toast-slot__close{position:absolute;top:12px;right:12px;color:var(--sui-text-strong-950, #171717);opacity:.48;transition:opacity .15s ease-out;-webkit-tap-highlight-color:transparent}.sui-toast-slot__close:hover{opacity:.78}.sui-toast-slot__close ::ng-deep .sui-compact-button__el{position:relative}.sui-toast-slot__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:-10px}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close{color:var(--sui-static-white, #ffffff);opacity:.72}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:hover,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:hover{opacity:.92}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving{transform:translateY(-40%) scale(.9)}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving[data-front=true],.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(-100%) scale(1)}@starting-style{.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{opacity:0;transform:translateY(-100%) scale(.94)}}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{bottom:auto;top:0;--offset-y: calc(var(--toast-index, 0) * 10px);transform-origin:top center}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot[data-front=true]{animation-name:sui-toast-enter-top}.sui-toast-stack[data-sui-position^=bottom-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true] .sui-toast-slot{--offset-y: calc(var(--toast-offset, 0px) * -1);--scale: 1;opacity:1}.sui-toast-stack[data-sui-position^=top-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=top-][data-expanded=true] .sui-toast-slot{--offset-y: var(--toast-offset, 0px);--scale: 1;opacity:1}@media(prefers-reduced-motion:reduce){.sui-toast-slot{transition:none}}\n"] }]
|
|
19486
19531
|
}], propDecorators: { slotRefs: [{ type: i0.ViewChildren, args: ['slot', { isSignal: true }] }] } });
|
|
19487
19532
|
|
|
19488
19533
|
/**
|
|
@@ -19827,5 +19872,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
19827
19872
|
* Generated bundle index. Do not edit.
|
|
19828
19873
|
*/
|
|
19829
19874
|
|
|
19830
|
-
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_EMOJI_STATIC, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiHref, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiLogo, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
19875
|
+
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_EMOJI_STATIC, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_IMAGE_UPLOAD_ACCEPT, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiHref, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiLogo, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, esImagenAceptada, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
19831
19876
|
//# sourceMappingURL=ajuarezso-sui-design-system.mjs.map
|