@ajuarezso/sui-design-system 0.20.0 → 0.21.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 +51 -51
- 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 +17 -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-compact-select/README.md +127 -0
- package/docs/sui-compact-select-for-input/README.md +117 -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 +145 -0
- package/docs/sui-date-selector/README.md +98 -0
- package/docs/sui-datepicker/README.md +193 -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-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-image-upload/README.md +200 -0
- package/docs/sui-image-upload-profile/README.md +145 -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 +244 -0
- package/docs/sui-integration-switch/README.md +142 -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-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-select/README.md +180 -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-tab-chips/README.md +185 -0
- package/docs/sui-tab-menu-horizontal/README.md +142 -0
- package/docs/sui-tab-menu-vertical/README.md +136 -0
- package/docs/sui-tag-input/README.md +120 -0
- package/docs/sui-textarea/README.md +157 -0
- package/docs/sui-time-picker/README.md +237 -0
- package/docs/sui-toast/README.md +190 -0
- package/docs/sui-tooltip/README.md +201 -0
- package/fesm2022/ajuarezso-sui-design-system.mjs +273 -231
- package/fesm2022/ajuarezso-sui-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ajuarezso-sui-design-system.d.ts +208 -52
|
@@ -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
|
|
|
@@ -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:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:
|
|
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:14px;font-weight:400;line-height:20px;letter-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:13px 10px 13px 12px;gap:8px}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select-for-input__menu 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:-.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}:host([data-sui-size=medium]){padding:
|
|
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:14px;font-weight:400;line-height:20px;letter-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:13px 10px 13px 12px;gap:8px}.sui-compact-select-for-input__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select-for-input__menu 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:13px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:13px 12px 13px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select__menu 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:13px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px)}:host([data-sui-type=basic][data-sui-size=large]) .sui-compact-select__trigger{padding:13px 12px 13px 14px}.sui-compact-select__menu--large sui-dropdown-item{min-height:44px;padding:12px 8px}@media(max-width:767px){.sui-compact-select__menu 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)}.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)}.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: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}}@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: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}}@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
|
/**
|
|
@@ -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-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:12px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:14px 8px}@media(max-width:767px){.sui-select__panel: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-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:12px 8px}.sui-select__panel--xlarge sui-dropdown-item{min-height:48px;padding:14px 8px}@media(max-width:767px){.sui-select__panel: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
|
|
@@ -17503,9 +17575,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
17503
17575
|
* radius-full, overflow-clip, icon arrow-right-s-line 18px, SIN shadow
|
|
17504
17576
|
*
|
|
17505
17577
|
* PENDING VERIFY:
|
|
17506
|
-
* - `size`: el Tab Menu Horizontal de Figma no expone eje size.
|
|
17507
|
-
*
|
|
17508
|
-
*
|
|
17578
|
+
* - `size`: el Tab Menu Horizontal de Figma no expone eje size. Extensión SUI
|
|
17579
|
+
* (03-10-2026): small 40 · medium 48 (Figma) · large 52 · xlarge 56 de
|
|
17580
|
+
* franja tocable; large/xlarge con texto 16 (mobile).
|
|
17509
17581
|
* - `disabled` por ítem es extensión SUI (Figma no muestra estado Disabled).
|
|
17510
17582
|
*
|
|
17511
17583
|
* Historia: hasta la v0.2.x este componente vivía como `<sui-tabs variant="line">`;
|
|
@@ -17517,9 +17589,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
17517
17589
|
class SuiTabMenuHorizontal {
|
|
17518
17590
|
tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
17519
17591
|
active = model(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
|
|
17520
|
-
/**
|
|
17521
|
-
|
|
17592
|
+
/** Alto de la franja tocable (cada pestaña ocupa todo el alto) — extensión
|
|
17593
|
+
SUI (03-10-2026): small 40 · medium 48 (Figma, default) · large 52 ·
|
|
17594
|
+
xlarge 56. large y xlarge llevan el texto a 16 (mobile). */
|
|
17522
17595
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
17596
|
+
/** Glyph del ícono de la pestaña: 24 en xlarge, 20 en el resto. */
|
|
17597
|
+
iconSize = computed(() => (this.size() === 'xlarge' ? 24 : 20), ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
17523
17598
|
tabChange = output();
|
|
17524
17599
|
isActive(tab) {
|
|
17525
17600
|
return this.active() === tab.value;
|
|
@@ -17531,13 +17606,13 @@ class SuiTabMenuHorizontal {
|
|
|
17531
17606
|
this.tabChange.emit(tab.value);
|
|
17532
17607
|
}
|
|
17533
17608
|
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]=\"
|
|
17609
|
+
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
17610
|
}
|
|
17536
17611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabMenuHorizontal, decorators: [{
|
|
17537
17612
|
type: Component,
|
|
17538
17613
|
args: [{ selector: 'sui-tab-menu-horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
|
|
17539
17614
|
'[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]=\"
|
|
17615
|
+
}, 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
17616
|
}], 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
17617
|
|
|
17543
17618
|
/**
|
|
@@ -18241,6 +18316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18241
18316
|
* convention, bump it then — flagged here so it isn't silently changed.
|
|
18242
18317
|
*
|
|
18243
18318
|
* @input rows: number — Filas iniciales del textarea (default 4)
|
|
18319
|
+
* @input size: SuiTextareaSize — padding/radio, mismos nombres que sui-input (default medium)
|
|
18244
18320
|
* @input label: string | null — Texto del label
|
|
18245
18321
|
* @input sublabel: string | null — Texto secundario del label (ej. "Optional")
|
|
18246
18322
|
* @input required: boolean — Muestra asterisco rojo en el label
|
|
@@ -18257,6 +18333,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18257
18333
|
*/
|
|
18258
18334
|
class SuiTextarea {
|
|
18259
18335
|
rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
18336
|
+
/**
|
|
18337
|
+
* Padding y radio del campo, con los mismos nombres que `sui-input`:
|
|
18338
|
+
* medium (default, el de la guía) 10/12 · large 12/14 · xlarge 14/16 ·
|
|
18339
|
+
* small 8/10 · xsmall 6/8. Extensión SUI (03-10-2026).
|
|
18340
|
+
*/
|
|
18341
|
+
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
18260
18342
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
18261
18343
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
18262
18344
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
@@ -18334,13 +18416,13 @@ class SuiTextarea {
|
|
|
18334
18416
|
this._disabledByForm.set(isDisabled);
|
|
18335
18417
|
}
|
|
18336
18418
|
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: [
|
|
18419
|
+
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
18420
|
{
|
|
18339
18421
|
provide: NG_VALUE_ACCESSOR,
|
|
18340
18422
|
useExisting: forwardRef(() => SuiTextarea),
|
|
18341
18423
|
multi: true,
|
|
18342
18424
|
},
|
|
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 });
|
|
18425
|
+
], 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-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
18426
|
}
|
|
18345
18427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTextarea, decorators: [{
|
|
18346
18428
|
type: Component,
|
|
@@ -18355,8 +18437,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18355
18437
|
'[attr.data-sui-disabled]': 'isDisabled() ? "" : null',
|
|
18356
18438
|
'[attr.data-sui-readonly]': 'readonly() ? "" : null',
|
|
18357
18439
|
'[attr.data-sui-resizable]': 'resizable() ? "" : null',
|
|
18358
|
-
|
|
18359
|
-
|
|
18440
|
+
'[attr.data-sui-size]': 'size()',
|
|
18441
|
+
}, 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-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"] }]
|
|
18442
|
+
}], 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
18443
|
|
|
18361
18444
|
/**
|
|
18362
18445
|
* SUI Time Picker Duration — SUI Design System 2.0
|
|
@@ -18507,12 +18590,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
18507
18590
|
}, 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
18591
|
}], 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
18592
|
|
|
18510
|
-
/** Texto por defecto de cada type (
|
|
18593
|
+
/** Texto por defecto de cada type, en español (03-10-2026; el Figma trae
|
|
18594
|
+
* Available / Busy / In-meeting / Offline). */
|
|
18511
18595
|
const STATUS_LABELS = {
|
|
18512
|
-
available: '
|
|
18513
|
-
busy: '
|
|
18514
|
-
'in-meeting': '
|
|
18515
|
-
offline: '
|
|
18596
|
+
available: 'Disponible',
|
|
18597
|
+
busy: 'Ocupado',
|
|
18598
|
+
'in-meeting': 'En reunión',
|
|
18599
|
+
offline: 'Desconectado',
|
|
18516
18600
|
};
|
|
18517
18601
|
/**
|
|
18518
18602
|
* SUI Time Picker Select Status — SUI Design System 2.0
|
|
@@ -18710,57 +18794,6 @@ const DEFAULT_DURATION_PRESETS = [
|
|
|
18710
18794
|
{ label: '1 h', minutes: 60 },
|
|
18711
18795
|
];
|
|
18712
18796
|
|
|
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
18797
|
class SuiTimePicker {
|
|
18765
18798
|
// ── Inputs ───────────────────────────────────────────────────────────
|
|
18766
18799
|
label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -18772,7 +18805,16 @@ class SuiTimePicker {
|
|
|
18772
18805
|
error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
18773
18806
|
placeholder = input('Seleccionar hora', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
18774
18807
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
18808
|
+
/**
|
|
18809
|
+
* Alto del campo: small 36 · medium 40 (default) · large 48 (extensión SUI,
|
|
18810
|
+
* 03-10-2026, para mobile: mismo alto que sui-input/sui-select large). En
|
|
18811
|
+
* large las filas del panel miden 44 y Cancelar/Aplicar van en large.
|
|
18812
|
+
*/
|
|
18775
18813
|
size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
18814
|
+
/** sui-form-label no tiene large: el label queda en medium. */
|
|
18815
|
+
labelSize = computed(() => this.size() === 'small' ? 'small' : 'medium', ...(ngDevMode ? [{ debugName: "labelSize" }] : /* istanbul ignore next */ []));
|
|
18816
|
+
/** Botones del footer: large (48) con el campo large; small (36) si no. */
|
|
18817
|
+
footerButtonSize = computed(() => this.size() === 'large' ? 'large' : 'small', ...(ngDevMode ? [{ debugName: "footerButtonSize" }] : /* istanbul ignore next */ []));
|
|
18776
18818
|
/** Formato de display: '12h' (AM/PM) o '24h'. */
|
|
18777
18819
|
format = input('12h', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
18778
18820
|
/** Incremento de minutos de la lista (1, 5, 15, ...). Default 5. */
|
|
@@ -19034,7 +19076,7 @@ class SuiTimePicker {
|
|
|
19034
19076
|
useExisting: forwardRef(() => SuiTimePicker),
|
|
19035
19077
|
multi: true,
|
|
19036
19078
|
},
|
|
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 });
|
|
19079
|
+
], 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:12px}@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: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 });
|
|
19038
19080
|
}
|
|
19039
19081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTimePicker, decorators: [{
|
|
19040
19082
|
type: Component,
|
|
@@ -19060,7 +19102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
19060
19102
|
'[attr.data-sui-open]': 'open() ? "" : null',
|
|
19061
19103
|
'[attr.data-sui-format]': 'format()',
|
|
19062
19104
|
'[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]=\"
|
|
19105
|
+
}, 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:12px}@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: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"] }]
|
|
19064
19106
|
}], 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
19107
|
|
|
19066
19108
|
/**
|
|
@@ -19475,14 +19517,14 @@ class SuiToastOutlet {
|
|
|
19475
19517
|
this.observedSlots.clear();
|
|
19476
19518
|
}
|
|
19477
19519
|
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 });
|
|
19520
|
+
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
19521
|
}
|
|
19480
19522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiToastOutlet, decorators: [{
|
|
19481
19523
|
type: Component,
|
|
19482
19524
|
args: [{ selector: 'sui-toast-outlet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiAlert, SuiLinkButton, SuiCompactButton], host: {
|
|
19483
19525
|
'[style.--sui-toast-bottom-offset.px]': 'liquidTabOffset()',
|
|
19484
19526
|
'[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"] }]
|
|
19527
|
+
}, 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
19528
|
}], propDecorators: { slotRefs: [{ type: i0.ViewChildren, args: ['slot', { isSignal: true }] }] } });
|
|
19487
19529
|
|
|
19488
19530
|
/**
|
|
@@ -19827,5 +19869,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
19827
19869
|
* Generated bundle index. Do not edit.
|
|
19828
19870
|
*/
|
|
19829
19871
|
|
|
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 };
|
|
19872
|
+
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
19873
|
//# sourceMappingURL=ajuarezso-sui-design-system.mjs.map
|