@ajuarezso/sui-design-system 0.14.3 → 0.15.1
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.
|
@@ -11329,8 +11329,42 @@ class SuiModal {
|
|
|
11329
11329
|
backdropBlur = input(true, ...(ngDevMode ? [{ debugName: "backdropBlur" }] : /* istanbul ignore next */ []));
|
|
11330
11330
|
/** Solo afecta en mobile (≤768px): el modal toma todo el ancho desde safe-area-top
|
|
11331
11331
|
hasta safe-area-bottom, deja el área superior visible (status bar respetado),
|
|
11332
|
-
y se eleva con el teclado. En desktop el modal funciona como `size` indica.
|
|
11333
|
-
|
|
11332
|
+
y se eleva con el teclado. En desktop el modal funciona como `size` indica.
|
|
11333
|
+
*
|
|
11334
|
+
* `'auto'` (default) resuelve por plataforma: **dentro de la app nativa va a
|
|
11335
|
+
* pantalla completa, en el navegador móvil queda centrado**. Es lo que
|
|
11336
|
+
* distingue a una app de una web abierta en el teléfono, y hacerlo acá evita
|
|
11337
|
+
* que cada pantalla tenga que acordarse — venía puesto a mano modal por
|
|
11338
|
+
* modal, y de 37 fullscreen de la app 28 se lo habían olvidado.
|
|
11339
|
+
*
|
|
11340
|
+
* `true` fuerza pantalla completa también en la web móvil; `false` la
|
|
11341
|
+
* desactiva siempre. Ese `false` explícito es para las confirmaciones de una
|
|
11342
|
+
* línea con dos botones («¿Cancelar pedido?»): ocupar toda la pantalla para
|
|
11343
|
+
* preguntar sí o no comunica que es un paso más grande de lo que es. */
|
|
11344
|
+
fullscreen = input('auto', ...(ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []));
|
|
11345
|
+
/** ¿Corre dentro de la app nativa? Se lee del DOM y NO del runtime de
|
|
11346
|
+
* Capacitor: el design system no puede depender de la app que lo usa. La
|
|
11347
|
+
* clase la pone el host al arrancar, y es el mismo marcador que este SCSS ya
|
|
11348
|
+
* usa para el safe-area de Android. */
|
|
11349
|
+
static enApp() {
|
|
11350
|
+
if (typeof document === 'undefined')
|
|
11351
|
+
return false;
|
|
11352
|
+
const c = document.documentElement.classList;
|
|
11353
|
+
return c.contains('platform-ios') || c.contains('platform-android');
|
|
11354
|
+
}
|
|
11355
|
+
/** Se lee al construir CADA modal y no dentro del computed: `enApp()` mira el
|
|
11356
|
+
* DOM y no es una señal, así que un `computed` la evaluaría una sola vez y se
|
|
11357
|
+
* quedaría con esa respuesta para siempre. Si el host marca la plataforma
|
|
11358
|
+
* después de ese primer render —o si el DS se evalúa antes que el arranque de
|
|
11359
|
+
* la app—, el modal quedaría centrado dentro de la app y nadie se enteraría.
|
|
11360
|
+
* Leerlo por instancia da la respuesta vigente cuando el modal nace, que es
|
|
11361
|
+
* cuando importa. */
|
|
11362
|
+
enAppAlNacer = SuiModal.enApp();
|
|
11363
|
+
/** `fullscreen` ya resuelto: es lo que miran la plantilla y el host. */
|
|
11364
|
+
esFullscreen = computed(() => {
|
|
11365
|
+
const v = this.fullscreen();
|
|
11366
|
+
return v === 'auto' ? this.enAppAlNacer : v === true;
|
|
11367
|
+
}, ...(ngDevMode ? [{ debugName: "esFullscreen" }] : /* istanbul ignore next */ []));
|
|
11334
11368
|
/** Quita el padding del body para contenido full-bleed (mapas, imágenes
|
|
11335
11369
|
grandes). El consumer es responsable de su propio spacing interno. */
|
|
11336
11370
|
fullBody = input(false, ...(ngDevMode ? [{ debugName: "fullBody" }] : /* istanbul ignore next */ []));
|
|
@@ -11614,7 +11648,7 @@ class SuiModal {
|
|
|
11614
11648
|
container?.focus({ preventScroll: true });
|
|
11615
11649
|
}
|
|
11616
11650
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11617
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "fullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11651
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "esFullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"esFullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11618
11652
|
}
|
|
11619
11653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, decorators: [{
|
|
11620
11654
|
type: Component,
|
|
@@ -11622,8 +11656,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11622
11656
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
|
|
11623
11657
|
'[attr.title]': 'null',
|
|
11624
11658
|
'[attr.data-sui-modal-open]': 'open() ? "" : null',
|
|
11625
|
-
'[attr.data-sui-modal-fullscreen]': '
|
|
11626
|
-
}, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
|
|
11659
|
+
'[attr.data-sui-modal-fullscreen]': 'esFullscreen() ? "" : null',
|
|
11660
|
+
}, template: "@if (open()) {\n <!-- Overlay backdrop -->\n <div\n class=\"sui-modal__backdrop\"\n [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n (click)=\"onBackdropClick()\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n\n <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n <div\n class=\"sui-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"title() ? titleId : null\"\n [attr.aria-describedby]=\"description() ? descId : null\"\n >\n <!-- Container \u2014 click stops propagation so it doesn't close.\n tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n <div\n #container\n class=\"sui-modal__container\"\n [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n [class.sui-modal__container--fullscreen]=\"esFullscreen()\"\n [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n [attr.data-sui-size]=\"size()\"\n tabindex=\"-1\"\n (click)=\"onContainerClick($event)\"\n >\n <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n Figma 466:4778). En modo Status el icono+texto viven en el body\n (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n @if (isStatus()) {\n @if (showClose()) {\n <sui-compact-button\n class=\"sui-modal__close-floating\"\n icon=\"close-line\"\n variantStyle=\"ghost\"\n size=\"large\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"close()\"\n />\n }\n } @else if (title() || showClose()) {\n <sui-modal-header\n class=\"sui-modal__header\"\n [title]=\"title() ?? ''\"\n [description]=\"description()\"\n [size]=\"description() ? 'medium' : 'small'\"\n [iconVariant]=\"iconVariant()\"\n [icon]=\"headerIcon()\"\n [showClose]=\"showClose()\"\n [titleId]=\"titleId\"\n [descriptionId]=\"descId\"\n (closed)=\"close()\"\n />\n }\n\n <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n <div #bodyEl\n class=\"sui-modal__body\"\n [class.sui-modal__body--full]=\"fullBody()\"\n [class.sui-modal__body--status]=\"isStatus()\">\n\n <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n centrado; horizontal (480:1366) = tile + texto en fila, alineado\n a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n @if (isStatus()) {\n <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n </div>\n @if (title() || description()) {\n <div class=\"sui-modal__status-text\">\n @if (title()) {\n <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n }\n @if (description()) {\n <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n }\n </div>\n }\n </div>\n }\n\n <ng-content />\n </div>\n\n <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n o markup custom. -->\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
|
|
11627
11661
|
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], statusAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAlignment", required: false }] }], backdropBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBlur", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], containerRef: [{
|
|
11628
11662
|
type: ViewChild,
|
|
11629
11663
|
args: ['container']
|