@shival99/z-ui 1.3.0 → 1.3.2

package/assets/css/base.css

@@ -61,3 +61,49 @@ body {
   --scrollbar-thumb-color: #4b5563;
   --scrollbar-thumb-hover-color: #6b7280;
 }
+
+/* ==================== CDK Drag-Drop Styles ==================== */
+
+/* Drag Preview - Element being dragged */
+.cdk-drag-preview {
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  background-color: var(--card);
+  z-index: 10000 !important;
+  pointer-events: none;
+  opacity: 1;
+  padding: 1rem;
+}
+
+.dark .cdk-drag-preview {
+  border: 1px solid var(--border);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
+}
+
+/* Drag Placeholder - Empty space where item was */
+.cdk-drag-placeholder {
+  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+  border: 2px dashed var(--primary);
+  border-radius: 6px;
+  opacity: 0.8;
+  visibility: visible;
+}
+
+.cdk-drag-placeholder * {
+  opacity: 0;
+}
+
+/* Drag Animation - Item movement transition */
+.cdk-drag-animating {
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Drop List Animation - Smooth sorting transition */
+.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
+  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Dragging Item - No transition during drag */
+.cdk-drag-dragging {
+  transition: none !important;
+}

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

@@ -136,10 +136,10 @@ const getOverlayType = () => {
 const zDrawerVariants = cva(['fixed z-50 flex flex-col bg-background overflow-hidden'].join(' '), {
     variants: {
         placement: {
-            left: 'left-0 top-0 h-full max-w-[90vw] border-r shadow-[3px_0_10px_rgba(0,0,0,0.08)]',
-            right: 'right-0 top-0 h-full max-w-[90vw] border-l shadow-[-3px_0_10px_rgba(0,0,0,0.08)]',
-            top: 'top-0 left-0 w-full max-h-[90vh] border-b shadow-[0_3px_10px_rgba(0,0,0,0.08)]',
-            bottom: 'bottom-0 left-0 w-full max-h-[90vh] border-t shadow-[0_-3px_10px_rgba(0,0,0,0.08)]',
+            left: 'left-0 top-0 h-full max-w-[90vw] dark:border-r shadow-[3px_0_10px_rgba(0,0,0,0.08)]',
+            right: 'right-0 top-0 h-full max-w-[90vw] dark:border-l shadow-[-3px_0_10px_rgba(0,0,0,0.08)]',
+            top: 'top-0 left-0 w-full max-h-[90vh] dark:border-b shadow-[0_3px_10px_rgba(0,0,0,0.08)]',
+            bottom: 'bottom-0 left-0 w-full max-h-[90vh] dark:border-t shadow-[0_-3px_10px_rgba(0,0,0,0.08)]',
         },
         shape: {
             rounded: '',
@@ -161,6 +161,7 @@ const zDrawerVariants = cva(['fixed z-50 flex flex-col bg-background overflow-hi
 class ZDrawerComponent extends BasePortalOutlet {
     zOnOk = output();
     zOnCancel = output();
+    zScrollbar = output();
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     zVisible = model(false, ...(ngDevMode ? [{ debugName: "zVisible" }] : []));
     zTitle = input(...(ngDevMode ? [undefined, { debugName: "zTitle" }] : []));
@@ -325,6 +326,12 @@ class ZDrawerComponent extends BasePortalOutlet {
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
     constructor() {
         super();
+        effect(() => {
+            const scrollbar = this.mainContentRef();
+            if (scrollbar) {
+                this.zScrollbar.emit(scrollbar);
+            }
+        });
         effect(() => {
             const visible = this.zVisible();
             if (visible && this.isTemplateMode() && !this._templateOverlayRef) {
@@ -457,7 +464,7 @@ class ZDrawerComponent extends BasePortalOutlet {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZDrawerComponent, isStandalone: true, selector: "z-drawer", inputs: { class: { classPropertyName: "class", publicName: "class", 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 }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zPlacement: { classPropertyName: "zPlacement", publicName: "zPlacement", 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 }, 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 }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zShadow: { classPropertyName: "zShadow", publicName: "zShadow", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", 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 } }, outputs: { zOnOk: "zOnOk", zOnCancel: "zOnCancel", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()", "style.height": "effectiveHeight()", "attr.data-placement": "effectivePlacement()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZDrawerHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZDrawerContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZDrawerFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zDrawer"], usesInheritance: true, ngImport: i0, template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\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-drawer-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-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ description }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            class=\"-mt-1 -mr-2 shrink-0\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n\n    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\n                  </h4>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-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    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        <ng-template cdkPortalOutlet />\n\n        @if (isStringContent()) {\n          <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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              data-testid=\"z-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe], () => [i1.CdkPortalOutlet, NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZDrawerComponent, isStandalone: true, selector: "z-drawer", inputs: { class: { classPropertyName: "class", publicName: "class", 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 }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zPlacement: { classPropertyName: "zPlacement", publicName: "zPlacement", 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 }, 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 }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null }, zShadow: { classPropertyName: "zShadow", publicName: "zShadow", isSignal: true, isRequired: false, transformFunction: null }, zShape: { classPropertyName: "zShape", publicName: "zShape", 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 } }, outputs: { zOnOk: "zOnOk", zOnCancel: "zOnCancel", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()", "style.height": "effectiveHeight()", "attr.data-placement": "effectivePlacement()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZDrawerHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZDrawerContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZDrawerFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zDrawer"], usesInheritance: true, ngImport: i0, template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\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-drawer-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-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ description }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            class=\"-mt-1 -mr-2 shrink-0\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n\n    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\n                  </h4>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-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    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        <ng-template cdkPortalOutlet />\n\n        @if (isStringContent()) {\n          <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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              data-testid=\"z-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe], () => [i1.CdkPortalOutlet, NgTemplateOutlet, import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ngImport: i0, type: ZDrawerComponent, resolveDeferredDeps: () => [import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), import('@shival99/z-ui/components/z-icon').then(m => m.ZIconComponent), import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe)], resolveMetadata: (ZButtonComponent, ZIconComponent, ZTooltipDirective, NgScrollbar, ZContentTypePipe, ZSafeHtmlPipe) => ({ decorators: [{
                 type: Component,
@@ -477,8 +484,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ng
                             '[style.width]': 'effectiveWidth()',
                             '[style.height]': 'effectiveHeight()',
                             '[attr.data-placement]': 'effectivePlacement()',
-                        }, exportAs: 'zDrawer', template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\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-drawer-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-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ description }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            class=\"-mt-1 -mr-2 shrink-0\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n\n    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\n                  </h4>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-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    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        <ng-template cdkPortalOutlet />\n\n        @if (isStringContent()) {\n          <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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              data-testid=\"z-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"] }]
-            }], ctorParameters: () => [], propDecorators: { zOnOk: [{ type: i0.Output, args: ["zOnOk"] }], zOnCancel: [{ type: i0.Output, args: ["zOnCancel"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", 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 }] }], zHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeight", required: false }] }], zPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlacement", required: false }] }], zClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClosable", required: false }] }], zMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaskClosable", 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 }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], zShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShadow", required: false }] }], zShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShape", required: false }] }], zContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerHeaderDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerContentDirective), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerFooterDirective), { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], dummyTemplateRef: [{ type: i0.ViewChild, args: ['dummyTemplate', { isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } }) });
+                        }, exportAs: 'zDrawer', template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\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-drawer-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-drawer-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ description }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            class=\"-mt-1 -mr-2 shrink-0\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n\n    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (effectiveTitle()) {\n      <header [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\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-drawer-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-drawer-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\n                  </h4>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-drawer-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 [class.z-drawer-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-drawer-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    <ng-scrollbar class=\"z-drawer-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        <ng-template cdkPortalOutlet />\n\n        @if (isStringContent()) {\n          <div data-testid=\"z-drawer-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (!effectiveHideFooter()) {\n      <footer [class.z-drawer-footer-shadow]=\"shouldShowShadow()\">\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-drawer-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              data-testid=\"z-drawer-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  } @placeholder {\n    <div class=\"flex flex-1 flex-col gap-4 p-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n", styles: [":host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=left].drawer-leave,:host.z-drawer-template-mode[data-placement=left].drawer-leave{--z-exit-translate-x: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right],:host.z-drawer-template-mode[data-placement=right]{--z-enter-translate-x: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=right].drawer-leave,:host.z-drawer-template-mode[data-placement=right].drawer-leave{--z-exit-translate-x: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top],:host.z-drawer-template-mode[data-placement=top]{--z-enter-translate-y: -100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=top].drawer-leave,:host.z-drawer-template-mode[data-placement=top].drawer-leave{--z-exit-translate-y: -100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom],:host.z-drawer-template-mode[data-placement=bottom]{--z-enter-translate-y: 100%;animation:z-enter .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-service-mode[data-placement=bottom].drawer-leave,:host.z-drawer-template-mode[data-placement=bottom].drawer-leave{--z-exit-translate-y: 100%;animation:z-exit .25s cubic-bezier(.16,1,.3,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.z-drawer-header-shadow{box-shadow:0 2px 8px -2px #0000001a;z-index:50}.z-drawer-footer-shadow{box-shadow:0 -2px 8px -2px #0000001a;z-index:50}:host header{padding-top:16px;padding-bottom:16px}:host footer{padding-top:16px;padding-bottom:16px}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: 2px}\n"] }]
+            }], ctorParameters: () => [], propDecorators: { zOnOk: [{ type: i0.Output, args: ["zOnOk"] }], zOnCancel: [{ type: i0.Output, args: ["zOnCancel"] }], zScrollbar: [{ type: i0.Output, args: ["zScrollbar"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", 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 }] }], zHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeight", required: false }] }], zPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlacement", required: false }] }], zClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClosable", required: false }] }], zMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaskClosable", 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 }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], zShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShadow", required: false }] }], zShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShape", required: false }] }], zContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerHeaderDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerContentDirective), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZDrawerFooterDirective), { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], dummyTemplateRef: [{ type: i0.ViewChild, args: ['dummyTemplate', { isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } }) });
 
 let ZDrawerRef = class ZDrawerRef {
     _overlayRef;