@ajuarezso/sui-design-system 0.7.9 → 0.7.10
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
|
|
@@ -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
|
/**
|
|
@@ -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
|