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

package/fesm2022/ngx-smz-core.mjs

@@ -8462,68 +8462,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 +8537,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', [