@ngx-smz/core 21.9.0-next.17 → 21.9.0-next.18

package/fesm2022/ngx-smz-core.mjs

@@ -8318,6 +8318,7 @@ class DynamicDialogComponent {
     }
     maximize() {
         this.maximized = !this.maximized;
+        this.syncSizeAroundMaximize();
         if (!this.config.modal) {
             if (this.maximized) {
                 SmzDomHandler.addClass(document.body, 'p-overflow-hidden');
@@ -8328,6 +8329,32 @@ class DynamicDialogComponent {
         }
         this.onMaximize.emit({ maximized: this.maximized });
     }
+    /**
+     * O dialog tem tamanho automatico (segue o conteudo). Conteudo que fixa tamanho em px enquanto o dialog esta
+     * maximizado (tabelas, graficos, componentes que medem o contentor) o deixaria maior ao restaurar. Guarda o
+     * tamanho de antes de maximizar e, ao restaurar, o usa como teto (max-width/max-height): o dialog volta ao
+     * tamanho original e ainda pode encolher se o conteudo encolher. Tamanhos definidos pelo consumidor (`width`,
+     * `height`, `style`) sao respeitados e nao sao tocados.
+     */
+    syncSizeAroundMaximize() {
+        const container = this.container;
+        if (!container)
+            return;
+        container.style.removeProperty('max-width');
+        container.style.removeProperty('max-height');
+        if (this.maximized) {
+            this.preMaximizeContainerWidth = container.offsetWidth;
+            this.preMaximizeContainerHeight = container.offsetHeight;
+            return;
+        }
+        const style = (this.config.style ?? {});
+        if (this.preMaximizeContainerWidth > 0 && !this.config.width && style['width'] == null && style['maxWidth'] == null) {
+            container.style.maxWidth = `${this.preMaximizeContainerWidth}px`;
+        }
+        if (this.preMaximizeContainerHeight > 0 && !this.config.height && style['height'] == null && style['maxHeight'] == null) {
+            container.style.maxHeight = `${this.preMaximizeContainerHeight}px`;
+        }
+    }
     enableModality() {
         if (this.config.closable !== false && this.config.dismissableMask) {
             this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => {
@@ -8462,68 +8489,68 @@ class DynamicDialogComponent {
         this.overlayPanel?.kill();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: SmzDynamicDialogConfig }, { token: SmzDockService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DynamicDialogComponent, isStandalone: false, selector: "smz-dynamicDialog", outputs: { onMaximize: "onMaximize", onMinimize: "onMinimize" }, host: { listeners: { "document:keydown.escape": "onEscapeHandler($event)" }, properties: { "attr.id": "this.domId" }, classAttribute: "p-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "insertionFooter", first: true, predicate: DynamicDialogFooter, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "highlightPanelViewChild", first: true, predicate: ["highlightPanel"], descendants: true }, { propertyName: "overlayPanelClipViewChild", first: true, predicate: ["overlayPanelClip"], descendants: true }, { propertyName: "overlayBlendClipViewChild", first: true, predicate: ["overlayBlendClip"], descendants: true }], ngImport: i0, template: `
-
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
-}
-<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
-  @if (visible) {
-    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
-      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
-      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
-      [style.width]="config.width" [style.height]="config.height">
-      @if (config.showHeader === false ? false: true) {
-        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
-          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
-          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
-            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
-              @if (topbarButton.visible) {
-                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
-                  <span [ngClass]="topbarButton.class"></span>
-                </button>
-              }
-            }
-            @if (config.minimizable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
-                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
-              </button>
-            }
-            @if (config.maximizable !== false && !maximized) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
-              </button>
-            }
-            @if (maximized && !config.blockRestoreButton) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
-              </button>
-            }
-            @if (config.closable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
-                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
-              </button>
-            }
-          </div>
-        </div>
-      }
-      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
-        <ng-template pDynamicDialogContent></ng-template>
-      </div>
-      @if (config.footer) {
-        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
-          <ng-template pDynamicDialogFooter></ng-template>
-        </div>
-      }
-    </div>
-  }
-</div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DynamicDialogComponent, isStandalone: false, selector: "smz-dynamicDialog", outputs: { onMaximize: "onMaximize", onMinimize: "onMinimize" }, host: { listeners: { "document:keydown.escape": "onEscapeHandler($event)" }, properties: { "attr.id": "this.domId" }, classAttribute: "p-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "insertionFooter", first: true, predicate: DynamicDialogFooter, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["dialogContainer"], descendants: true }, { propertyName: "highlightPanelViewChild", first: true, predicate: ["highlightPanel"], descendants: true }, { propertyName: "overlayPanelClipViewChild", first: true, predicate: ["overlayPanelClip"], descendants: true }, { propertyName: "overlayBlendClipViewChild", first: true, predicate: ["overlayBlendClip"], descendants: true }], ngImport: i0, template: `
+
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
+}
+<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
+  @if (visible) {
+    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
+      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
+      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
+      [style.width]="config.width" [style.height]="config.height">
+      @if (config.showHeader === false ? false: true) {
+        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
+          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
+          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
+            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
+              @if (topbarButton.visible) {
+                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
+                  <span [ngClass]="topbarButton.class"></span>
+                </button>
+              }
+            }
+            @if (config.minimizable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
+                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
+              </button>
+            }
+            @if (config.maximizable !== false && !maximized) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
+              </button>
+            }
+            @if (maximized && !config.blockRestoreButton) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
+              </button>
+            }
+            @if (config.closable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
+                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
+              </button>
+            }
+          </div>
+        </div>
+      }
+      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
+        <ng-template pDynamicDialogContent></ng-template>
+      </div>
+      @if (config.footer) {
+        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
+          <ng-template pDynamicDialogFooter></ng-template>
+        </div>
+      }
+    </div>
+  }
+</div>
 `, isInline: true, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog-mask-free{position:fixed;top:0;left:0;width:100%;height:100%;display:block!important;pointer-events:none}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative;padding:unset}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}.p-component-overlay{background-color:#0006}.p-component-overlay-enter{animation:smz-dialog-mask-enter var(--smz-duration, .15s) forwards}.p-component-overlay-leave{animation:smz-dialog-mask-leave var(--smz-duration, .15s) forwards}@keyframes smz-dialog-mask-enter{0%{background-color:transparent}to{background-color:#0006}}@keyframes smz-dialog-mask-leave{0%{background-color:#0006}to{background-color:transparent}}.p-dialog{background:rgb(var(--smz-color-surface-2));color:rgb(var(--smz-color-fg));font-family:var(--smz-font-sans);font-size:var(--smz-text-md);border:1px solid rgb(var(--smz-color-line));border-radius:var(--smz-radius-overlay);box-shadow:var(--smz-shadow-overlay)}.p-dialog-header{padding:1.25rem;gap:.5rem;background:transparent;color:inherit;border-top-left-radius:var(--smz-radius-overlay);border-top-right-radius:var(--smz-radius-overlay)}.p-dialog-title{font-size:1.25rem;font-weight:600}.p-dialog-content{padding:0 1.25rem 1.25rem;background:transparent;color:inherit}.p-dialog-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:0 1.25rem 1.25rem;background:transparent;border-bottom-left-radius:var(--smz-radius-overlay);border-bottom-right-radius:var(--smz-radius-overlay)}.p-dialog-footer button{width:auto}.p-dialog .p-dialog-header-icon{width:2rem;height:2rem;border:0;border-radius:9999px;background:transparent;color:rgb(var(--smz-color-fg-muted));cursor:pointer;transition:background-color var(--smz-duration)}.p-dialog .p-dialog-header-icon:hover{background:rgb(var(--smz-color-surface-3));color:rgb(var(--smz-color-fg))}.p-dialog .p-dialog-header-icon:focus-visible{outline:2px solid rgb(var(--smz-color-focus))}.p-dialog-footer .p-toolbar,.p-dialog-footer [class*=toolbar],.p-dialog-footer ui-toolbar{border:0!important;background:transparent!important;padding:0!important}.p-dialog-mask[popover]{margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;inset:0;max-width:none;max-height:none;width:100%;height:100%}.p-dialog-mask[popover]::backdrop{display:none}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => SmzTooltipDirective), selector: "[smzTooltip]", inputs: ["smzTooltip", "tooltipPosition", "showDelay", "hideDelay", "tooltipEvent", "escape", "tooltipStyleClass", "tooltipZIndex", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "directive", type: i0.forwardRef(() => SmzAutoFocusDirective), selector: "[smzAutoFocus]", inputs: ["smzAutoFocus"] }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogFooter), selector: "[pDynamicDialogFooter]" }, { kind: "pipe", type: i0.forwardRef(() => SafeHtmlPipe$1), name: "safeHtml" }], animations: [
             trigger('animation', [
                 transition('void => visible', [
@@ -8537,68 +8564,68 @@ class DynamicDialogComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smz-dynamicDialog', template: `
-
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
-}
-@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
-  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
-}
-<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
-  @if (visible) {
-    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
-      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
-      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
-      [style.width]="config.width" [style.height]="config.height">
-      @if (config.showHeader === false ? false: true) {
-        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
-          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
-          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
-            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
-              @if (topbarButton.visible) {
-                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
-                  <span [ngClass]="topbarButton.class"></span>
-                </button>
-              }
-            }
-            @if (config.minimizable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
-                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
-              </button>
-            }
-            @if (config.maximizable !== false && !maximized) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
-              </button>
-            }
-            @if (maximized && !config.blockRestoreButton) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
-                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
-              </button>
-            }
-            @if (config.closable !== false) {
-              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
-                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
-              </button>
-            }
-          </div>
-        </div>
-      }
-      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
-        <ng-template pDynamicDialogContent></ng-template>
-      </div>
-      @if (config.footer) {
-        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
-          <ng-template pDynamicDialogFooter></ng-template>
-        </div>
-      }
-    </div>
-  }
-</div>
+            args: [{ selector: 'smz-dynamicDialog', template: `
+
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayBlendClip id="blend-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.overlayBlendStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #overlayPanelClip id="overlay-clip" class="fixed inset-0 p-component-overlay p-component-overlay-enter" [ngClass]="dialogConfig.data.overlayPanel?.overlayPanelStylesClass"></div>
+}
+@if (dialogConfig.data.behaviors.showAsLinkedOverlayPanel) {
+  <div #highlightPanel id="highlight-clip" class="fixed inset-0" [ngClass]="dialogConfig.data.overlayPanel?.hightlightStyleClass"></div>
+}
+<div #mask id="dialog-mask" [attr.data-testid]="buildDialogTestId('mask')" [ngClass]="{'p-dialog-mask-free': dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-component-overlay p-component-overlay-enter' : config.modal !== false && !dialogConfig.data.behaviors.showAsLinkedOverlayPanel, 'p-dialog-mask-scrollblocker': config.modal !== false, 'smz-dialog-minimized': minimized }" class="smz_form_grid_container p-dialog-mask">
+  @if (visible) {
+    <div #dialogContainer id="dialog-container" [attr.data-testid]="buildDialogTestId()" [smzAutoFocus]="config.autoFocus" [ngClass]="{'p-dialog p-dynamic-dialog p-component': true, 'p-dialog-rtl': config.rtl, 'p-dialog-maximized': maximized}" [ngStyle]="config.style" class="{{ config.styleClass }} {{ dialogConfig?.data?.containerStyleClass }}"
+      [@animation]="{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}"
+      (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog"
+      [style.width]="config.width" [style.height]="config.height">
+      @if (config.showHeader === false ? false: true) {
+        <div class="p-dialog-header" [attr.data-testid]="buildDialogTestId('header')" [ngStyle]="config.headerStyle">
+          <div class="p-dialog-title w-full" [attr.data-testid]="buildDialogTestId('title')" [innerHTML]="config.header | safeHtml"></div>
+          <div class="p-dialog-header-icons flex gap-3" [ngClass]="{ 'disable-a': dialogConfig.data._context.isGlobalDisabled }">
+            @for (topbarButton of dialogConfig.data.topbarButtons; track $index) {
+              @if (topbarButton.visible) {
+                <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildTopbarButtonTestId(topbarButton, $index)" (click)="topbarButton.onClick()" [smzTooltip]="topbarButton.tooltip">
+                  <span [ngClass]="topbarButton.class"></span>
+                </button>
+              }
+            }
+            @if (config.minimizable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('minimize')" (click)="minimize()" (keydown.enter)="minimize()">
+                <span class="p-dialog-header-close-icon fa-solid fa-minus"></span>
+              </button>
+            }
+            @if (config.maximizable !== false && !maximized) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('maximize')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="maximizeIcon"></span>
+              </button>
+            }
+            @if (maximized && !config.blockRestoreButton) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('restore')" (click)="maximize()" (keydown.enter)="maximize()">
+                <span class="p-dialog-header-close-icon" [ngClass]="minimizeIcon"></span>
+              </button>
+            }
+            @if (config.closable !== false) {
+              <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" [attr.data-testid]="buildDialogTestId('close')" (click)="hide()" (keydown.enter)="hide()">
+                <span class="p-dialog-header-close-icon fa-solid fa-xmark"></span>
+              </button>
+            }
+          </div>
+        </div>
+      }
+      <div class="p-dialog-content {{ dialogConfig?.data?.contentStyleClass }}" [attr.data-testid]="buildDialogTestId('content')" [ngStyle]="config.contentStyle" [ngClass]="{ 'disable-ui-dialog-content': dialogConfig.data._context.isGlobalDisabled }">
+        <ng-template pDynamicDialogContent></ng-template>
+      </div>
+      @if (config.footer) {
+        <div class="p-dialog-footer" [attr.data-testid]="buildDialogTestId('footer')" [ngStyle]="config.footerStyle" [ngClass]="{ 'disable-container': dialogConfig.data._context.isGlobalDisabled }">
+          <ng-template pDynamicDialogFooter></ng-template>
+        </div>
+      }
+    </div>
+  }
+</div>
 `, animations: [
                         trigger('animation', [
                             transition('void => visible', [