s4y-ui 4.9.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,14 +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 { TemplatePortal, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
 
 class DashboardLayoutComponent {
     asideTemplate;
@@ -1103,11 +1103,11 @@ class TableComponent {
     constructor() { }
     ngAfterViewInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\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: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortFunction: "sortFunction" }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\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: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, CdkScrollableModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
+            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, CdkScrollableModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem;width:100%;container-type:inline-size}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rowTemplate: [{
                 type: ContentChild,
                 args: ['rowTemplate']
@@ -3332,6 +3332,294 @@ 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 {
+    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: [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 {
+    overlay = inject(Overlay);
+    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, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /*
  * Public API Surface of s4y-components
  */
@@ -3341,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, 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