@shival99/z-ui 2.1.32 → 2.2.0

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

@@ -3,10 +3,11 @@ import * as i1 from '@angular/cdk/portal';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, InjectionToken, output, input, model, contentChild, viewChild, PLATFORM_ID, ElementRef, ViewContainerRef, ChangeDetectorRef, DestroyRef, signal, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, Inject, Injector, Injectable } from '@angular/core';
+import { inject, TemplateRef, Directive, InjectionToken, output, input, model, booleanAttribute, contentChild, signal, viewChild, PLATFORM_ID, ElementRef, ViewContainerRef, ChangeDetectorRef, DestroyRef, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, Inject, Injector, Injectable } from '@angular/core';
 import { TranslatePipe } from '@ngx-translate/core';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
-import { ZTranslateService, ZOverlayContainerService, ZOverlayZIndexService } from '@shival99/z-ui/services';
+import { ZTranslateService, ZOverlayContainerService, ZOverlayZIndexService, ZIndexDbService } from '@shival99/z-ui/services';
 import { zDetectBrowser, zMergeClasses } from '@shival99/z-ui/utils';
 import { cva } from 'class-variance-authority';
 import { __decorate, __param, __metadata } from 'tslib';
@@ -14,10 +15,10 @@ import { Subject, takeUntil, fromEvent, filter } from 'rxjs';
 
 class ZDrawerContentDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZDrawerContentDirective, isStandalone: true, selector: "[z-drawer-content], [zDrawerContent]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZDrawerContentDirective, isStandalone: true, selector: "[z-drawer-content], [zDrawerContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-drawer-content], [zDrawerContent]',
@@ -27,10 +28,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 class ZDrawerFooterDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZDrawerFooterDirective, isStandalone: true, selector: "[z-drawer-footer], [zDrawerFooter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZDrawerFooterDirective, isStandalone: true, selector: "[z-drawer-footer], [zDrawerFooter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-drawer-footer], [zDrawerFooter]',
@@ -40,10 +41,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 class ZDrawerHeaderDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZDrawerHeaderDirective, isStandalone: true, selector: "[z-drawer-header], [zDrawerHeader]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZDrawerHeaderDirective, isStandalone: true, selector: "[z-drawer-header], [zDrawerHeader]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-drawer-header], [zDrawerHeader]',
@@ -51,6 +52,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+const Z_DRAWER_RESIZE_MIN_SIZE = 240;
+const Z_DRAWER_RESIZE_VIEWPORT_PADDING = 32;
+const Z_DRAWER_RESIZE_KEY_PREFIX = 'z-drawer-resize';
+
 const Z_DRAWER_DATA = new InjectionToken('Z_DRAWER_DATA');
 const Z_DRAWER_ANIMATION_DURATION = 250;
 var ZDrawerTriggerAction;
@@ -137,6 +142,8 @@ class ZDrawerOptions {
     zContentLoading;
     /** Number of skeleton rows to show when content is loading (default: 5 for left/right, 3 for top/bottom) */
     zSkeletonRows;
+    /** Whether the drawer can be resized from its outer edge */
+    zExpand;
 }
 
 const getOverlayType = () => {
@@ -174,38 +181,77 @@ class ZDrawerComponent extends BasePortalOutlet {
     zOnCancel = output();
     zAfterClose = output();
     zScrollbar = output();
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    zBodyClass = input('', ...(ngDevMode ? [{ debugName: "zBodyClass" }] : []));
-    zVisible = model(false, ...(ngDevMode ? [{ debugName: "zVisible" }] : []));
-    zTitle = input(...(ngDevMode ? [undefined, { debugName: "zTitle" }] : []));
-    zDescription = input(...(ngDevMode ? [undefined, { debugName: "zDescription" }] : []));
-    zWidth = input('400px', ...(ngDevMode ? [{ debugName: "zWidth" }] : []));
-    zHeight = input('400px', ...(ngDevMode ? [{ debugName: "zHeight" }] : []));
-    zPlacement = input('right', ...(ngDevMode ? [{ debugName: "zPlacement" }] : []));
-    zClosable = input(true, ...(ngDevMode ? [{ debugName: "zClosable" }] : []));
-    zMaskClosable = input(true, ...(ngDevMode ? [{ debugName: "zMaskClosable" }] : []));
-    zDisableShadow = input(false, ...(ngDevMode ? [{ debugName: "zDisableShadow" }] : []));
-    zHeaderBorder = input(false, ...(ngDevMode ? [{ debugName: "zHeaderBorder" }] : []));
-    zFooterBorder = input(false, ...(ngDevMode ? [{ debugName: "zFooterBorder" }] : []));
-    zHideFooter = input(false, ...(ngDevMode ? [{ debugName: "zHideFooter" }] : []));
-    zHideHeader = input(false, ...(ngDevMode ? [{ debugName: "zHideHeader" }] : []));
-    zOkText = input(null, ...(ngDevMode ? [{ debugName: "zOkText" }] : []));
-    zCancelText = input(null, ...(ngDevMode ? [{ debugName: "zCancelText" }] : []));
-    zOkDestructive = input(false, ...(ngDevMode ? [{ debugName: "zOkDestructive" }] : []));
-    zOkDisabled = input(false, ...(ngDevMode ? [{ debugName: "zOkDisabled" }] : []));
-    zLoading = input(false, ...(ngDevMode ? [{ debugName: "zLoading" }] : []));
-    zOverlay = input(getOverlayType(), ...(ngDevMode ? [{ debugName: "zOverlay" }] : []));
-    zShadow = input(false, ...(ngDevMode ? [{ debugName: "zShadow" }] : []));
-    zShape = input('rounded', ...(ngDevMode ? [{ debugName: "zShape" }] : []));
-    zContentLoading = input(false, ...(ngDevMode ? [{ debugName: "zContentLoading" }] : []));
-    zSkeletonRows = input(null, ...(ngDevMode ? [{ debugName: "zSkeletonRows" }] : []));
-    customHeader = contentChild(ZDrawerHeaderDirective, ...(ngDevMode ? [{ debugName: "customHeader" }] : []));
-    customContent = contentChild(ZDrawerContentDirective, ...(ngDevMode ? [{ debugName: "customContent" }] : []));
-    customFooter = contentChild(ZDrawerFooterDirective, ...(ngDevMode ? [{ debugName: "customFooter" }] : []));
-    drawerRef;
-    portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
-    dummyTemplateRef = viewChild('dummyTemplate', ...(ngDevMode ? [{ debugName: "dummyTemplateRef" }] : []));
-    mainContentRef = viewChild('mainContent', ...(ngDevMode ? [{ debugName: "mainContentRef" }] : []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zBodyClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zBodyClass" }] : /* istanbul ignore next */ []));
+    zVisible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zVisible" }] : /* istanbul ignore next */ []));
+    zTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "zTitle" }] : /* istanbul ignore next */ []));
+    zDescription = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "zDescription" }] : /* istanbul ignore next */ []));
+    zWidth = input('400px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zWidth" }] : /* istanbul ignore next */ []));
+    zHeight = input('400px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zHeight" }] : /* istanbul ignore next */ []));
+    zPlacement = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPlacement" }] : /* istanbul ignore next */ []));
+    zClosable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zClosable" }] : /* istanbul ignore next */ []));
+    zMaskClosable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMaskClosable" }] : /* istanbul ignore next */ []));
+    zDisableShadow = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDisableShadow" }] : /* istanbul ignore next */ []));
+    zHeaderBorder = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zHeaderBorder" }] : /* istanbul ignore next */ []));
+    zFooterBorder = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zFooterBorder" }] : /* istanbul ignore next */ []));
+    zHideFooter = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zHideFooter" }] : /* istanbul ignore next */ []));
+    zHideHeader = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zHideHeader" }] : /* istanbul ignore next */ []));
+    zOkText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOkText" }] : /* istanbul ignore next */ []));
+    zCancelText = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zCancelText" }] : /* istanbul ignore next */ []));
+    zOkDestructive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOkDestructive" }] : /* istanbul ignore next */ []));
+    zOkDisabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOkDisabled" }] : /* istanbul ignore next */ []));
+    zLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zLoading" }] : /* istanbul ignore next */ []));
+    zOverlay = input(getOverlayType(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOverlay" }] : /* istanbul ignore next */ []));
+    zShadow = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShadow" }] : /* istanbul ignore next */ []));
+    zShape = input('rounded', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShape" }] : /* istanbul ignore next */ []));
+    zContentLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zContentLoading" }] : /* istanbul ignore next */ []));
+    zSkeletonRows = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSkeletonRows" }] : /* istanbul ignore next */ []));
+    zExpand = input(false, { ...(ngDevMode ? { debugName: "zExpand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    customHeader = contentChild(ZDrawerHeaderDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customHeader" }] : /* istanbul ignore next */ []));
+    customContent = contentChild(ZDrawerContentDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customContent" }] : /* istanbul ignore next */ []));
+    customFooter = contentChild(ZDrawerFooterDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customFooter" }] : /* istanbul ignore next */ []));
+    _drawerRef = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_drawerRef" }] : /* istanbul ignore next */ []));
+    get drawerRef() {
+        return this._drawerRef();
+    }
+    set drawerRef(value) {
+        this._drawerRef.set(value);
+    }
+    portalOutlet = viewChild(CdkPortalOutlet, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "portalOutlet" }] : /* istanbul ignore next */ []));
+    dummyTemplateRef = viewChild('dummyTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dummyTemplateRef" }] : /* istanbul ignore next */ []));
+    mainContentRef = viewChild('mainContent', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mainContentRef" }] : /* istanbul ignore next */ []));
     config = inject((ZDrawerOptions), { optional: true }) || new ZDrawerOptions();
     _platformId = inject(PLATFORM_ID);
     _host = inject((ElementRef));
@@ -216,21 +262,41 @@ class ZDrawerComponent extends BasePortalOutlet {
     _zTranslate = inject(ZTranslateService);
     _overlayContainerService = inject(ZOverlayContainerService);
     _zIndexService = inject(ZOverlayZIndexService);
+    _indexDb = inject(ZIndexDbService, { optional: true });
     _templateOverlayRef = null;
     _originalParent = null;
     _originalNextSibling = null;
     _backdropSubscription = null;
     _closeTimeout = null;
-    isLeaving = signal(false, ...(ngDevMode ? [{ debugName: "isLeaving" }] : []));
-    hasScrollableContent = signal(false, ...(ngDevMode ? [{ debugName: "hasScrollableContent" }] : []));
-    isScrolledFromTop = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledFromTop" }] : []));
-    isScrolledToBottom = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledToBottom" }] : []));
-    isServiceMode = computed(() => !!this.drawerRef, ...(ngDevMode ? [{ debugName: "isServiceMode" }] : []));
-    isTemplateMode = computed(() => !this.isServiceMode(), ...(ngDevMode ? [{ debugName: "isTemplateMode" }] : []));
-    shouldRenderContent = computed(() => this.zVisible() || this.isLeaving(), ...(ngDevMode ? [{ debugName: "shouldRenderContent" }] : []));
-    isStringContent = computed(() => typeof this.config.zContent === 'string', ...(ngDevMode ? [{ debugName: "isStringContent" }] : []));
+    _resizeCleanup = null;
+    _resizeStorageKey = null;
+    isResizing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+    isLeaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLeaving" }] : /* istanbul ignore next */ []));
+    hasScrollableContent = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasScrollableContent" }] : /* istanbul ignore next */ []));
+    isScrolledFromTop = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isScrolledFromTop" }] : /* istanbul ignore next */ []));
+    isScrolledToBottom = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isScrolledToBottom" }] : /* istanbul ignore next */ []));
+    isServiceMode = computed(() => !!this._drawerRef(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isServiceMode" }] : /* istanbul ignore next */ []));
+    isTemplateMode = computed(() => !this.isServiceMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTemplateMode" }] : /* istanbul ignore next */ []));
+    shouldRenderContent = computed(() => this.zVisible() || this.isLeaving(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRenderContent" }] : /* istanbul ignore next */ []));
+    isStringContent = computed(() => typeof this.config.zContent === 'string', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStringContent" }] : /* istanbul ignore next */ []));
     _lastScrollHeight = 0;
+    _resizedWidth = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resizedWidth" }] : /* istanbul ignore next */ []));
+    _resizedHeight = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resizedHeight" }] : /* istanbul ignore next */ []));
     ngAfterViewChecked() {
+        if (this.isServiceMode() && this._resizeStorageKey === null) {
+            void this._restoreResize();
+        }
         this._checkScrollState();
     }
     _checkScrollState() {
@@ -263,35 +329,54 @@ class ZDrawerComponent extends BasePortalOutlet {
     effectiveTitle = computed(() => {
         this._zTranslate.currentLang();
         return this.isServiceMode() ? this.config.zTitle : this.zTitle();
-    }, ...(ngDevMode ? [{ debugName: "effectiveTitle" }] : []));
-    effectiveDescription = computed(() => this.isServiceMode() ? this.config.zDescription : this.zDescription(), ...(ngDevMode ? [{ debugName: "effectiveDescription" }] : []));
-    hasEffectiveDescription = computed(() => !!this.effectiveDescription(), ...(ngDevMode ? [{ debugName: "hasEffectiveDescription" }] : []));
-    headerContentClasses = computed(() => zMergeClasses('flex w-full justify-between overflow-hidden px-4', this.hasEffectiveDescription() ? 'items-start' : 'items-center'), ...(ngDevMode ? [{ debugName: "headerContentClasses" }] : []));
-    effectiveBodyClass = computed(() => this.isServiceMode() ? this.config.zBodyClass : this.zBodyClass(), ...(ngDevMode ? [{ debugName: "effectiveBodyClass" }] : []));
-    bodyClasses = computed(() => zMergeClasses('flex min-h-0 flex-col gap-4 px-4 py-4', this.effectiveBodyClass()), ...(ngDevMode ? [{ debugName: "bodyClasses" }] : []));
-    effectiveClosable = computed(() => this.isServiceMode() ? (this.config.zClosable ?? true) : this.zClosable(), ...(ngDevMode ? [{ debugName: "effectiveClosable" }] : []));
-    effectiveDisableShadow = computed(() => this.isServiceMode() ? (this.config.zDisableShadow ?? false) : this.zDisableShadow(), ...(ngDevMode ? [{ debugName: "effectiveDisableShadow" }] : []));
-    shouldShowShadow = computed(() => !this.effectiveDisableShadow(), ...(ngDevMode ? [{ debugName: "shouldShowShadow" }] : []));
-    effectiveHeaderBorder = computed(() => this.isServiceMode() ? (this.config.zHeaderBorder ?? false) : this.zHeaderBorder(), ...(ngDevMode ? [{ debugName: "effectiveHeaderBorder" }] : []));
-    effectiveFooterBorder = computed(() => this.isServiceMode() ? (this.config.zFooterBorder ?? false) : this.zFooterBorder(), ...(ngDevMode ? [{ debugName: "effectiveFooterBorder" }] : []));
-    effectiveHideFooter = computed(() => this.isServiceMode() ? this.config.zHideFooter : this.zHideFooter(), ...(ngDevMode ? [{ debugName: "effectiveHideFooter" }] : []));
-    effectiveHideHeader = computed(() => this.isServiceMode() ? (this.config.zHideHeader ?? false) : this.zHideHeader(), ...(ngDevMode ? [{ debugName: "effectiveHideHeader" }] : []));
-    effectiveOkText = computed(() => (this.isServiceMode() ? this.config.zOkText : this.zOkText()), ...(ngDevMode ? [{ debugName: "effectiveOkText" }] : []));
-    effectiveCancelText = computed(() => this.isServiceMode() ? this.config.zCancelText : this.zCancelText(), ...(ngDevMode ? [{ debugName: "effectiveCancelText" }] : []));
-    effectiveOkDestructive = computed(() => this.isServiceMode() ? this.config.zOkDestructive : this.zOkDestructive(), ...(ngDevMode ? [{ debugName: "effectiveOkDestructive" }] : []));
-    effectiveOkDisabled = computed(() => this.isServiceMode() ? this.config.zOkDisabled : this.zOkDisabled(), ...(ngDevMode ? [{ debugName: "effectiveOkDisabled" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTitle" }] : /* istanbul ignore next */ []));
+    effectiveDescription = computed(() => this.isServiceMode() ? this.config.zDescription : this.zDescription(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDescription" }] : /* istanbul ignore next */ []));
+    hasEffectiveDescription = computed(() => !!this.effectiveDescription(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasEffectiveDescription" }] : /* istanbul ignore next */ []));
+    headerContentClasses = computed(() => zMergeClasses('flex w-full justify-between overflow-hidden px-4', this.hasEffectiveDescription() ? 'items-start' : 'items-center'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerContentClasses" }] : /* istanbul ignore next */ []));
+    effectiveBodyClass = computed(() => this.isServiceMode() ? this.config.zBodyClass : this.zBodyClass(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveBodyClass" }] : /* istanbul ignore next */ []));
+    bodyClasses = computed(() => zMergeClasses('flex min-h-0 flex-col gap-4 px-4 py-4', this.effectiveBodyClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* 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 */
+    ...(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 */
+    ...(ngDevMode ? [{ debugName: "effectiveHeaderBorder" }] : /* istanbul ignore next */ []));
+    effectiveFooterBorder = computed(() => this.isServiceMode() ? (this.config.zFooterBorder ?? false) : 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 */ []));
+    effectiveHideHeader = computed(() => this.isServiceMode() ? (this.config.zHideHeader ?? false) : this.zHideHeader(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHideHeader" }] : /* istanbul ignore next */ []));
+    effectiveOkText = computed(() => (this.isServiceMode() ? this.config.zOkText : this.zOkText()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOkText" }] : /* istanbul ignore next */ []));
+    effectiveCancelText = computed(() => this.isServiceMode() ? this.config.zCancelText : this.zCancelText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveCancelText" }] : /* istanbul ignore next */ []));
+    effectiveOkDestructive = computed(() => this.isServiceMode() ? this.config.zOkDestructive : this.zOkDestructive(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOkDestructive" }] : /* istanbul ignore next */ []));
+    effectiveOkDisabled = computed(() => this.isServiceMode() ? this.config.zOkDisabled : this.zOkDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOkDisabled" }] : /* istanbul ignore next */ []));
     effectiveLoading = computed(() => {
         if (this.isServiceMode()) {
             return this.drawerRef?.loading() || (this.config.zLoading?.() ?? false);
         }
         return this.zLoading();
-    }, ...(ngDevMode ? [{ debugName: "effectiveLoading" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveLoading" }] : /* istanbul ignore next */ []));
     effectiveContentLoading = computed(() => {
         if (this.isServiceMode()) {
             return this.config.zContentLoading?.() ?? false;
         }
         return this.zContentLoading();
-    }, ...(ngDevMode ? [{ debugName: "effectiveContentLoading" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveContentLoading" }] : /* istanbul ignore next */ []));
     effectiveSkeletonRows = computed(() => {
         if (this.isServiceMode() && this.config.zSkeletonRows != null) {
             return this.config.zSkeletonRows;
@@ -301,52 +386,75 @@ class ZDrawerComponent extends BasePortalOutlet {
         }
         const placement = this.effectivePlacement();
         return placement === 'left' || placement === 'right' ? 6 : 3;
-    }, ...(ngDevMode ? [{ debugName: "effectiveSkeletonRows" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSkeletonRows" }] : /* istanbul ignore next */ []));
     effectivePlacement = computed(() => {
         if (this.isServiceMode()) {
             return this.config.zPlacement ?? 'right';
         }
         return this.zPlacement();
-    }, ...(ngDevMode ? [{ debugName: "effectivePlacement" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlacement" }] : /* istanbul ignore next */ []));
+    effectiveExpand = computed(() => this.isServiceMode() ? (this.config.zExpand ?? false) : this.zExpand(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveExpand" }] : /* istanbul ignore next */ []));
+    resizeIcon = computed(() => {
+        const placement = this.effectivePlacement();
+        return placement === 'left' || placement === 'right' ? 'lucideGripVertical' : 'lucideGripHorizontal';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeIcon" }] : /* istanbul ignore next */ []));
     effectiveShadow = computed(() => {
         if (this.isServiceMode()) {
             return this.config.zShadow ?? false;
         }
         return this.zShadow();
-    }, ...(ngDevMode ? [{ debugName: "effectiveShadow" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveShadow" }] : /* istanbul ignore next */ []));
     effectiveShape = computed(() => {
         if (this.isServiceMode()) {
             return this.config.zShape ?? 'rounded';
         }
         return this.zShape();
-    }, ...(ngDevMode ? [{ debugName: "effectiveShape" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveShape" }] : /* istanbul ignore next */ []));
     effectiveWidth = computed(() => {
         const placement = this.effectivePlacement();
         if (placement === 'top' || placement === 'bottom') {
             return null;
         }
+        const resized = this._resizedWidth();
+        if (resized) {
+            return resized;
+        }
         if (this.isServiceMode()) {
             return this.zWidth() || this.config.zWidth || null;
         }
         return this.shouldRenderContent() ? this.zWidth() : null;
-    }, ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
     effectiveHeight = computed(() => {
         const placement = this.effectivePlacement();
         if (placement === 'left' || placement === 'right') {
             return null;
         }
+        const resized = this._resizedHeight();
+        if (resized) {
+            return resized;
+        }
         if (this.isServiceMode()) {
             return this.zHeight() || this.config.zHeight || null;
         }
         return this.shouldRenderContent() ? this.zHeight() : null;
-    }, ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : /* istanbul ignore next */ []));
     isDeferLoading = computed(() => {
         if (!this.isServiceMode()) {
             return false;
         }
         return !!this.config.zDefer && !this.portalOutlet()?.hasAttached();
-    }, ...(ngDevMode ? [{ debugName: "isDeferLoading" }] : []));
-    classes = computed(() => zMergeClasses(zDrawerVariants({ placement: this.effectivePlacement(), shape: this.effectiveShape() }), this.isServiceMode() ? this.config.class : this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDeferLoading" }] : /* istanbul ignore next */ []));
+    classes = computed(() => zMergeClasses(zDrawerVariants({ placement: this.effectivePlacement(), shape: this.effectiveShape() }), this.isServiceMode() ? this.config.class : this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => {
         const baseClasses = this.classes();
         if (this.isServiceMode()) {
@@ -356,13 +464,17 @@ class ZDrawerComponent extends BasePortalOutlet {
             return `${baseClasses} z-drawer-template-mode`.trim();
         }
         return 'z-drawer-template-host';
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         effect(() => {
             this._zTranslate.currentLang();
             this._cdr.markForCheck();
         });
+        if (isPlatformBrowser(this._platformId) && this.isServiceMode()) {
+            void this._restoreResize();
+        }
         effect(() => {
             const scrollbar = this.mainContentRef();
             if (scrollbar) {
@@ -382,8 +494,63 @@ class ZDrawerComponent extends BasePortalOutlet {
     }
     ngOnDestroy() {
         this._clearCloseTimeout();
+        this._resizeCleanup?.();
         this._disposeTemplateOverlay();
     }
+    startResize(event) {
+        if (!this.effectiveExpand() || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        this.isResizing.set(true);
+        const host = this._host.nativeElement;
+        const placement = this.effectivePlacement();
+        const horizontal = placement === 'left' || placement === 'right';
+        const startCoordinate = horizontal ? event.clientX : event.clientY;
+        const startSize = horizontal ? host.getBoundingClientRect().width : host.getBoundingClientRect().height;
+        const direction = placement === 'left' || placement === 'top' ? 1 : -1;
+        const onMove = (moveEvent) => {
+            const delta = (horizontal ? moveEvent.clientX : moveEvent.clientY) - startCoordinate;
+            const maxSize = (horizontal ? window.innerWidth : window.innerHeight) - Z_DRAWER_RESIZE_VIEWPORT_PADDING;
+            const size = Math.min(maxSize, Math.max(Z_DRAWER_RESIZE_MIN_SIZE, startSize + delta * direction));
+            const value = `${Math.round(size)}px`;
+            if (horizontal) {
+                this._resizedWidth.set(value);
+            }
+            else {
+                this._resizedHeight.set(value);
+            }
+        };
+        const onUp = () => {
+            this._resizeCleanup?.();
+            this._resizeCleanup = null;
+            this.isResizing.set(false);
+            void this._persistResize();
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp, { once: true });
+        this._resizeCleanup = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+        };
+    }
+    onHostPointerDown(event) {
+        if (!this.effectiveExpand() || event.button !== 0) {
+            return;
+        }
+        const rect = this._host.nativeElement.getBoundingClientRect();
+        const placement = this.effectivePlacement();
+        const distance = placement === 'left'
+            ? rect.right - event.clientX
+            : placement === 'right'
+                ? event.clientX - rect.left
+                : placement === 'top'
+                    ? rect.bottom - event.clientY
+                    : event.clientY - rect.top;
+        if (distance <= 16) {
+            this.startResize(event);
+        }
+    }
     isDestroyed() {
         return this._destroyRef.destroyed;
     }
@@ -460,6 +627,7 @@ class ZDrawerComponent extends BasePortalOutlet {
         if (!this._templateOverlayRef) {
             return;
         }
+        void this._restoreResize();
         this._zIndexService.applyToOverlay(this._templateOverlayRef);
         const hostElement = this._host.nativeElement;
         this._originalParent = hostElement.parentElement;
@@ -473,6 +641,39 @@ class ZDrawerComponent extends BasePortalOutlet {
             this.onBackdropClick();
         });
     }
+    _getResizeKey() {
+        const title = this.effectiveTitle();
+        const titleKey = typeof title === 'string' && title.trim() ? title.trim() : 'default';
+        return `${Z_DRAWER_RESIZE_KEY_PREFIX}:${this.effectivePlacement()}:${titleKey}`;
+    }
+    async _restoreResize() {
+        if (!this._indexDb) {
+            return;
+        }
+        const key = this._getResizeKey();
+        if (key === this._resizeStorageKey) {
+            return;
+        }
+        this._resizeStorageKey = key;
+        const saved = await this._indexDb.get(key);
+        if (saved?.width) {
+            this._resizedWidth.set(saved.width);
+        }
+        if (saved?.height) {
+            this._resizedHeight.set(saved.height);
+        }
+    }
+    async _persistResize() {
+        if (!this._indexDb) {
+            return;
+        }
+        const width = this._resizedWidth();
+        const height = this._resizedHeight();
+        if (!width && !height) {
+            return;
+        }
+        await this._indexDb.set(this._getResizeKey(), { width, height }).catch(() => undefined);
+    }
     _closeWithAnimation() {
         if (this.isLeaving()) {
             return;
@@ -523,10 +724,28 @@ class ZDrawerComponent extends BasePortalOutlet {
             this._backdropSubscription = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZDrawerComponent, isStandalone: true, selector: "z-drawer", 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 }, 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 }, 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 }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zHideHeader: { classPropertyName: "zHideHeader", publicName: "zHideHeader", 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", zAfterClose: "zAfterClose", 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\n        [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [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}.z-drawer-header-border{border-bottom:1px solid var(--border)}.z-drawer-footer-border{border-top:1px solid var(--border)}:host header{padding-top:1rem;padding-bottom:1rem}:host footer{padding-top:1rem;padding-bottom:1rem}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: .125rem}\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('@angular/cdk/scrolling').then(m => m.CdkScrollable), 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('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZDrawerComponent, isStandalone: true, selector: "z-drawer", 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 }, 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 }, 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 }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zHideHeader: { classPropertyName: "zHideHeader", publicName: "zHideHeader", 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 }, zExpand: { classPropertyName: "zExpand", publicName: "zExpand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnOk: "zOnOk", zOnCancel: "zOnCancel", zAfterClose: "zAfterClose", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { listeners: { "pointerdown": "onHostPointerDown($event)" }, properties: { "class": "hostClasses()", "style.width": "effectiveWidth()", "style.height": "effectiveHeight()", "attr.data-placement": "effectivePlacement()", "class.z-drawer-resizing": "isResizing()" } }, 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\n        [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n@if (effectiveExpand()) {\n  <button\n    type=\"button\"\n    class=\"z-drawer-resize-handle\"\n    [attr.data-placement]=\"effectivePlacement()\"\n    [attr.aria-label]=\"'i18n_z_ui_drawer_resize' | translate\"\n    (pointerdown)=\"$event.stopPropagation(); startResize($event)\">\n    <z-icon [zType]=\"$any(resizeIcon())\" zSize=\"14\" />\n  </button>\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [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;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}.z-drawer-header-border{border-bottom:1px solid var(--border)}.z-drawer-footer-border{border-top:1px solid var(--border)}:host header{padding-top:1rem;padding-bottom:1rem}:host footer{padding-top:1rem;padding-bottom:1rem}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: .125rem}.z-drawer-resize-handle{position:absolute;z-index:60;display:flex;align-items:center;justify-content:center;width:10px;height:100%;padding:0;color:var(--muted-foreground);cursor:col-resize;opacity:0;border:0;background:transparent;pointer-events:auto;transition:opacity .15s ease,border-color .15s ease}.z-drawer-resize-handle:after{position:absolute;content:\"\";background:var(--primary);opacity:0;transition:opacity .15s ease}.z-drawer-resize-handle>z-icon{position:absolute;z-index:1;opacity:0;transition:opacity .15s ease}.z-drawer-resize-handle:hover,.z-drawer-resize-handle:focus-visible{opacity:1;color:var(--primary);outline:none}.z-drawer-resize-handle:hover:after,.z-drawer-resize-handle:focus-visible:after{opacity:1}.z-drawer-resize-handle:hover>z-icon,.z-drawer-resize-handle:focus-visible>z-icon{opacity:1}.z-drawer-resize-handle[data-placement=left]{right:-7px;top:0;bottom:0;width:10px;cursor:col-resize}.z-drawer-resize-handle[data-placement=right]{left:-7px;top:0;bottom:0;width:16px;cursor:col-resize}.z-drawer-resize-handle[data-placement=top]{bottom:-7px;left:0;right:0;width:auto;height:16px;cursor:row-resize}.z-drawer-resize-handle[data-placement=bottom]{top:-7px;left:0;right:0;width:auto;height:16px;cursor:row-resize}.z-drawer-resize-handle[data-placement=left]:after,.z-drawer-resize-handle[data-placement=right]:after{top:50%;left:50%;width:2px;height:100px;transform:translate(-50%,-50%)}.z-drawer-resize-handle[data-placement=top]:after,.z-drawer-resize-handle[data-placement=bottom]:after{top:50%;left:50%;width:100px;height:2px;transform:translate(-50%,-50%)}.z-drawer-resize-handle[data-placement=left]>z-icon,.z-drawer-resize-handle[data-placement=right]>z-icon{top:50%;left:50%;transform:translate(-50%,-50%)}.z-drawer-resize-handle[data-placement=top]>z-icon,.z-drawer-resize-handle[data-placement=bottom]>z-icon{top:50%;left:50%;transform:translate(-50%,-50%)}:host.z-drawer-resizing .z-drawer-resize-handle{opacity:1;color:var(--primary)}:host.z-drawer-resizing .z-drawer-resize-handle:after,:host.z-drawer-resizing .z-drawer-resize-handle>z-icon{opacity:1}:host.z-drawer-service-mode,:host.z-drawer-template-mode{overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
+                import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), ZIconComponent, /* @ts-ignore */
+                import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), /* @ts-ignore */
+                import('ngx-scrollbar').then(m => m.NgScrollbar), /* @ts-ignore */
+                import('@angular/cdk/scrolling').then(m => m.CdkScrollable), /* @ts-ignore */
+                import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), /* @ts-ignore */
+                import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe], () => [i1.CdkPortalOutlet, NgTemplateOutlet, /* @ts-ignore */
+                import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), ZIconComponent, /* @ts-ignore */
+                import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), /* @ts-ignore */
+                import('ngx-scrollbar').then(m => m.NgScrollbar), /* @ts-ignore */
+                import('@angular/cdk/scrolling').then(m => m.CdkScrollable), /* @ts-ignore */
+                import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), /* @ts-ignore */
+                import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe), TranslatePipe]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.9", 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('@angular/cdk/scrolling').then(m => m.CdkScrollable), import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe)], resolveMetadata: (ZButtonComponent, ZIconComponent, ZTooltipDirective, NgScrollbar, CdkScrollable, ZContentTypePipe, ZSafeHtmlPipe) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerComponent, resolveDeferredDeps: () => [/* @ts-ignore */
+        import('@shival99/z-ui/components/z-button').then(m => m.ZButtonComponent), /* @ts-ignore */
+        import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), /* @ts-ignore */
+        import('ngx-scrollbar').then(m => m.NgScrollbar), /* @ts-ignore */
+        import('@angular/cdk/scrolling').then(m => m.CdkScrollable), /* @ts-ignore */
+        import('@shival99/z-ui/pipes').then(m => m.ZContentTypePipe), /* @ts-ignore */
+        import('@shival99/z-ui/pipes').then(m => m.ZSafeHtmlPipe)], resolveMetadata: (ZButtonComponent, ZTooltipDirective, NgScrollbar, CdkScrollable, ZContentTypePipe, ZSafeHtmlPipe) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'z-drawer', imports: [
                             PortalModule,
@@ -545,8 +764,10 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.9", 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\n        [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [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}.z-drawer-header-border{border-bottom:1px solid var(--border)}.z-drawer-footer-border{border-top:1px solid var(--border)}:host header{padding-top:1rem;padding-bottom:1rem}:host footer{padding-top:1rem;padding-bottom:1rem}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: .125rem}\n"] }]
-            }], ctorParameters: () => [], propDecorators: { zOnOk: [{ type: i0.Output, args: ["zOnOk"] }], zOnCancel: [{ type: i0.Output, args: ["zOnCancel"] }], 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 }] }], 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 }] }], 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 }] }], zHideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideFooter", required: false }] }], zHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideHeader", 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 }] }] } }) });
+                            '(pointerdown)': 'onHostPointerDown($event)',
+                            '[class.z-drawer-resizing]': 'isResizing()',
+                        }, 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\n        [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n@if (effectiveExpand()) {\n  <button\n    type=\"button\"\n    class=\"z-drawer-resize-handle\"\n    [attr.data-placement]=\"effectivePlacement()\"\n    [attr.aria-label]=\"'i18n_z_ui_drawer_resize' | translate\"\n    (pointerdown)=\"$event.stopPropagation(); startResize($event)\">\n    <z-icon [zType]=\"$any(resizeIcon())\" zSize=\"14\" />\n  </button>\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (!effectiveHideHeader()) {\n      @if (effectiveTitle()) {\n        <header\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-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-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]=\"$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-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                      {{ $any(description) | translate }}\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\n          [class.z-drawer-header-shadow]=\"shouldShowShadow()\"\n          [class.z-drawer-header-border]=\"effectiveHeaderBorder()\">\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\n    <ng-scrollbar\n      class=\"z-drawer-scrollbar flex-1\"\n      #mainContent\n      track=\"vertical\"\n      cdkScrollable\n      (scroll)=\"onContentScroll($event)\">\n      <main [class]=\"bodyClasses()\">\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\n        [class.z-drawer-footer-shadow]=\"shouldShowShadow()\"\n        [class.z-drawer-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              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 class=\"h-full\" [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;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}.z-drawer-header-border{border-bottom:1px solid var(--border)}.z-drawer-footer-border{border-top:1px solid var(--border)}:host header{padding-top:1rem;padding-bottom:1rem}:host footer{padding-top:1rem;padding-bottom:1rem}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out}.z-drawer-scrollbar{--scrollbar-padding: .125rem}.z-drawer-resize-handle{position:absolute;z-index:60;display:flex;align-items:center;justify-content:center;width:10px;height:100%;padding:0;color:var(--muted-foreground);cursor:col-resize;opacity:0;border:0;background:transparent;pointer-events:auto;transition:opacity .15s ease,border-color .15s ease}.z-drawer-resize-handle:after{position:absolute;content:\"\";background:var(--primary);opacity:0;transition:opacity .15s ease}.z-drawer-resize-handle>z-icon{position:absolute;z-index:1;opacity:0;transition:opacity .15s ease}.z-drawer-resize-handle:hover,.z-drawer-resize-handle:focus-visible{opacity:1;color:var(--primary);outline:none}.z-drawer-resize-handle:hover:after,.z-drawer-resize-handle:focus-visible:after{opacity:1}.z-drawer-resize-handle:hover>z-icon,.z-drawer-resize-handle:focus-visible>z-icon{opacity:1}.z-drawer-resize-handle[data-placement=left]{right:-7px;top:0;bottom:0;width:10px;cursor:col-resize}.z-drawer-resize-handle[data-placement=right]{left:-7px;top:0;bottom:0;width:16px;cursor:col-resize}.z-drawer-resize-handle[data-placement=top]{bottom:-7px;left:0;right:0;width:auto;height:16px;cursor:row-resize}.z-drawer-resize-handle[data-placement=bottom]{top:-7px;left:0;right:0;width:auto;height:16px;cursor:row-resize}.z-drawer-resize-handle[data-placement=left]:after,.z-drawer-resize-handle[data-placement=right]:after{top:50%;left:50%;width:2px;height:100px;transform:translate(-50%,-50%)}.z-drawer-resize-handle[data-placement=top]:after,.z-drawer-resize-handle[data-placement=bottom]:after{top:50%;left:50%;width:100px;height:2px;transform:translate(-50%,-50%)}.z-drawer-resize-handle[data-placement=left]>z-icon,.z-drawer-resize-handle[data-placement=right]>z-icon{top:50%;left:50%;transform:translate(-50%,-50%)}.z-drawer-resize-handle[data-placement=top]>z-icon,.z-drawer-resize-handle[data-placement=bottom]>z-icon{top:50%;left:50%;transform:translate(-50%,-50%)}:host.z-drawer-resizing .z-drawer-resize-handle{opacity:1;color:var(--primary)}:host.z-drawer-resizing .z-drawer-resize-handle:after,:host.z-drawer-resizing .z-drawer-resize-handle>z-icon{opacity:1}:host.z-drawer-service-mode,:host.z-drawer-template-mode{overflow:visible}\n"] }]
+            }], ctorParameters: () => [], propDecorators: { zOnOk: [{ type: i0.Output, args: ["zOnOk"] }], zOnCancel: [{ type: i0.Output, args: ["zOnCancel"] }], 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 }] }], 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 }] }], 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 }] }], zHideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideFooter", required: false }] }], zHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideHeader", 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 }] }], zExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "zExpand", 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;
@@ -557,7 +778,8 @@ let ZDrawerRef = class ZDrawerRef {
     _isClosing = false;
     _result;
     componentInstance = null;
-    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     zAfterClose = new EventEmitter();
     constructor(_overlayRef, _config, _containerInstance, _platformId) {
         this._overlayRef = _overlayRef;
@@ -724,10 +946,10 @@ class ZDrawerService {
             ],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZDrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',