@ajuarezso/sui-design-system 0.14.3 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -11329,8 +11329,34 @@ 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
|
+
/** `fullscreen` ya resuelto: es lo que miran la plantilla y el host. */
|
|
11356
|
+
esFullscreen = computed(() => {
|
|
11357
|
+
const v = this.fullscreen();
|
|
11358
|
+
return v === 'auto' ? SuiModal.enApp() : v === true;
|
|
11359
|
+
}, ...(ngDevMode ? [{ debugName: "esFullscreen" }] : /* istanbul ignore next */ []));
|
|
11334
11360
|
/** Quita el padding del body para contenido full-bleed (mapas, imágenes
|
|
11335
11361
|
grandes). El consumer es responsable de su propio spacing interno. */
|
|
11336
11362
|
fullBody = input(false, ...(ngDevMode ? [{ debugName: "fullBody" }] : /* istanbul ignore next */ []));
|
|
@@ -11614,7 +11640,7 @@ class SuiModal {
|
|
|
11614
11640
|
container?.focus({ preventScroll: true });
|
|
11615
11641
|
}
|
|
11616
11642
|
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 });
|
|
11643
|
+
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
11644
|
}
|
|
11619
11645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, decorators: [{
|
|
11620
11646
|
type: Component,
|
|
@@ -11622,8 +11648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
11622
11648
|
/* Strip native `title` attr — patrón canon Ontop (ver CLAUDE.md). */
|
|
11623
11649
|
'[attr.title]': 'null',
|
|
11624
11650
|
'[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"] }]
|
|
11651
|
+
'[attr.data-sui-modal-fullscreen]': 'esFullscreen() ? "" : null',
|
|
11652
|
+
}, 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
11653
|
}], 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
11654
|
type: ViewChild,
|
|
11629
11655
|
args: ['container']
|