s4y-ui 5.0.0 → 5.0.1

package/fesm2022/s4y-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, InjectionToken, Injector } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
@@ -7,15 +7,14 @@ import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
 import { catchError, map, filter } from 'rxjs/operators';
-import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent } from 'rxjs';
+import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent, isObservable, firstValueFrom, ReplaySubject, take } from 'rxjs';
 import * as i1$3 from '@angular/cdk/scrolling';
 import { CdkScrollableModule, CdkScrollable } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
 import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { Dialog } from '@angular/cdk/dialog';
+import { TemplatePortal, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 
 class DashboardLayoutComponent {
     asideTemplate;
@@ -3333,30 +3332,292 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['document:mousedown', ['$event']]
             }] } });
 
+const DYNAMIC_DIALOG_DATA = new InjectionToken('DYNAMIC_DIALOG_DATA');
+const DYNAMIC_DIALOG_OPTIONS = new InjectionToken('DYNAMIC_DIALOG_OPTIONS');
+
+// dynamic-dialog.util.ts
+function isPromise(v) {
+    return v && typeof v.then === 'function';
+}
+function isEmitter(v) {
+    return v instanceof EventEmitter;
+}
+async function toMaybeBooleanPromise(value) {
+    if (isPromise(value))
+        return await value;
+    if (isObservable(value))
+        return await firstValueFrom(value);
+    if (isEmitter(value))
+        return await firstValueFrom(value);
+    return value;
+}
+
+class DynamicDialogRef {
+    overlayRef;
+    afterOpened$;
+    afterClosed$;
+    // Declare sem inicializar aqui
+    backdropClick$;
+    keydownEvents$;
+    _afterOpened = new ReplaySubject();
+    _afterClosed = new Subject();
+    panelEl;
+    isClosing = false;
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+        this.afterOpened$ = this._afterOpened.asObservable();
+        this.afterClosed$ = this._afterClosed.asObservable();
+        // Agora é seguro inicializar, pois overlayRef já foi recebido
+        this.backdropClick$ = this.overlayRef.backdropClick();
+        this.keydownEvents$ = this.overlayRef.keydownEvents();
+        this.panelEl = this.overlayRef.overlayElement;
+        // Fallbacks para detach/dispose externos
+        this.overlayRef.detachments().subscribe(() => {
+            if (!this._afterClosed.closed) {
+                this._afterClosed.next({ reason: 'detach' });
+                this._afterClosed.complete();
+            }
+        });
+        const originalDispose = this.overlayRef.dispose.bind(this.overlayRef);
+        this.overlayRef.dispose = () => {
+            if (!this._afterClosed.closed) {
+                this._afterClosed.next({ reason: 'dispose' });
+                this._afterClosed.complete();
+            }
+            originalDispose();
+        };
+    }
+    get backdropEl() {
+        // disponível após criar o backdrop
+        return this.overlayRef.backdropElement ?? null;
+    }
+    /** Chamado pelo service logo após anexar o container. */
+    _notifyOpened() {
+        if (!this._afterOpened.closed) {
+            this._afterOpened.next();
+            this._afterOpened.complete();
+        }
+    }
+    /** Fecha programaticamente com razão e (opcional) resultado. */
+    close(result, reason = 'close') {
+        if (!this._afterClosed.closed) {
+            this._afterClosed.next({ reason, result });
+            this._afterClosed.complete();
+        }
+        this.overlayRef.dispose();
+    }
+    async closeAnimated(result, reason = 'close', opts = {}) {
+        if (this.isClosing)
+            return;
+        this.isClosing = true;
+        const panelCls = opts.panelClass ?? 'fade-out';
+        const hideBackdropCls = opts.backdropHideClass ?? 'cdk-overlay-backdrop-showing';
+        const timeoutMs = opts.timeoutMs ?? 600;
+        // aciona animação do painel
+        this.panelEl.classList.add(panelCls);
+        // aciona transição do backdrop (remove a classe “showing”)
+        const bd = this.backdropEl;
+        if (bd && bd.classList.contains(hideBackdropCls)) {
+            bd.classList.remove(hideBackdropCls);
+        }
+        // espera animationend do painel ou timeout
+        await new Promise((resolve) => {
+            let done = false;
+            const finish = () => {
+                if (done)
+                    return;
+                done = true;
+                this.panelEl.removeEventListener('animationend', onAnimEnd);
+                clearTimeout(to);
+                resolve();
+            };
+            const onAnimEnd = (e) => {
+                if (e.target === this.panelEl)
+                    finish();
+            };
+            this.panelEl.addEventListener('animationend', onAnimEnd, { once: true });
+            const to = setTimeout(finish, timeoutMs);
+        });
+        // emite afterClosed e destrói
+        if (!this._afterClosed.closed) {
+            this._afterClosed.next({ reason, result });
+            this._afterClosed.complete();
+        }
+        this.overlayRef.dispose();
+    }
+}
+
 class DynamicDialogComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", ngImport: i0, template: "<div class=\"s4y-dialog\">\r\n  <header class=\"s4y-dialog-header\">\r\n    <h2 class=\"s4y-dialog-header__title\">titulo</h2>\r\n    <button role=\"button\">\r\n      <p>&times;</p>\r\n    </button>\r\n  </header>\r\n  <section class=\"s4y-dialog__body\">\r\n    <p>Conteudo principal aqui</p>\r\n\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <!-- \u2026conte\u00FAdo longo\u2026 -->\r\n    <h1>ds</h1>\r\n  </section>\r\n\r\n  <footer>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n  </footer>\r\n</div>\r\n", styles: [".s4y-dialog-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-dialog-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-dialog-header .s4y-dialog-header__title{font-size:2.2rem;color:var(--primary-color)}\n"] });
+    ref;
+    dialogOptions;
+    injectedData = inject(DYNAMIC_DIALOG_DATA, {
+        optional: true,
+    });
+    okLoading = false;
+    cancelLoading = false;
+    contentPortal;
+    headerTemplate;
+    footerTemplate;
+    contentTemplate;
+    templateContext;
+    constructor(ref, dialogOptions) {
+        this.ref = ref;
+        this.dialogOptions = dialogOptions;
+    }
+    get data() {
+        return this.injectedData;
+    }
+    async onOk() {
+        if (this.okLoading)
+            return;
+        this.okLoading = true;
+        try {
+            const res = await toMaybeBooleanPromise(this.dialogOptions?.onOk?.({ data: this.injectedData, ref: this.ref }));
+            if (res === false)
+                return;
+            await this.ref.closeAnimated(undefined, 'ok');
+        }
+        finally {
+            this.okLoading = false;
+        }
+    }
+    // ---- Cancel ----
+    async onCancel() {
+        if (this.cancelLoading)
+            return;
+        this.cancelLoading = true;
+        try {
+            const res = await toMaybeBooleanPromise(this.dialogOptions?.onCancel?.({
+                data: this.injectedData,
+                ref: this.ref,
+            }));
+            if (res === false)
+                return;
+            await this.ref.closeAnimated(undefined, 'cancel');
+        }
+        finally {
+            this.cancelLoading = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DynamicDialogRef }, { token: DYNAMIC_DIALOG_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n  @if (headerTemplate) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"headerTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    </header>\r\n  } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n      <p class=\"s4y-dialog-header__description\">\r\n        {{ dialogOptions?.description }}\r\n      </p>\r\n    </header>\r\n  }\r\n\r\n  @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n    <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n      &times;\r\n    </button>\r\n  }\r\n\r\n  <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n    @if (contentTemplate) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    } @else {\r\n      <ng-template\r\n        cdkPortalOutlet\r\n        [cdkPortalOutlet]=\"contentPortal\"\r\n      ></ng-template>\r\n    }\r\n  </section>\r\n\r\n  @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n  @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n  @if (!(dialogOptions?.hideFooter ?? false)) {\r\n    <footer\r\n      class=\"flex gap-1 s4y-dialog__footer\"\r\n      [ngStyle]=\"dialogOptions?.footerStyle\"\r\n    >\r\n      @if (footerTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"footerTemplate\"\r\n          [ngTemplateOutletContext]=\"templateContext\"\r\n        >\r\n        </ng-container>\r\n      } @else {\r\n        @if (cancelBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onCancel()\"\r\n            [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n            [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n            [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n            [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n          </button>\r\n        }\r\n        @if (okBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onOk()\"\r\n            [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n            [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n            [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n            [size]=\"okBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ okBtnOptions?.text ?? \"Ok\" }}\r\n          </button>\r\n        }\r\n      }\r\n    </footer>\r\n  }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-dynamic-dialog', imports: [], template: "<div class=\"s4y-dialog\">\r\n  <header class=\"s4y-dialog-header\">\r\n    <h2 class=\"s4y-dialog-header__title\">titulo</h2>\r\n    <button role=\"button\">\r\n      <p>&times;</p>\r\n    </button>\r\n  </header>\r\n  <section class=\"s4y-dialog__body\">\r\n    <p>Conteudo principal aqui</p>\r\n\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <!-- \u2026conte\u00FAdo longo\u2026 -->\r\n    <h1>ds</h1>\r\n  </section>\r\n\r\n  <footer>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n    <h1>ds</h1>\r\n  </footer>\r\n</div>\r\n", styles: [".s4y-dialog-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-dialog-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-dialog-header .s4y-dialog-header__title{font-size:2.2rem;color:var(--primary-color)}\n"] }]
-        }] });
+            args: [{ selector: 's4y-dynamic-dialog', imports: [CdkPortalOutlet, ButtonComponent, NgStyle, NgIf, NgTemplateOutlet], host: {
+                        role: 'dialog',
+                        'aria-modal': 'true',
+                        tabindex: '-1',
+                        class: 's4y-dialog',
+                        '[attr.aria-labelledby]': "'s4y-dialog-title'",
+                    }, animations: [], template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n  @if (headerTemplate) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"headerTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    </header>\r\n  } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n      <p class=\"s4y-dialog-header__description\">\r\n        {{ dialogOptions?.description }}\r\n      </p>\r\n    </header>\r\n  }\r\n\r\n  @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n    <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n      &times;\r\n    </button>\r\n  }\r\n\r\n  <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n    @if (contentTemplate) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    } @else {\r\n      <ng-template\r\n        cdkPortalOutlet\r\n        [cdkPortalOutlet]=\"contentPortal\"\r\n      ></ng-template>\r\n    }\r\n  </section>\r\n\r\n  @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n  @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n  @if (!(dialogOptions?.hideFooter ?? false)) {\r\n    <footer\r\n      class=\"flex gap-1 s4y-dialog__footer\"\r\n      [ngStyle]=\"dialogOptions?.footerStyle\"\r\n    >\r\n      @if (footerTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"footerTemplate\"\r\n          [ngTemplateOutletContext]=\"templateContext\"\r\n        >\r\n        </ng-container>\r\n      } @else {\r\n        @if (cancelBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onCancel()\"\r\n            [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n            [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n            [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n            [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n          </button>\r\n        }\r\n        @if (okBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onOk()\"\r\n            [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n            [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n            [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n            [size]=\"okBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ okBtnOptions?.text ?? \"Ok\" }}\r\n          </button>\r\n        }\r\n      }\r\n    </footer>\r\n  }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"] }]
+        }], ctorParameters: () => [{ type: DynamicDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DYNAMIC_DIALOG_OPTIONS]
+                }] }], propDecorators: { contentPortal: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], templateContext: [{
+                type: Input
+            }] } });
 
 class DynamicDialogService {
-    dialog = inject(Dialog);
     overlay = inject(Overlay);
-    open(component) {
-        return this.dialog.open(DynamicDialogComponent, {
-            panelClass: ['s4y-panel-dialog'],
-            backdropClass: ['s4y-backdrop-dialog'],
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    rootInjector = inject(Injector);
+    open(component, opts = {}) {
+        const overlayRef = this.overlay.create(this.buildOverlayConfig(opts));
+        overlayRef.updateSize({
+            width: opts.width ?? 'auto',
+            height: opts.height ?? 'auto',
+            minWidth: opts.minWidth ?? '32rem',
+            minHeight: opts.minHeight ?? 'auto',
+            maxWidth: opts.maxWidth ?? '90dvw',
+            maxHeight: opts.maxHeight ?? '90dvh',
+        });
+        if (opts.panelClass) {
+            const classes = Array.isArray(opts.panelClass)
+                ? opts.panelClass
+                : [opts.panelClass];
+            classes.forEach((c) => overlayRef.addPanelClass(c));
+        }
+        const dialogRef = new DynamicDialogRef(overlayRef);
+        if (opts.closeOnBackdrop) {
+            overlayRef
+                .backdropClick()
+                .pipe(take(1))
+                .subscribe(() => {
+                dialogRef.closeAnimated(undefined, 'backdrop');
+            });
+        }
+        if (opts.closeOnEsc !== false) {
+            overlayRef
+                .keydownEvents()
+                .pipe(filter$1((e) => e.key === 'Escape' || e.key === 'Esc'), take(1))
+                .subscribe(() => dialogRef.closeAnimated(undefined, 'esc'));
+        }
+        // injeta o ref + dados no componente container
+        const injector = Injector.create({
+            parent: this.rootInjector,
+            providers: [
+                { provide: DynamicDialogRef, useValue: dialogRef },
+                { provide: DYNAMIC_DIALOG_DATA, useValue: opts.data },
+                { provide: DYNAMIC_DIALOG_OPTIONS, useValue: opts },
+            ],
         });
+        // anexa o container
+        const containerPortal = new ComponentPortal(DynamicDialogComponent, null, injector);
+        const containerRef = overlayRef.attach(containerPortal);
+        const templateCtx = {
+            $implicit: opts.data,
+            data: opts.data,
+            ref: dialogRef,
+            modalRef: dialogRef,
+        };
+        containerRef.instance.headerTemplate = opts.headerTemplate;
+        containerRef.instance.footerTemplate = opts.footerTemplate;
+        containerRef.instance.contentTemplate = opts.contentTemplate;
+        containerRef.instance.templateContext = templateCtx;
+        // notifica afterOpened (container anexado)
+        dialogRef._notifyOpened();
+        // anexa o conteúdo
+        if (!opts.contentTemplate) {
+            const contentPortal = new ComponentPortal(component, null, injector);
+            containerRef.instance.contentPortal = contentPortal;
+        }
+        return dialogRef;
+    }
+    buildOverlayConfig(opts) {
+        const position = opts.positionStrategy ??
+            this.overlay.position().global().centerHorizontally().centerVertically();
+        return {
+            positionStrategy: position,
+            hasBackdrop: opts.hasBackdrop ?? true,
+            backdropClass: opts.backdropClass ?? ['s4y-backdrop-dialog'],
+            scrollStrategy: opts.scrollStrategy ?? this.overlay.scrollStrategies.block(),
+            disposeOnNavigation: opts.disposeOnNavigation ?? true,
+            panelClass: [
+                's4y-dialog-panel',
+                ...(Array.isArray(opts.panelClass)
+                    ? opts.panelClass
+                    : opts.panelClass
+                        ? [opts.panelClass]
+                        : []),
+            ],
+        };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogService });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogService, decorators: [{
-            type: Injectable
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
 /*
@@ -3368,5 +3629,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogService, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
+export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
 //# sourceMappingURL=s4y-ui.mjs.map