@shival99/z-ui 2.6.10 → 2.6.12

package/fesm2022/shival99-z-ui-components-z-modal.mjs

@@ -80,6 +80,8 @@ class ZModalOptions {
     zClosable;
     /** Confirm type for preset styling (show, info, warning, danger) */
     zConfirmType;
+    /** Confirm layout style. The dialog style uses a bordered header/footer layout. */
+    zConfirmStyle;
     /** Icon for the confirm modal */
     zConfirmIcon;
     /** Modal content - can be a component, template, or string */
@@ -176,6 +178,7 @@ const getOverlayType = () => {
 const Z_MODAL_CONFIRM_CONFIG = {
     show: {
         icon: 'lucideMessageCircleQuestion',
+        dialogIcon: 'lucideCircleHelp',
         colors: {
             ring: 'bg-gray-500/10',
             bg: 'bg-gray-500/15',
@@ -184,6 +187,7 @@ const Z_MODAL_CONFIRM_CONFIG = {
     },
     info: {
         icon: 'lucideInfo',
+        dialogIcon: 'lucideInfo',
         colors: {
             ring: 'bg-blue-500/10',
             bg: 'bg-blue-500/15',
@@ -192,6 +196,7 @@ const Z_MODAL_CONFIRM_CONFIG = {
     },
     warning: {
         icon: 'lucideTriangleAlert',
+        dialogIcon: 'lucideTriangleAlert',
         colors: {
             ring: 'bg-amber-500/10',
             bg: 'bg-amber-500/15',
@@ -200,6 +205,7 @@ const Z_MODAL_CONFIRM_CONFIG = {
     },
     danger: {
         icon: 'lucideX',
+        dialogIcon: 'lucideX',
         okDestructive: true,
         colors: {
             ring: 'bg-red-500/10',
@@ -237,11 +243,11 @@ class ZModalComponent {
     ...(ngDevMode ? [{ debugName: "zClosable" }] : /* istanbul ignore next */ []));
     zMaskClosable = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zMaskClosable" }] : /* istanbul ignore next */ []));
-    zDisableShadow = input(false, /* @ts-ignore */
+    zDisableShadow = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zDisableShadow" }] : /* istanbul ignore next */ []));
-    zHeaderBorder = input(false, /* @ts-ignore */
+    zHeaderBorder = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zHeaderBorder" }] : /* istanbul ignore next */ []));
-    zFooterBorder = input(false, /* @ts-ignore */
+    zFooterBorder = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zFooterBorder" }] : /* istanbul ignore next */ []));
     zHideHeader = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zHideHeader" }] : /* istanbul ignore next */ []));
@@ -305,6 +311,8 @@ class ZModalComponent {
     ...(ngDevMode ? [{ debugName: "isTemplateMode" }] : /* istanbul ignore next */ []));
     isConfirmMode = computed(() => !!this.config.zConfirmType, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isConfirmMode" }] : /* istanbul ignore next */ []));
+    isDialogConfirmMode = computed(() => this.isConfirmMode() && this.config.zConfirmStyle === 'dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDialogConfirmMode" }] : /* istanbul ignore next */ []));
     shouldRenderContent = computed(() => this.zVisible() || this.isLeaving(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldRenderContent" }] : /* istanbul ignore next */ []));
     isStringContent = computed(() => typeof this.config.zContent === 'string' && !this.isConfirmMode(), /* @ts-ignore */
@@ -345,6 +353,11 @@ class ZModalComponent {
         return Z_MODAL_CONFIRM_CONFIG[type].colors;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "confirmIconColors" }] : /* istanbul ignore next */ []));
+    effectiveConfirmDialogIcon = computed(() => {
+        const type = this.config.zConfirmType ?? 'show';
+        return this.config.zConfirmIcon ?? Z_MODAL_CONFIRM_CONFIG[type].dialogIcon;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveConfirmDialogIcon" }] : /* istanbul ignore next */ []));
     effectiveTitle = computed(() => (this.isServiceMode() ? this.config.zTitle : this.zTitle()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveTitle" }] : /* istanbul ignore next */ []));
     effectiveDescription = computed(() => this.isServiceMode() ? this.config.zDescription : this.zDescription(), /* @ts-ignore */
@@ -373,13 +386,13 @@ class ZModalComponent {
     ...(ngDevMode ? [{ debugName: "serviceBodyClasses" }] : /* istanbul ignore next */ []));
     effectiveClosable = computed(() => this.isServiceMode() ? (this.config.zClosable ?? true) : this.zClosable(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveClosable" }] : /* istanbul ignore next */ []));
-    effectiveDisableShadow = computed(() => this.isServiceMode() ? (this.config.zDisableShadow ?? false) : this.zDisableShadow(), /* @ts-ignore */
+    effectiveDisableShadow = computed(() => this.isServiceMode() ? (this.config.zDisableShadow ?? true) : this.zDisableShadow(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveDisableShadow" }] : /* istanbul ignore next */ []));
     shouldShowShadow = computed(() => !this.effectiveDisableShadow(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shouldShowShadow" }] : /* istanbul ignore next */ []));
-    effectiveHeaderBorder = computed(() => this.isServiceMode() ? (this.config.zHeaderBorder ?? false) : this.zHeaderBorder(), /* @ts-ignore */
+    effectiveHeaderBorder = computed(() => this.isServiceMode() ? (this.config.zHeaderBorder ?? true) : this.zHeaderBorder(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveHeaderBorder" }] : /* istanbul ignore next */ []));
-    effectiveFooterBorder = computed(() => this.isServiceMode() ? (this.config.zFooterBorder ?? false) : this.zFooterBorder(), /* @ts-ignore */
+    effectiveFooterBorder = computed(() => this.isServiceMode() ? (this.config.zFooterBorder ?? true) : this.zFooterBorder(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveFooterBorder" }] : /* istanbul ignore next */ []));
     effectiveHideFooter = computed(() => this.isServiceMode() ? this.config.zHideFooter : this.zHideFooter(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveHideFooter" }] : /* istanbul ignore next */ []));
@@ -442,7 +455,7 @@ class ZModalComponent {
         return !!this.config.zDefer && !this.contentOutlet()?.length;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDeferLoading" }] : /* istanbul ignore next */ []));
-    classes = computed(() => zMergeClasses(zModalVariants(), this.isServiceMode() ? this.config.class : this.class()), /* @ts-ignore */
+    classes = computed(() => zMergeClasses(zModalVariants(), this.isDialogConfirmMode() ? 'z-modal-confirm-dialog' : null, this.isServiceMode() ? this.config.class : this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
         const baseClasses = this.classes();
@@ -667,7 +680,7 @@ class ZModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZModalComponent, isStandalone: true, selector: "z-modal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zBodyClass: { classPropertyName: "zBodyClass", publicName: "zBodyClass", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zDisableShadow: { classPropertyName: "zDisableShadow", publicName: "zDisableShadow", isSignal: true, isRequired: false, transformFunction: null }, zHeaderBorder: { classPropertyName: "zHeaderBorder", publicName: "zHeaderBorder", isSignal: true, isRequired: false, transformFunction: null }, zFooterBorder: { classPropertyName: "zFooterBorder", publicName: "zFooterBorder", isSignal: true, isRequired: false, transformFunction: null }, zHideHeader: { classPropertyName: "zHideHeader", publicName: "zHideHeader", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOk: "zOk", zCancel: "zCancel", zAfterClose: "zAfterClose", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZModalHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZModalContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZModalFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zModal"], ngImport: i0, template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ $any(title) | translate }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-cancel-button\"\n            z-button\n            zType=\"outline\"\n            (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    <!-- Keep the attached content outlet mounted while loading; hide it behind the skeleton. -->\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-modal-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"serviceBodyClasses()\">\n        <!-- Use `hidden` so the reveal animation can measure the height change. Keep the outlet mounted. -->\n        <div [class.hidden]=\"effectiveContentLoading()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </div>\n\n        @if (effectiveContentLoading()) {\n          <div class=\"absolute inset-4 flex flex-col\">\n            <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n          </div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer\n        [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              @if (config.zCancelIcon) {\n                <z-icon [zType]=\"config.zCancelIcon\" />\n              }\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .95;transform-origin:center center;animation:z-enter .2s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .95;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .15s ease-in forwards}.z-modal-header-shadow{padding-bottom:1rem;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:1rem;box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: ZContentTypePipe, name: "zContentType" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZModalComponent, isStandalone: true, selector: "z-modal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zBodyClass: { classPropertyName: "zBodyClass", publicName: "zBodyClass", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zDisableShadow: { classPropertyName: "zDisableShadow", publicName: "zDisableShadow", isSignal: true, isRequired: false, transformFunction: null }, zHeaderBorder: { classPropertyName: "zHeaderBorder", publicName: "zHeaderBorder", isSignal: true, isRequired: false, transformFunction: null }, zFooterBorder: { classPropertyName: "zFooterBorder", publicName: "zFooterBorder", isSignal: true, isRequired: false, transformFunction: null }, zHideHeader: { classPropertyName: "zHideHeader", publicName: "zHideHeader", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOk: "zOk", zCancel: "zCancel", zAfterClose: "zAfterClose", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZModalHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZModalContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZModalFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zModal"], ngImport: i0, template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    @if (isDialogConfirmMode()) {\n      <header\n        class=\"relative px-4\"\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex items-start justify-between gap-4\">\n          <div class=\"flex min-w-0 items-start gap-3\">\n            @if (config.zConfirmIcon) {\n              <div\n                class=\"relative mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-full\"\n                [class]=\"confirmIconColors().ring\">\n                <div\n                  class=\"relative flex size-8 items-center justify-center rounded-full\"\n                  [class]=\"confirmIconColors().bg\">\n                  <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"18\" [class]=\"confirmIconColors().icon\" />\n                </div>\n              </div>\n            }\n\n            <div class=\"min-w-0\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 text-base leading-snug font-semibold\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4 data-testid=\"z-modal-title\" class=\"m-0 text-base leading-snug font-semibold\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n\n              @if (config.zContent; as content) {\n                <p\n                  data-testid=\"z-modal-description\"\n                  class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                  [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n              }\n            </div>\n          </div>\n\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              class=\"shrink-0\"\n              [zWave]=\"false\"\n              [attr.aria-label]=\"'i18n_z_ui_modal_close' | translate\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n\n      @if (!effectiveHideFooter()) {\n        <footer\n          class=\"z-modal-confirm-dialog-footer\"\n          [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-footer-border]=\"effectiveFooterBorder() && !effectiveHeaderBorder()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : effectiveTypeOk()\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (!effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon ?? effectiveConfirmDialogIcon()\" zSize=\"16\" />\n                }\n                {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @else {\n      <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n        @if (config.zConfirmIcon) {\n          <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n            <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n            <div\n              class=\"relative flex size-14 items-center justify-center rounded-full\"\n              [class]=\"confirmIconColors().bg\">\n              <z-icon\n                [zType]=\"config.zConfirmIcon\"\n                zSize=\"30\"\n                [zStrokeWidth]=\"2.6\"\n                [class]=\"confirmIconColors().icon\" />\n            </div>\n          </div>\n        }\n\n        <!-- Title centered -->\n        @if (effectiveTitle(); as title) {\n          @switch (title | zContentType) {\n            @case ('template') {\n              <ng-container *ngTemplateOutlet=\"$any(title)\" />\n            }\n            @case ('html') {\n              <h4\n                data-testid=\"z-modal-title\"\n                class=\"m-0 text-lg leading-snug font-semibold\"\n                [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n            }\n            @default {\n              <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n                {{ $any(title) | translate }}\n              </h4>\n            }\n          }\n        }\n\n        <!-- Description centered -->\n        @if (config.zContent; as content) {\n          <p\n            data-testid=\"z-modal-description\"\n            class=\"text-muted-foreground m-0 mt-2 text-sm\"\n            [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n        }\n      </div>\n\n      <!-- Footer centered -->\n      @if (!effectiveHideFooter()) {\n        <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : effectiveTypeOk()\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </footer>\n      }\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    <!-- Keep the attached content outlet mounted while loading; hide it behind the skeleton. -->\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-modal-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"serviceBodyClasses()\">\n        <!-- Use `hidden` so the reveal animation can measure the height change. Keep the outlet mounted. -->\n        <div [class.hidden]=\"effectiveContentLoading()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </div>\n\n        @if (effectiveContentLoading()) {\n          <div class=\"absolute inset-4 flex flex-col\">\n            <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n          </div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer\n        [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              @if (config.zCancelIcon) {\n                <z-icon [zType]=\"config.zCancelIcon\" />\n              }\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .95;transform-origin:center center;animation:z-enter .2s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .95;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .15s ease-in forwards}.z-modal-header-shadow,.z-modal-header-border{padding-bottom:1rem}.z-modal-header-shadow{box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow,.z-modal-footer-border{padding-top:1rem}.z-modal-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}:host.z-modal-confirm-dialog{border-radius:var(--radius)}:host.z-modal-confirm-dialog .z-modal-confirm-dialog-footer{padding-top:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: ZContentTypePipe, name: "zContentType" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalComponent, decorators: [{
             type: Component,
@@ -685,7 +698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], standalone: true, providers: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
                         '[style.width]': 'effectiveWidth()',
-                    }, exportAs: 'zModal', template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ $any(title) | translate }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-cancel-button\"\n            z-button\n            zType=\"outline\"\n            (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    <!-- Keep the attached content outlet mounted while loading; hide it behind the skeleton. -->\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-modal-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"serviceBodyClasses()\">\n        <!-- Use `hidden` so the reveal animation can measure the height change. Keep the outlet mounted. -->\n        <div [class.hidden]=\"effectiveContentLoading()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </div>\n\n        @if (effectiveContentLoading()) {\n          <div class=\"absolute inset-4 flex flex-col\">\n            <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n          </div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer\n        [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              @if (config.zCancelIcon) {\n                <z-icon [zType]=\"config.zCancelIcon\" />\n              }\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .95;transform-origin:center center;animation:z-enter .2s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .95;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .15s ease-in forwards}.z-modal-header-shadow{padding-bottom:1rem;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:1rem;box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}\n"] }]
+                    }, exportAs: 'zModal', template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    @if (isDialogConfirmMode()) {\n      <header\n        class=\"relative px-4\"\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex items-start justify-between gap-4\">\n          <div class=\"flex min-w-0 items-start gap-3\">\n            @if (config.zConfirmIcon) {\n              <div\n                class=\"relative mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-full\"\n                [class]=\"confirmIconColors().ring\">\n                <div\n                  class=\"relative flex size-8 items-center justify-center rounded-full\"\n                  [class]=\"confirmIconColors().bg\">\n                  <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"18\" [class]=\"confirmIconColors().icon\" />\n                </div>\n              </div>\n            }\n\n            <div class=\"min-w-0\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 text-base leading-snug font-semibold\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4 data-testid=\"z-modal-title\" class=\"m-0 text-base leading-snug font-semibold\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n\n              @if (config.zContent; as content) {\n                <p\n                  data-testid=\"z-modal-description\"\n                  class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                  [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n              }\n            </div>\n          </div>\n\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              class=\"shrink-0\"\n              [zWave]=\"false\"\n              [attr.aria-label]=\"'i18n_z_ui_modal_close' | translate\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n\n      @if (!effectiveHideFooter()) {\n        <footer\n          class=\"z-modal-confirm-dialog-footer\"\n          [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-footer-border]=\"effectiveFooterBorder() && !effectiveHeaderBorder()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : effectiveTypeOk()\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (!effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon ?? effectiveConfirmDialogIcon()\" zSize=\"16\" />\n                }\n                {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @else {\n      <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n        @if (config.zConfirmIcon) {\n          <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n            <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n            <div\n              class=\"relative flex size-14 items-center justify-center rounded-full\"\n              [class]=\"confirmIconColors().bg\">\n              <z-icon\n                [zType]=\"config.zConfirmIcon\"\n                zSize=\"30\"\n                [zStrokeWidth]=\"2.6\"\n                [class]=\"confirmIconColors().icon\" />\n            </div>\n          </div>\n        }\n\n        <!-- Title centered -->\n        @if (effectiveTitle(); as title) {\n          @switch (title | zContentType) {\n            @case ('template') {\n              <ng-container *ngTemplateOutlet=\"$any(title)\" />\n            }\n            @case ('html') {\n              <h4\n                data-testid=\"z-modal-title\"\n                class=\"m-0 text-lg leading-snug font-semibold\"\n                [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n            }\n            @default {\n              <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n                {{ $any(title) | translate }}\n              </h4>\n            }\n          }\n        }\n\n        <!-- Description centered -->\n        @if (config.zContent; as content) {\n          <p\n            data-testid=\"z-modal-description\"\n            class=\"text-muted-foreground m-0 mt-2 text-sm\"\n            [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n        }\n      </div>\n\n      <!-- Footer centered -->\n      @if (!effectiveHideFooter()) {\n        <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : effectiveTypeOk()\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </footer>\n      }\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    <!-- Keep the attached content outlet mounted while loading; hide it behind the skeleton. -->\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div [class]=\"headerContentClasses()\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"$any(title) | translate\">\n                      {{ $any(title) | translate }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header\n          [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n    }\n\n    <ng-scrollbar\n      class=\"z-modal-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"serviceBodyClasses()\">\n        <!-- Use `hidden` so the reveal animation can measure the height change. Keep the outlet mounted. -->\n        <div [class.hidden]=\"effectiveContentLoading()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </div>\n\n        @if (effectiveContentLoading()) {\n          <div class=\"absolute inset-4 flex flex-col\">\n            <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n          </div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer\n        [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-cancel-button\"\n              z-button\n              zType=\"outline\"\n              (click)=\"onCloseClick()\">\n              @if (config.zCancelIcon) {\n                <z-icon [zType]=\"config.zCancelIcon\" />\n              }\n              {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              class=\"min-w-28\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              @if (config.zOkIcon && !effectiveLoading()) {\n                <z-icon [zType]=\"config.zOkIcon\" />\n              }\n              {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .95;transform-origin:center center;animation:z-enter .2s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .95;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .15s ease-in forwards}.z-modal-header-shadow,.z-modal-header-border{padding-bottom:1rem}.z-modal-header-shadow{box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow,.z-modal-footer-border{padding-top:1rem}.z-modal-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}:host.z-modal-confirm-dialog{border-radius:var(--radius)}:host.z-modal-confirm-dialog .z-modal-confirm-dialog-footer{padding-top:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zOk: [{ type: i0.Output, args: ["zOk"] }], zCancel: [{ type: i0.Output, args: ["zCancel"] }], zAfterClose: [{ type: i0.Output, args: ["zAfterClose"] }], zScrollbar: [{ type: i0.Output, args: ["zScrollbar"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zBodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBodyClass", required: false }] }], zVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisible", required: false }] }, { type: i0.Output, args: ["zVisibleChange"] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDescription", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClosable", required: false }] }], zMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaskClosable", required: false }] }], zDisableShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisableShadow", required: false }] }], zHeaderBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeaderBorder", required: false }] }], zFooterBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFooterBorder", required: false }] }], zHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideHeader", required: false }] }], zHideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideFooter", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zOkDestructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDestructive", required: false }] }], zOkDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalHeaderDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalContentDirective), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalFooterDirective), { isSignal: true }] }], contentOutlet: [{ type: i0.ViewChild, args: ['contentOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } });
 
 let ZModalRef = class ZModalRef {
@@ -821,8 +834,10 @@ class ZModalService {
             zContent: options.zContent,
             zOkText: options.zOkText ?? this._zTranslate.translate('i18n_z_ui_modal_confirm')(),
             zCancelText: options.zCancelText ?? this._zTranslate.translate('i18n_z_ui_modal_cancel')(),
-            zOkDestructive: typeConfig.okDestructive,
-            zConfirmIcon: options.zIcon ?? typeConfig.icon,
+            zOkDestructive: options.zOkDestructive ?? typeConfig.okDestructive,
+            zOkIcon: options.zOkIcon,
+            zConfirmIcon: options.zIcon ?? (options.zConfirmStyle === 'dialog' ? typeConfig.dialogIcon : typeConfig.icon),
+            zConfirmStyle: options.zConfirmStyle,
             zMaskClosable: options.zMaskClosable ?? true,
             zWidth: options.zWidth ?? '500px',
             zConfirmType: type,