s4y-ui 5.3.1 → 5.5.1

package/fesm2022/s4y-ui.mjs

@@ -1394,6 +1394,8 @@ class ModalComponent {
     withHeader = input(true);
     closeOnBackdrop = input(true);
     closeOnEsc = input(true);
+    interceptBackdropClick = input(false);
+    onBackdrop = output();
     constructor(renderer, document) {
         this.renderer = renderer;
         this.document = document;
@@ -1416,9 +1418,13 @@ class ModalComponent {
     }
     ngAfterViewInit() { }
     onBackdropClick(evt) {
-        if (!this.closeOnBackdrop)
+        if (!this.closeOnBackdrop())
             return;
         if (evt.target === evt.currentTarget) {
+            if (this.interceptBackdropClick()) {
+                this.onBackdrop.emit();
+                return;
+            }
             this.onClose();
         }
     }
@@ -1431,7 +1437,7 @@ class ModalComponent {
         window.removeEventListener('keydown', this.escListener);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", requestClose: "requestClose" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    @modalFadeCombined\r\n    cdkScrollable\r\n    (click)=\"onBackdropClick($event)\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n        cdkScrollable\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [modalFadeCombined] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, interceptBackdropClick: { classPropertyName: "interceptBackdropClick", publicName: "interceptBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", requestClose: "requestClose", onBackdrop: "onBackdrop" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    @modalFadeCombined\r\n    cdkScrollable\r\n    (click)=\"onBackdropClick($event)\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n        cdkScrollable\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [modalFadeCombined] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -3384,6 +3390,7 @@ class DynamicDialogRef {
     isClosing = false;
     _container;
     _opts;
+    _contentComponentRef;
     constructor(overlayRef) {
         this.overlayRef = overlayRef;
         this.afterOpened$ = this._afterOpened.asObservable();
@@ -3466,6 +3473,15 @@ class DynamicDialogRef {
         }
         this.overlayRef.dispose();
     }
+    _attachContentComponent(componentRef) {
+        this._contentComponentRef = componentRef;
+    }
+    getComponent() {
+        return this._contentComponentRef?.instance;
+    }
+    hasComponent() {
+        return !!this._contentComponentRef;
+    }
     _attachForButtonUpdates(container, opts) {
         this._container = container;
         this._opts = opts;
@@ -3538,10 +3554,17 @@ class DynamicDialogComponent {
     footerTemplate;
     contentTemplate;
     templateContext;
+    portalOutlet;
     constructor(ref, dialogOptions) {
         this.ref = ref;
         this.dialogOptions = dialogOptions;
     }
+    ngAfterViewInit() {
+        if (this.portalOutlet?.attachedRef) {
+            console.log();
+            this.ref._attachContentComponent(this.portalOutlet.attachedRef);
+        }
+    }
     get data() {
         return this.injectedData;
     }
@@ -3550,7 +3573,12 @@ class DynamicDialogComponent {
             return;
         this.okLoading = true;
         try {
-            const out = await toHandlerResult(this.dialogOptions?.onOk?.({ data: this.injectedData, ref: this.ref }));
+            const component = this.ref.getComponent();
+            const out = await toHandlerResult(this.dialogOptions?.onOk?.({
+                data: this.injectedData,
+                ref: this.ref,
+                component,
+            }));
             if (out === false)
                 return;
             const result = out === true || typeof out === 'undefined' ? undefined : out;
@@ -3566,9 +3594,11 @@ class DynamicDialogComponent {
             return;
         // this.cancelLoading = true;
         try {
+            const component = this.ref.getComponent();
             const out = await toHandlerResult(this.dialogOptions?.onCancel?.({
                 data: this.injectedData,
                 ref: this.ref,
+                component,
             }));
             if (out === false)
                 return; // NÃO fecha
@@ -3580,7 +3610,7 @@ class DynamicDialogComponent {
         }
     }
     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: [] });
+    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" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], 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,
@@ -3604,12 +3634,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], templateContext: [{
                 type: Input
+            }], portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: false }]
             }] } });
 
 class DynamicDialogService {
     overlay = inject(Overlay);
     rootInjector = inject(Injector);
-    open(component, opts = {}) {
+    open(component, opts) {
+        opts = opts ?? {};
         const overlayRef = this.overlay.create(this.buildOverlayConfig(opts));
         overlayRef.updateSize({
             width: opts.width ?? 'auto',