@shival99/z-ui 2.4.7 → 2.4.10

package/assets/css/global.css

@@ -8,17 +8,6 @@
 @import 'vidstack/player/styles/default/layouts/audio.css';
 @import 'vidstack/player/styles/plyr/theme.css';
 
-/* Hover-glide items (see components/z-hover-glide): pin each item to its own stable GPU layer so
-   the sliding highlight beneath/behind it — which does animate `transform` — never forces Chromium
-   to squash the item's text into that same compositing layer for the duration of the glide. Without
-   this, the text visibly flashes blurry (GPU-rasterized) then sharp (reverted to native text
-   rendering) each time the highlight passes under it, even though the text itself never moves. */
-[data-glide-item] {
-  transform: translateZ(0);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 /* CDK drag-drop */
 .cdk-drag-preview {
   box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);

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

@@ -52,7 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const Z_DRAWER_DATA = new InjectionToken('Z_DRAWER_DATA');
-const Z_DRAWER_ANIMATION_DURATION = 500;
+const Z_DRAWER_ANIMATION_DURATION = 450;
 const Z_DRAWER_RESIZE_MIN_SIZE = 240;
 const Z_DRAWER_RESIZE_VIEWPORT_PADDING = 32;
 const Z_DRAWER_RESIZE_KEY_PREFIX = 'z-drawer-resize';
@@ -762,7 +762,7 @@ class ZDrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, zScrollMode: { classPropertyName: "zScrollMode", publicName: "zScrollMode", 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: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zDrawer"], ngImport: i0, template: "<!-- 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 #contentOutlet />\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: ["@charset \"UTF-8\";:host.z-drawer-service-mode,:host.z-drawer-template-mode{pointer-events:auto}:host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .5s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .5s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-dark.z-backdrop-leaving,::ng-deep .z-drawer-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .5s cubic-bezier(.32,.72,0,1) forwards}.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-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-drawer-inner-scroll-mode .z-drawer-scrollbar{height:100%;min-height:0;flex:1 1 0%;overflow:hidden auto}:host.z-drawer-inner-scroll-mode main{box-sizing:border-box;display:flex;min-height:100%;flex:1 1 0%;flex-direction:column}:host.z-drawer-inner-scroll-mode ::ng-deep .z-drawer-scrollbar .ng-scroll-content{display:flex;min-height:100%;flex-direction:column}.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: "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 */
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, zScrollMode: { classPropertyName: "zScrollMode", publicName: "zScrollMode", 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: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zDrawer"], ngImport: i0, template: "<!-- 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 #contentOutlet />\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: ["@charset \"UTF-8\";:host.z-drawer-service-mode,:host.z-drawer-template-mode{pointer-events:auto}:host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .45s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .45s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-dark.z-backdrop-leaving,::ng-deep .z-drawer-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .45s cubic-bezier(.32,.72,0,1) forwards}.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-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-drawer-inner-scroll-mode .z-drawer-scrollbar{height:100%;min-height:0;flex:1 1 0%;overflow:hidden auto}:host.z-drawer-inner-scroll-mode main{box-sizing:border-box;display:flex;min-height:100%;flex:1 1 0%;flex-direction:column}:host.z-drawer-inner-scroll-mode ::ng-deep .z-drawer-scrollbar .ng-scroll-content{display:flex;min-height:100%;flex-direction:column}.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: "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 */
@@ -802,7 +802,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.6", ng
                             '[attr.data-placement]': 'effectivePlacement()',
                             '(pointerdown)': 'onHostPointerDown($event)',
                             '[class.z-drawer-resizing]': 'isResizing()',
-                        }, exportAs: 'zDrawer', template: "<!-- 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 #contentOutlet />\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: ["@charset \"UTF-8\";:host.z-drawer-service-mode,:host.z-drawer-template-mode{pointer-events:auto}:host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,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 .5s cubic-bezier(.32,.72,0,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .5s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .5s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-dark.z-backdrop-leaving,::ng-deep .z-drawer-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .5s cubic-bezier(.32,.72,0,1) forwards}.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-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-drawer-inner-scroll-mode .z-drawer-scrollbar{height:100%;min-height:0;flex:1 1 0%;overflow:hidden auto}:host.z-drawer-inner-scroll-mode main{box-sizing:border-box;display:flex;min-height:100%;flex:1 1 0%;flex-direction:column}:host.z-drawer-inner-scroll-mode ::ng-deep .z-drawer-scrollbar .ng-scroll-content{display:flex;min-height:100%;flex-direction:column}.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"] }]
+                        }, exportAs: 'zDrawer', template: "<!-- 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 #contentOutlet />\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: ["@charset \"UTF-8\";:host.z-drawer-service-mode,:host.z-drawer-template-mode{pointer-events:auto}:host.z-drawer-service-mode[data-placement=left],:host.z-drawer-template-mode[data-placement=left]{--z-enter-translate-x: -100%;animation:z-enter .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,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 .45s cubic-bezier(.32,.72,0,1) forwards}:host.z-drawer-template-host{display:contents}::ng-deep .z-drawer-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .45s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .45s cubic-bezier(.32,.72,0,1) forwards}::ng-deep .z-drawer-backdrop-dark.z-backdrop-leaving,::ng-deep .z-drawer-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .45s cubic-bezier(.32,.72,0,1) forwards}.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-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-drawer-inner-scroll-mode .z-drawer-scrollbar{height:100%;min-height:0;flex:1 1 0%;overflow:hidden auto}:host.z-drawer-inner-scroll-mode main{box-sizing:border-box;display:flex;min-height:100%;flex:1 1 0%;flex-direction:column}:host.z-drawer-inner-scroll-mode ::ng-deep .z-drawer-scrollbar .ng-scroll-content{display:flex;min-height:100%;flex-direction:column}.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 }] }], zScrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollMode", 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 }] }], contentOutlet: [{ type: i0.ViewChild, args: ['contentOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } }) });
 
 let ZDrawerRef = class ZDrawerRef {