@ajuarezso/sui-design-system 0.7.9 → 0.7.11
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, model, signal, viewChild, effect, untracked, output,
|
|
2
|
+
import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, viewChildren, afterNextRender, ContentChildren, ViewChildren, Injectable } from '@angular/core';
|
|
3
3
|
import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgOptimizedImage } from '@angular/common';
|
|
4
4
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
5
|
import { Subscription } from 'rxjs';
|
|
@@ -161,6 +161,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
161
161
|
}, template: "@if (showsDot()) {\n <span class=\"sui-badge__dot\" aria-hidden=\"true\"></span>\n}\n<ng-content select=\"[data-slot=start]\"></ng-content>\n<span class=\"sui-badge__label\"><ng-content></ng-content></span>\n<ng-content select=\"[data-slot=end]\"></ng-content>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-full);font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;white-space:nowrap;vertical-align:middle;overflow:clip;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}.sui-badge__label{display:inline-flex;align-items:center}:host ::ng-deep [data-slot=start],:host ::ng-deep [data-slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sui-badge__dot{display:block;flex-shrink:0;width:16px;height:16px;background-image:radial-gradient(circle at center,currentColor 0,currentColor 2px,transparent 2.5px)}:host([data-sui-size=small]){height:16px}:host([data-sui-size=small]) ::ng-deep [data-slot=start],:host([data-sui-size=small]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-xs);height:var(--sui-icon-size-xs)}:host([data-sui-size=medium]){height:20px;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);text-transform:none}:host([data-sui-size=medium]) ::ng-deep [data-slot=start],:host([data-sui-size=medium]) ::ng-deep [data-slot=end]{width:var(--sui-icon-size-sm);height:var(--sui-icon-size-sm)}:host([data-sui-type=basic]){padding:2px 8px;gap:0}:host([data-sui-type=left-icon]){padding:2px 8px 2px 4px;gap:2px}:host([data-sui-type=right-icon]){padding:2px 4px 2px 8px;gap:2px}:host([data-sui-size=small][data-sui-type=with-dot]){padding:0 8px 0 0;gap:0}:host([data-sui-size=medium][data-sui-type=with-dot]){padding:2px 8px 2px 2px;gap:0}:host([data-sui-type=number]){gap:0;padding:0 4px;justify-content:center}:host([data-sui-type=number]) .sui-badge__label{display:inline-block;text-align:center}:host([data-sui-type=number][data-sui-size=small]){height:16px;min-width:16px}:host([data-sui-type=number][data-sui-size=medium]){height:20px;min-width:20px}:host([data-sui-color=gray][data-sui-variant=filled]){background:var(--sui-state-faded-base);border-color:var(--sui-state-faded-base);color:var(--sui-static-white)}:host([data-sui-color=gray][data-sui-variant=light]){background:var(--sui-state-faded-light);border-color:transparent;color:var(--sui-state-faded-dark)}:host([data-sui-color=gray][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-faded-base);color:var(--sui-state-faded-base)}:host([data-sui-color=gray][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-faded-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-faded-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=filled]){background:var(--sui-state-information-base);border-color:var(--sui-state-information-base);color:var(--sui-static-white)}:host([data-sui-color=blue][data-sui-variant=light]){background:var(--sui-state-information-light);border-color:transparent;color:var(--sui-state-information-dark)}:host([data-sui-color=blue][data-sui-variant=lighter]){background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-information-base);color:var(--sui-state-information-base)}:host([data-sui-color=blue][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-information-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-information-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=filled]){background:var(--sui-state-warning-base);border-color:var(--sui-state-warning-base);color:var(--sui-static-white)}:host([data-sui-color=orange][data-sui-variant=light]){background:var(--sui-state-warning-light);border-color:transparent;color:var(--sui-state-warning-dark)}:host([data-sui-color=orange][data-sui-variant=lighter]){background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-warning-base);color:var(--sui-state-warning-base)}:host([data-sui-color=orange][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-warning-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-warning-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=filled]){background:var(--sui-state-error-base);border-color:var(--sui-state-error-base);color:var(--sui-static-white)}:host([data-sui-color=red][data-sui-variant=light]){background:var(--sui-state-error-light);border-color:transparent;color:var(--sui-state-error-dark)}:host([data-sui-color=red][data-sui-variant=lighter]){background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-error-base);color:var(--sui-state-error-base)}:host([data-sui-color=red][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-error-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-error-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=filled]){background:var(--sui-state-success-base);border-color:var(--sui-state-success-base);color:var(--sui-static-white)}:host([data-sui-color=green][data-sui-variant=light]){background:var(--sui-state-success-light);border-color:transparent;color:var(--sui-state-success-dark)}:host([data-sui-color=green][data-sui-variant=lighter]){background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-success-base);color:var(--sui-state-success-base)}:host([data-sui-color=green][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-success-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-success-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=filled]){background:var(--sui-state-away-base);border-color:var(--sui-state-away-base);color:var(--sui-static-white)}:host([data-sui-color=yellow][data-sui-variant=light]){background:var(--sui-state-away-light);border-color:transparent;color:var(--sui-state-away-dark)}:host([data-sui-color=yellow][data-sui-variant=lighter]){background:var(--sui-state-away-lighter);border-color:transparent;color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-away-base);color:var(--sui-state-away-base)}:host([data-sui-color=yellow][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-away-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-away-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=filled]){background:var(--sui-state-feature-base);border-color:var(--sui-state-feature-base);color:var(--sui-static-white)}:host([data-sui-color=purple][data-sui-variant=light]){background:var(--sui-state-feature-light);border-color:transparent;color:var(--sui-state-feature-dark)}:host([data-sui-color=purple][data-sui-variant=lighter]){background:var(--sui-state-feature-lighter);border-color:transparent;color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-feature-base);color:var(--sui-state-feature-base)}:host([data-sui-color=purple][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-feature-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-feature-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=filled]){background:var(--sui-state-verified-base);border-color:var(--sui-state-verified-base);color:var(--sui-static-white)}:host([data-sui-color=sky][data-sui-variant=light]){background:var(--sui-state-verified-light);border-color:transparent;color:var(--sui-state-verified-dark)}:host([data-sui-color=sky][data-sui-variant=lighter]){background:var(--sui-state-verified-lighter);border-color:transparent;color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-verified-base);color:var(--sui-state-verified-base)}:host([data-sui-color=sky][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-verified-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-verified-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=filled]){background:var(--sui-state-highlighted-base);border-color:var(--sui-state-highlighted-base);color:var(--sui-static-white)}:host([data-sui-color=pink][data-sui-variant=light]){background:var(--sui-state-highlighted-light);border-color:transparent;color:var(--sui-state-highlighted-dark)}:host([data-sui-color=pink][data-sui-variant=lighter]){background:var(--sui-state-highlighted-lighter);border-color:transparent;color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-highlighted-base);color:var(--sui-state-highlighted-base)}:host([data-sui-color=pink][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-highlighted-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-highlighted-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=filled]){background:var(--sui-state-stable-base);border-color:var(--sui-state-stable-base);color:var(--sui-static-white)}:host([data-sui-color=teal][data-sui-variant=light]){background:var(--sui-state-stable-light);border-color:transparent;color:var(--sui-state-stable-dark)}:host([data-sui-color=teal][data-sui-variant=lighter]){background:var(--sui-state-stable-lighter);border-color:transparent;color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-state-stable-base);color:var(--sui-state-stable-base)}:host([data-sui-color=teal][data-sui-variant=dark]){background:color-mix(in srgb,var(--sui-state-stable-base) 22%,transparent);border-color:color-mix(in srgb,var(--sui-state-stable-base) 45%,transparent);color:var(--sui-static-white)}:host([data-sui-variant=dark]:not([data-sui-color])),:host([data-sui-variant=dark][data-sui-color=gray]){background:#ffffff1a;border-color:#ffffff29;color:var(--sui-static-white)}:host([data-sui-disabled]){pointer-events:none;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=filled]){background:var(--sui-state-faded-light);border-color:var(--sui-state-faded-light);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=light]),:host([data-sui-disabled][data-sui-variant=lighter]){background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=stroke]){background:transparent;border-color:var(--sui-stroke-soft-200);color:var(--sui-text-disabled-300)}:host([data-sui-disabled][data-sui-variant=dark]){background:#ffffff0f;border-color:#ffffff1a;color:#ffffff73}\n"] }]
|
|
162
162
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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 }] }] } });
|
|
163
163
|
|
|
164
|
+
/**
|
|
165
|
+
* Marca el body del accordion como template para LAZY REAL.
|
|
166
|
+
*
|
|
167
|
+
* GOTCHA Angular que motiva esta directiva: envolver `<ng-content>` en un
|
|
168
|
+
* `@if` NO evita que el contenido proyectado se INSTANCIE — el padre crea los
|
|
169
|
+
* componentes igual (constructores, change detection, side-effects de
|
|
170
|
+
* ngOnInit) aunque nunca se adjunten al DOM. Con N accordions pesados
|
|
171
|
+
* (master-preview ~85) eso construye TODO al cargar la página.
|
|
172
|
+
*
|
|
173
|
+
* Con `<ng-template suiAccordionContent>` el contenido recién se instancia
|
|
174
|
+
* cuando el accordion abre por primera vez (ngTemplateOutlet):
|
|
175
|
+
*
|
|
176
|
+
* <sui-accordion title="..." [lazy]="true">
|
|
177
|
+
* <ng-template suiAccordionContent>
|
|
178
|
+
* <heavy-component />
|
|
179
|
+
* </ng-template>
|
|
180
|
+
* </sui-accordion>
|
|
181
|
+
*
|
|
182
|
+
* Sin la directiva, el contenido proyectado plano sigue funcionando como
|
|
183
|
+
* antes (semi-lazy: DOM diferido, instanciación eager).
|
|
184
|
+
*/
|
|
185
|
+
class SuiAccordionContent {
|
|
186
|
+
templateRef = inject(TemplateRef);
|
|
187
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiAccordionContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
188
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: SuiAccordionContent, isStandalone: true, selector: "ng-template[suiAccordionContent]", ngImport: i0 });
|
|
189
|
+
}
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiAccordionContent, decorators: [{
|
|
191
|
+
type: Directive,
|
|
192
|
+
args: [{ selector: 'ng-template[suiAccordionContent]' }]
|
|
193
|
+
}] });
|
|
164
194
|
/**
|
|
165
195
|
* SUI Accordion — SUI Design System 2.0
|
|
166
196
|
*
|
|
@@ -316,6 +346,8 @@ class SuiAccordion {
|
|
|
316
346
|
*/
|
|
317
347
|
_resolvedOpen = signal(false, ...(ngDevMode ? [{ debugName: "_resolvedOpen" }] : /* istanbul ignore next */ []));
|
|
318
348
|
/** Computed que decide si renderizar el contenido proyectado. */
|
|
349
|
+
/** Template lazy-real (opcional) — ver JSDoc de SuiAccordionContent. */
|
|
350
|
+
contentTpl = contentChild(SuiAccordionContent, ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
|
|
319
351
|
shouldRenderContent = computed(() => !this.lazy() || this._hasBeenOpened(), ...(ngDevMode ? [{ debugName: "shouldRenderContent" }] : /* istanbul ignore next */ []));
|
|
320
352
|
/**
|
|
321
353
|
* Posición del toggle.
|
|
@@ -468,11 +500,11 @@ class SuiAccordion {
|
|
|
468
500
|
this.open.set(!this.open());
|
|
469
501
|
}
|
|
470
502
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiAccordion, isStandalone: true, selector: "sui-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, flipIcon: { classPropertyName: "flipIcon", publicName: "flipIcon", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-state": "state()", "attr.data-sui-flip-icon": "flipIcon()" } }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-accordion__trigger\"\n [attr.aria-expanded]=\"_resolvedOpen() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (flipIcon() === 'on') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n } @else if (leftIconName(); as leftIconResolved) {\n <span class=\"sui-accordion__icon sui-accordion__icon--left\" aria-hidden=\"true\">\n <sui-icon [name]=\"leftIconResolved\" [size]=\"20\" />\n </span>\n }\n\n <span class=\"sui-accordion__text\">\n @if (badgeCfg(); as bcfg) {\n <span class=\"sui-accordion__title-row\">\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n <sui-badge\n class=\"sui-accordion__badge\"\n [color]=\"bcfg.color ?? 'green'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n </span>\n } @else {\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n }\n @if (description()) {\n <!-- desc-wrap anima la aparici\u00F3n con grid-template-rows 0fr\u21921fr (CSS-only,\n estable en WKWebView). Vive en el __text \u2192 alineada con el t\u00EDtulo.\n aria-hidden cuando cerrado: la oculta del screen reader sin frenar la\n animaci\u00F3n visual (sigue en el DOM para poder animar su altura). -->\n <span\n class=\"sui-accordion__desc-wrap\"\n [attr.aria-hidden]=\"_resolvedOpen() ? null : 'true'\"\n >\n <span class=\"sui-accordion__description\">{{ description() }}</span>\n </span>\n }\n </span>\n\n @if (flipIcon() === 'off') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n }\n</button>\n\n<div\n #body\n class=\"sui-accordion__body\"\n role=\"region\"\n [attr.aria-labelledby]=\"titleId\"\n [attr.data-state]=\"_resolvedOpen() ? 'open' : 'closed'\"\n [attr.aria-hidden]=\"_resolvedOpen() ? 'false' : 'true'\"\n>\n @if (shouldRenderContent()) {\n <div #inner class=\"sui-accordion__body-inner\">\n <ng-content select=\"[sui-accordion-body]\" />\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-10);overflow:hidden;background:var(--sui-bg-white-0);transition:background-color .28s cubic-bezier(.32,.72,0,1),border-color .28s cubic-bezier(.32,.72,0,1),box-shadow .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=default]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-state=default]):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-state=active]){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-accordion__trigger{appearance:none;border:none;background:transparent;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;width:100%;align-items:flex-start;gap:10px;padding:14px;box-sizing:border-box;transition:background-color .28s cubic-bezier(.32,.72,0,1)}.sui-accordion__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, #171717);outline-offset:2px}.sui-accordion__trigger:active{transform:none}.sui-accordion__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-icon-sub-600);overflow:hidden}.sui-accordion__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:0}.sui-accordion__title{font-family:inherit;font-weight:500;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__title-row{display:flex;align-items:center;gap:8px;min-width:0}.sui-accordion__badge{flex:0 0 auto}.sui-accordion__desc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.32,.72,0,1),padding-top .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=active]) .sui-accordion__desc-wrap{grid-template-rows:1fr;padding-top:6px;transition:grid-template-rows .28s cubic-bezier(.65,0,.35,1),padding-top .28s cubic-bezier(.65,0,.35,1)}.sui-accordion__description{overflow:hidden;min-height:0;font-family:inherit;font-weight:400;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__body{overflow:hidden;height:0;background:transparent}.sui-accordion__body[data-state=open]{animation:sui-accordion-down .28s cubic-bezier(.65,0,.35,1) forwards}.sui-accordion__body[data-state=closed]{animation:sui-accordion-up .28s cubic-bezier(.32,.72,0,1) forwards}@keyframes sui-accordion-down{0%{height:0}to{height:var(--sui-accordion-content-height, 0)}}@keyframes sui-accordion-up{0%{height:var(--sui-accordion-content-height, 0)}to{height:0}}.sui-accordion__body-inner{padding:0 14px 14px}.sui-accordion__body-inner:empty{padding:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
503
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiAccordion, isStandalone: true, selector: "sui-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, flipIcon: { classPropertyName: "flipIcon", publicName: "flipIcon", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.title": "null", "attr.data-sui-state": "state()", "attr.data-sui-flip-icon": "flipIcon()" } }, queries: [{ propertyName: "contentTpl", first: true, predicate: SuiAccordionContent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "innerRef", first: true, predicate: ["inner"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-accordion__trigger\"\n [attr.aria-expanded]=\"_resolvedOpen() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (flipIcon() === 'on') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n } @else if (leftIconName(); as leftIconResolved) {\n <span class=\"sui-accordion__icon sui-accordion__icon--left\" aria-hidden=\"true\">\n <sui-icon [name]=\"leftIconResolved\" [size]=\"20\" />\n </span>\n }\n\n <span class=\"sui-accordion__text\">\n @if (badgeCfg(); as bcfg) {\n <span class=\"sui-accordion__title-row\">\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n <sui-badge\n class=\"sui-accordion__badge\"\n [color]=\"bcfg.color ?? 'green'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n </span>\n } @else {\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n }\n @if (description()) {\n <!-- desc-wrap anima la aparici\u00F3n con grid-template-rows 0fr\u21921fr (CSS-only,\n estable en WKWebView). Vive en el __text \u2192 alineada con el t\u00EDtulo.\n aria-hidden cuando cerrado: la oculta del screen reader sin frenar la\n animaci\u00F3n visual (sigue en el DOM para poder animar su altura). -->\n <span\n class=\"sui-accordion__desc-wrap\"\n [attr.aria-hidden]=\"_resolvedOpen() ? null : 'true'\"\n >\n <span class=\"sui-accordion__description\">{{ description() }}</span>\n </span>\n }\n </span>\n\n @if (flipIcon() === 'off') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n }\n</button>\n\n<div\n #body\n class=\"sui-accordion__body\"\n role=\"region\"\n [attr.aria-labelledby]=\"titleId\"\n [attr.data-state]=\"_resolvedOpen() ? 'open' : 'closed'\"\n [attr.aria-hidden]=\"_resolvedOpen() ? 'false' : 'true'\"\n>\n @if (shouldRenderContent()) {\n <div #inner class=\"sui-accordion__body-inner\">\n @if (contentTpl(); as tpl) {\n <!-- Lazy REAL: el template se instancia reci\u00E9n ac\u00E1 (primer open). -->\n <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" />\n }\n <ng-content select=\"[sui-accordion-body]\" />\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-10);overflow:hidden;background:var(--sui-bg-white-0);transition:background-color .28s cubic-bezier(.32,.72,0,1),border-color .28s cubic-bezier(.32,.72,0,1),box-shadow .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=default]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-state=default]):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-state=active]){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-accordion__trigger{appearance:none;border:none;background:transparent;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;width:100%;align-items:flex-start;gap:10px;padding:14px;box-sizing:border-box;transition:background-color .28s cubic-bezier(.32,.72,0,1)}.sui-accordion__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, #171717);outline-offset:2px}.sui-accordion__trigger:active{transform:none}.sui-accordion__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-icon-sub-600);overflow:hidden}.sui-accordion__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:0}.sui-accordion__title{font-family:inherit;font-weight:500;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__title-row{display:flex;align-items:center;gap:8px;min-width:0}.sui-accordion__badge{flex:0 0 auto}.sui-accordion__desc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.32,.72,0,1),padding-top .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=active]) .sui-accordion__desc-wrap{grid-template-rows:1fr;padding-top:6px;transition:grid-template-rows .28s cubic-bezier(.65,0,.35,1),padding-top .28s cubic-bezier(.65,0,.35,1)}.sui-accordion__description{overflow:hidden;min-height:0;font-family:inherit;font-weight:400;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__body{overflow:hidden;height:0;background:transparent}.sui-accordion__body[data-state=open]{animation:sui-accordion-down .28s cubic-bezier(.65,0,.35,1) forwards}.sui-accordion__body[data-state=closed]{animation:sui-accordion-up .28s cubic-bezier(.32,.72,0,1) forwards}@keyframes sui-accordion-down{0%{height:0}to{height:var(--sui-accordion-content-height, 0)}}@keyframes sui-accordion-up{0%{height:var(--sui-accordion-content-height, 0)}to{height:0}}.sui-accordion__body-inner{padding:0 14px 14px}.sui-accordion__body-inner:empty{padding:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
472
504
|
}
|
|
473
505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiAccordion, decorators: [{
|
|
474
506
|
type: Component,
|
|
475
|
-
args: [{ selector: 'sui-accordion', standalone: true, imports: [SuiIcon, SuiBadge], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
507
|
+
args: [{ selector: 'sui-accordion', standalone: true, imports: [SuiIcon, SuiBadge, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
476
508
|
/* Strip native `title` attr para evitar tooltip nativo gris del browser.
|
|
477
509
|
Patrón canon Ontop — ver CLAUDE.md regla "Input `title` en SUI". */
|
|
478
510
|
'[attr.title]': 'null',
|
|
@@ -483,8 +515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
483
515
|
per ARIA 1.2 aria-expanded solo es semánticamente válido en roles
|
|
484
516
|
interactivos (button, combobox, tree...). El estado del host se expone
|
|
485
517
|
vía `data-sui-state` (default | active) para selectores CSS/JS. */
|
|
486
|
-
}, template: "<button\n type=\"button\"\n class=\"sui-accordion__trigger\"\n [attr.aria-expanded]=\"_resolvedOpen() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (flipIcon() === 'on') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n } @else if (leftIconName(); as leftIconResolved) {\n <span class=\"sui-accordion__icon sui-accordion__icon--left\" aria-hidden=\"true\">\n <sui-icon [name]=\"leftIconResolved\" [size]=\"20\" />\n </span>\n }\n\n <span class=\"sui-accordion__text\">\n @if (badgeCfg(); as bcfg) {\n <span class=\"sui-accordion__title-row\">\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n <sui-badge\n class=\"sui-accordion__badge\"\n [color]=\"bcfg.color ?? 'green'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n </span>\n } @else {\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n }\n @if (description()) {\n <!-- desc-wrap anima la aparici\u00F3n con grid-template-rows 0fr\u21921fr (CSS-only,\n estable en WKWebView). Vive en el __text \u2192 alineada con el t\u00EDtulo.\n aria-hidden cuando cerrado: la oculta del screen reader sin frenar la\n animaci\u00F3n visual (sigue en el DOM para poder animar su altura). -->\n <span\n class=\"sui-accordion__desc-wrap\"\n [attr.aria-hidden]=\"_resolvedOpen() ? null : 'true'\"\n >\n <span class=\"sui-accordion__description\">{{ description() }}</span>\n </span>\n }\n </span>\n\n @if (flipIcon() === 'off') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n }\n</button>\n\n<div\n #body\n class=\"sui-accordion__body\"\n role=\"region\"\n [attr.aria-labelledby]=\"titleId\"\n [attr.data-state]=\"_resolvedOpen() ? 'open' : 'closed'\"\n [attr.aria-hidden]=\"_resolvedOpen() ? 'false' : 'true'\"\n>\n @if (shouldRenderContent()) {\n <div #inner class=\"sui-accordion__body-inner\">\n <ng-content select=\"[sui-accordion-body]\" />\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-10);overflow:hidden;background:var(--sui-bg-white-0);transition:background-color .28s cubic-bezier(.32,.72,0,1),border-color .28s cubic-bezier(.32,.72,0,1),box-shadow .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=default]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-state=default]):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-state=active]){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-accordion__trigger{appearance:none;border:none;background:transparent;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;width:100%;align-items:flex-start;gap:10px;padding:14px;box-sizing:border-box;transition:background-color .28s cubic-bezier(.32,.72,0,1)}.sui-accordion__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, #171717);outline-offset:2px}.sui-accordion__trigger:active{transform:none}.sui-accordion__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-icon-sub-600);overflow:hidden}.sui-accordion__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:0}.sui-accordion__title{font-family:inherit;font-weight:500;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__title-row{display:flex;align-items:center;gap:8px;min-width:0}.sui-accordion__badge{flex:0 0 auto}.sui-accordion__desc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.32,.72,0,1),padding-top .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=active]) .sui-accordion__desc-wrap{grid-template-rows:1fr;padding-top:6px;transition:grid-template-rows .28s cubic-bezier(.65,0,.35,1),padding-top .28s cubic-bezier(.65,0,.35,1)}.sui-accordion__description{overflow:hidden;min-height:0;font-family:inherit;font-weight:400;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__body{overflow:hidden;height:0;background:transparent}.sui-accordion__body[data-state=open]{animation:sui-accordion-down .28s cubic-bezier(.65,0,.35,1) forwards}.sui-accordion__body[data-state=closed]{animation:sui-accordion-up .28s cubic-bezier(.32,.72,0,1) forwards}@keyframes sui-accordion-down{0%{height:0}to{height:var(--sui-accordion-content-height, 0)}}@keyframes sui-accordion-up{0%{height:var(--sui-accordion-content-height, 0)}to{height:0}}.sui-accordion__body-inner{padding:0 14px 14px}.sui-accordion__body-inner:empty{padding:0}\n"] }]
|
|
487
|
-
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], flipIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipIcon", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], innerRef: [{ type: i0.ViewChild, args: ['inner', { isSignal: true }] }] } });
|
|
518
|
+
}, template: "<button\n type=\"button\"\n class=\"sui-accordion__trigger\"\n [attr.aria-expanded]=\"_resolvedOpen() ? 'true' : 'false'\"\n (click)=\"toggle()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n @if (flipIcon() === 'on') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n } @else if (leftIconName(); as leftIconResolved) {\n <span class=\"sui-accordion__icon sui-accordion__icon--left\" aria-hidden=\"true\">\n <sui-icon [name]=\"leftIconResolved\" [size]=\"20\" />\n </span>\n }\n\n <span class=\"sui-accordion__text\">\n @if (badgeCfg(); as bcfg) {\n <span class=\"sui-accordion__title-row\">\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n <sui-badge\n class=\"sui-accordion__badge\"\n [color]=\"bcfg.color ?? 'green'\"\n [variant]=\"bcfg.variant ?? 'lighter'\"\n [size]=\"bcfg.size ?? 'small'\"\n >{{ bcfg.label }}</sui-badge>\n </span>\n } @else {\n <span class=\"sui-accordion__title\" [id]=\"titleId\">{{ title() }}</span>\n }\n @if (description()) {\n <!-- desc-wrap anima la aparici\u00F3n con grid-template-rows 0fr\u21921fr (CSS-only,\n estable en WKWebView). Vive en el __text \u2192 alineada con el t\u00EDtulo.\n aria-hidden cuando cerrado: la oculta del screen reader sin frenar la\n animaci\u00F3n visual (sigue en el DOM para poder animar su altura). -->\n <span\n class=\"sui-accordion__desc-wrap\"\n [attr.aria-hidden]=\"_resolvedOpen() ? null : 'true'\"\n >\n <span class=\"sui-accordion__description\">{{ description() }}</span>\n </span>\n }\n </span>\n\n @if (flipIcon() === 'off') {\n <span class=\"sui-accordion__icon sui-accordion__icon--toggle\" aria-hidden=\"true\">\n <sui-icon [name]=\"toggleIconName()\" [size]=\"20\" />\n </span>\n }\n</button>\n\n<div\n #body\n class=\"sui-accordion__body\"\n role=\"region\"\n [attr.aria-labelledby]=\"titleId\"\n [attr.data-state]=\"_resolvedOpen() ? 'open' : 'closed'\"\n [attr.aria-hidden]=\"_resolvedOpen() ? 'false' : 'true'\"\n>\n @if (shouldRenderContent()) {\n <div #inner class=\"sui-accordion__body-inner\">\n @if (contentTpl(); as tpl) {\n <!-- Lazy REAL: el template se instancia reci\u00E9n ac\u00E1 (primer open). -->\n <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" />\n }\n <ng-content select=\"[sui-accordion-body]\" />\n <ng-content />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-radius-10);overflow:hidden;background:var(--sui-bg-white-0);transition:background-color .28s cubic-bezier(.32,.72,0,1),border-color .28s cubic-bezier(.32,.72,0,1),box-shadow .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=default]){background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}:host([data-sui-state=default]):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}:host([data-sui-state=active]){background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-accordion__trigger{appearance:none;border:none;background:transparent;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;width:100%;align-items:flex-start;gap:10px;padding:14px;box-sizing:border-box;transition:background-color .28s cubic-bezier(.32,.72,0,1)}.sui-accordion__trigger:focus-visible{outline:2px solid var(--sui-stroke-strong-950, #171717);outline-offset:2px}.sui-accordion__trigger:active{transform:none}.sui-accordion__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-icon-sub-600);overflow:hidden}.sui-accordion__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:0}.sui-accordion__title{font-family:inherit;font-weight:500;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-strong-950);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__title-row{display:flex;align-items:center;gap:8px;min-width:0}.sui-accordion__badge{flex:0 0 auto}.sui-accordion__desc-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.32,.72,0,1),padding-top .28s cubic-bezier(.32,.72,0,1)}:host([data-sui-state=active]) .sui-accordion__desc-wrap{grid-template-rows:1fr;padding-top:6px;transition:grid-template-rows .28s cubic-bezier(.65,0,.35,1),padding-top .28s cubic-bezier(.65,0,.35,1)}.sui-accordion__description{overflow:hidden;min-height:0;font-family:inherit;font-weight:400;font-size:14px;line-height:20px;letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-accordion__body{overflow:hidden;height:0;background:transparent}.sui-accordion__body[data-state=open]{animation:sui-accordion-down .28s cubic-bezier(.65,0,.35,1) forwards}.sui-accordion__body[data-state=closed]{animation:sui-accordion-up .28s cubic-bezier(.32,.72,0,1) forwards}@keyframes sui-accordion-down{0%{height:0}to{height:var(--sui-accordion-content-height, 0)}}@keyframes sui-accordion-up{0%{height:var(--sui-accordion-content-height, 0)}to{height:0}}.sui-accordion__body-inner{padding:0 14px 14px}.sui-accordion__body-inner:empty{padding:0}\n"] }]
|
|
519
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SuiAccordionContent), { isSignal: true }] }], flipIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipIcon", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], innerRef: [{ type: i0.ViewChild, args: ['inner', { isSignal: true }] }] } });
|
|
488
520
|
|
|
489
521
|
const TOP_BADGE_GLYPH = {
|
|
490
522
|
// `verified` se renderiza como SEAL escalopado (SVG real de Figma, ver
|
|
@@ -11131,7 +11163,7 @@ class SuiModal {
|
|
|
11131
11163
|
container?.focus({ preventScroll: true });
|
|
11132
11164
|
}
|
|
11133
11165
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "fullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;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);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:28px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\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"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11166
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "fullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;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);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:28px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\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"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11135
11167
|
}
|
|
11136
11168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, decorators: [{
|
|
11137
11169
|
type: Component,
|
|
@@ -11140,7 +11172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11140
11172
|
'[attr.title]': 'null',
|
|
11141
11173
|
'[attr.data-sui-modal-open]': 'open() ? "" : null',
|
|
11142
11174
|
'[attr.data-sui-modal-fullscreen]': 'fullscreen() ? "" : null',
|
|
11143
|
-
}, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;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);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:28px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
|
|
11175
|
+
}, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;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);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:28px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
|
|
11144
11176
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], statusAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAlignment", required: false }] }], backdropBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBlur", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], containerRef: [{
|
|
11145
11177
|
type: ViewChild,
|
|
11146
11178
|
args: ['container']
|
|
@@ -12038,11 +12070,11 @@ class SuiPopover {
|
|
|
12038
12070
|
return Array.from({ length: Math.max(1, total) }, (_v, i) => i + 1 === current);
|
|
12039
12071
|
}, ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
|
|
12040
12072
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12041
|
-
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 <button\n type=\"button\"\n class=\"sui-popover__dismiss\"\n aria-label=\"Cerrar\"\n (click)=\"dismissed.emit()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\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 <div class=\"sui-popover__actions\">\n @if (doubleButton()) {\n <button\n type=\"button\"\n class=\"sui-popover__btn sui-popover__btn--back\"\n (click)=\"back.emit()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <!-- Text-wrapper px-4 (Figma Buttons [1.1] node 4456:83185 > Text):\n 8px del bot\u00F3n + 4px del wrapper = 12px efectivos a cada lado. -->\n <span class=\"sui-popover__btn-text\">{{ backLabel() }}</span>\n </button>\n }\n <button\n type=\"button\"\n class=\"sui-popover__btn sui-popover__btn--next\"\n (click)=\"next.emit()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-popover__btn-text\">{{ nextLabel() }}</span>\n </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{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;padding:8px;margin:0;border:1px solid transparent;border-radius:var(--sui-radius-8);cursor:pointer;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;transition:background var(--sui-motion-duration-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-fast) var(--sui-motion-ease-out)}.sui-popover__btn-text{display:inline-flex;align-items:center;justify-content:center;padding:0 4px}.sui-popover__btn--back{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}.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{background:var(--sui-primary-base);border-color:var(--sui-primary-base);color:var(--sui-static-white)}.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}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12073
|
+
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 });
|
|
12042
12074
|
}
|
|
12043
12075
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPopover, decorators: [{
|
|
12044
12076
|
type: Component,
|
|
12045
|
-
args: [{ selector: 'sui-popover', standalone: true, imports: [SuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12077
|
+
args: [{ selector: 'sui-popover', standalone: true, imports: [SuiIcon, SuiButton, SuiCompactButton], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12046
12078
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). El input
|
|
12047
12079
|
`title` sigue accesible internamente; solo se borra del DOM para evitar el
|
|
12048
12080
|
tooltip nativo gris del browser. */
|
|
@@ -12057,7 +12089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
12057
12089
|
'[attr.data-sui-position]': 'position()',
|
|
12058
12090
|
'[attr.data-sui-footer]': 'footer()',
|
|
12059
12091
|
'[attr.data-sui-tail]': 'tail() ? "" : null',
|
|
12060
|
-
}, 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 <button\n type=\"button\"\n class=\"sui-popover__dismiss\"\n aria-label=\"Cerrar\"\n (click)=\"dismissed.emit()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <sui-icon name=\"close-line\" [size]=\"20\" />\n </button>\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 <div class=\"sui-popover__actions\">\n @if (doubleButton()) {\n <button\n type=\"button\"\n class=\"sui-popover__btn sui-popover__btn--back\"\n (click)=\"back.emit()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <!-- Text-wrapper px-4 (Figma Buttons [1.1] node 4456:83185 > Text):\n 8px del bot\u00F3n + 4px del wrapper = 12px efectivos a cada lado. -->\n <span class=\"sui-popover__btn-text\">{{ backLabel() }}</span>\n </button>\n }\n <button\n type=\"button\"\n class=\"sui-popover__btn sui-popover__btn--next\"\n (click)=\"next.emit()\"\n (touchstart)=\"$any($event.currentTarget)\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <span class=\"sui-popover__btn-text\">{{ nextLabel() }}</span>\n </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{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;padding:8px;margin:0;border:1px solid transparent;border-radius:var(--sui-radius-8);cursor:pointer;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;transition:background var(--sui-motion-duration-fast) var(--sui-motion-ease-out),border-color var(--sui-motion-duration-fast) var(--sui-motion-ease-out)}.sui-popover__btn-text{display:inline-flex;align-items:center;justify-content:center;padding:0 4px}.sui-popover__btn--back{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}.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{background:var(--sui-primary-base);border-color:var(--sui-primary-base);color:var(--sui-static-white)}.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}}\n"] }]
|
|
12092
|
+
}, 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"] }]
|
|
12061
12093
|
}], 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"] }] } });
|
|
12062
12094
|
|
|
12063
12095
|
/**
|
|
@@ -14778,11 +14810,11 @@ class SuiProductCard {
|
|
|
14778
14810
|
onInc(event) { event.stopPropagation(); this.increment.emit(); }
|
|
14779
14811
|
onDec(event) { event.stopPropagation(); this.decrement.emit(); }
|
|
14780
14812
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14781
|
-
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 } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement" }, ngImport: i0, template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\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 [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (imageCfg(); as img) {\n <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\" />\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 (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
|
|
14813
|
+
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 } }, outputs: { openDetail: "openDetail", add: "add", increment: "increment", decrement: "decrement" }, ngImport: i0, template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\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 [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (imageCfg(); as img) {\n <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\" />\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 (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__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--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}\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 });
|
|
14782
14814
|
}
|
|
14783
14815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiProductCard, decorators: [{
|
|
14784
14816
|
type: Component,
|
|
14785
|
-
args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\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 [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (imageCfg(); as img) {\n <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\" />\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 (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
|
|
14817
|
+
args: [{ selector: 'sui-product-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage, SuiIcon], template: "<button type=\"button\"\n class=\"product\"\n [class.product--unavailable]=\"!available()\"\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 [style.--fallback-color]=\"showNamedFallback() ? resolvedFallbackColor() : null\">\n @if (imageCfg(); as img) {\n <img [ngSrc]=\"img.url\" [alt]=\"name()\" fill\n [style.object-position]=\"'center ' + img.position + '%'\" />\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 (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__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--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}\n"] }]
|
|
14786
14818
|
}], 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 }] }], openDetail: [{ type: i0.Output, args: ["openDetail"] }], add: [{ type: i0.Output, args: ["add"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }] } });
|
|
14787
14819
|
|
|
14788
14820
|
/**
|
|
@@ -17643,5 +17675,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
17643
17675
|
* Generated bundle index. Do not edit.
|
|
17644
17676
|
*/
|
|
17645
17677
|
|
|
17646
|
-
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, 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, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, 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, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
17678
|
+
export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, 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, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, 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, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
|
|
17647
17679
|
//# sourceMappingURL=ajuarezso-sui-design-system.mjs.map
|