@shival99/z-ui 2.5.2 → 2.5.4

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

@@ -287,13 +287,13 @@ class ZCommandComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZCommandComponent, isStandalone: true, selector: "z-command", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zGroups: { classPropertyName: "zGroups", publicName: "zGroups", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zSelect: "zSelect", zAfterClose: "zAfterClose", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["zCommand"], ngImport: i0, template: "@if (shouldRenderContent()) {\n  <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n    <!-- Search Bar -->\n    <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n      <input\n        type=\"text\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchQueryChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n        #searchInput />\n      <kbd\n        class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded-sm border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n        <span>ESC</span>\n      </kbd>\n    </div>\n\n    <!-- Scrollable Results List using NgScrollbar -->\n    <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n      <div zHoverGlide zHoverGlideClass=\"bg-primary/10 rounded-(--radius-sm)\" class=\"space-y-1 p-2\">\n        @if (flattenedItems().length === 0) {\n          <div class=\"text-muted-foreground py-6 text-center text-sm\">\n            {{ 'i18n_z_ui_command_no_results' | translate }}\n          </div>\n        } @else {\n          @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n            @if (!isFirst) {\n              <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n            }\n\n            <div\n              class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n              {{ group.heading }}\n            </div>\n\n            <div class=\"space-y-0.5\">\n              @for (item of group.items; track item.id) {\n                <div\n                  data-glide-item\n                  class=\"z-command-item relative flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n                  [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n                  (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n                  (click)=\"selectItem(item)\">\n                  <div class=\"flex items-center gap-2.5\">\n                    @if (item.icon) {\n                      <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n                    }\n                    <span>{{ item.label }}</span>\n                  </div>\n\n                  @if (item.shortcut) {\n                    <kbd\n                      class=\"text-muted-foreground bg-muted/50 border-border/40 rounded-sm border px-1 font-mono text-[9px]\">\n                      {{ item.shortcut }}\n                    </kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </ng-scrollbar>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host.z-command-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .97;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-command-template-mode.command-leave{--z-exit-opacity: 0;--z-exit-scale: .97;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-command-template-host{display:contents}.z-command-item{color:hsl(var(--foreground)/.85);transition:background-color .12s ease,color .12s ease}.z-command-item.z-command-item-active{background-color:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important}ng-scrollbar.z-command-scrollbar{max-height:330px;display:block}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZCommandComponent, isStandalone: true, selector: "z-command", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zGroups: { classPropertyName: "zGroups", publicName: "zGroups", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zSelect: "zSelect", zAfterClose: "zAfterClose", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["zCommand"], ngImport: i0, template: "@if (shouldRenderContent()) {\n  <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n    <!-- Search Bar -->\n    <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n      <input\n        type=\"text\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchQueryChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n        #searchInput />\n      <kbd\n        class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded-sm border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n        <span>ESC</span>\n      </kbd>\n    </div>\n\n    <!-- Scrollable Results List using NgScrollbar -->\n    <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n      <div zHoverGlide zHoverGlideClass=\"bg-primary/10 rounded-(--radius-sm)\" class=\"space-y-1 p-2\">\n        @if (flattenedItems().length === 0) {\n          <div class=\"text-muted-foreground py-6 text-center text-sm\">\n            {{ 'i18n_z_ui_command_no_results' | translate }}\n          </div>\n        } @else {\n          @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n            @if (!isFirst) {\n              <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n            }\n\n            <div\n              class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n              {{ group.heading }}\n            </div>\n\n            <div class=\"space-y-0.5\">\n              @for (item of group.items; track item.id) {\n                <div\n                  data-glide-item\n                  class=\"z-command-item relative flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n                  [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n                  (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n                  (click)=\"selectItem(item)\">\n                  <div class=\"flex items-center gap-2.5\">\n                    @if (item.icon) {\n                      <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n                    }\n                    <span>{{ item.label }}</span>\n                  </div>\n\n                  @if (item.shortcut) {\n                    <kbd\n                      class=\"text-muted-foreground bg-muted/50 border-border/40 rounded-sm border px-1 font-mono text-[9px]\">\n                      {{ item.shortcut }}\n                    </kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </ng-scrollbar>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host.z-command-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .97;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-command-template-mode.command-leave{--z-exit-opacity: 0;--z-exit-scale: .97;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-command-template-host{display:contents}.z-command-item{color:hsl(var(--foreground)/.85);transition:background-color .12s ease,color .12s ease}.z-command-item.z-command-item-active{background-color:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important}ng-scrollbar.z-command-scrollbar{max-height:330px;display:block}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZCommandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-command', imports: [FormsModule, ZIconComponent, TranslatePipe, NgScrollbar, ZHoverGlideDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
-                    }, exportAs: 'zCommand', template: "@if (shouldRenderContent()) {\n  <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n    <!-- Search Bar -->\n    <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n      <input\n        type=\"text\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchQueryChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n        #searchInput />\n      <kbd\n        class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded-sm border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n        <span>ESC</span>\n      </kbd>\n    </div>\n\n    <!-- Scrollable Results List using NgScrollbar -->\n    <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n      <div zHoverGlide zHoverGlideClass=\"bg-primary/10 rounded-(--radius-sm)\" class=\"space-y-1 p-2\">\n        @if (flattenedItems().length === 0) {\n          <div class=\"text-muted-foreground py-6 text-center text-sm\">\n            {{ 'i18n_z_ui_command_no_results' | translate }}\n          </div>\n        } @else {\n          @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n            @if (!isFirst) {\n              <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n            }\n\n            <div\n              class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n              {{ group.heading }}\n            </div>\n\n            <div class=\"space-y-0.5\">\n              @for (item of group.items; track item.id) {\n                <div\n                  data-glide-item\n                  class=\"z-command-item relative flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n                  [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n                  (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n                  (click)=\"selectItem(item)\">\n                  <div class=\"flex items-center gap-2.5\">\n                    @if (item.icon) {\n                      <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n                    }\n                    <span>{{ item.label }}</span>\n                  </div>\n\n                  @if (item.shortcut) {\n                    <kbd\n                      class=\"text-muted-foreground bg-muted/50 border-border/40 rounded-sm border px-1 font-mono text-[9px]\">\n                      {{ item.shortcut }}\n                    </kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </ng-scrollbar>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host.z-command-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .97;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-command-template-mode.command-leave{--z-exit-opacity: 0;--z-exit-scale: .97;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-command-template-host{display:contents}.z-command-item{color:hsl(var(--foreground)/.85);transition:background-color .12s ease,color .12s ease}.z-command-item.z-command-item-active{background-color:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important}ng-scrollbar.z-command-scrollbar{max-height:330px;display:block}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}\n"] }]
+                    }, exportAs: 'zCommand', template: "@if (shouldRenderContent()) {\n  <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n    <!-- Search Bar -->\n    <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n      <input\n        type=\"text\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchQueryChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n        #searchInput />\n      <kbd\n        class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded-sm border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n        <span>ESC</span>\n      </kbd>\n    </div>\n\n    <!-- Scrollable Results List using NgScrollbar -->\n    <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n      <div zHoverGlide zHoverGlideClass=\"bg-primary/10 rounded-(--radius-sm)\" class=\"space-y-1 p-2\">\n        @if (flattenedItems().length === 0) {\n          <div class=\"text-muted-foreground py-6 text-center text-sm\">\n            {{ 'i18n_z_ui_command_no_results' | translate }}\n          </div>\n        } @else {\n          @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n            @if (!isFirst) {\n              <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n            }\n\n            <div\n              class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n              {{ group.heading }}\n            </div>\n\n            <div class=\"space-y-0.5\">\n              @for (item of group.items; track item.id) {\n                <div\n                  data-glide-item\n                  class=\"z-command-item relative flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n                  [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n                  (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n                  (click)=\"selectItem(item)\">\n                  <div class=\"flex items-center gap-2.5\">\n                    @if (item.icon) {\n                      <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n                    }\n                    <span>{{ item.label }}</span>\n                  </div>\n\n                  @if (item.shortcut) {\n                    <kbd\n                      class=\"text-muted-foreground bg-muted/50 border-border/40 rounded-sm border px-1 font-mono text-[9px]\">\n                      {{ item.shortcut }}\n                    </kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </ng-scrollbar>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host.z-command-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .97;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-command-template-mode.command-leave{--z-exit-opacity: 0;--z-exit-scale: .97;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-command-template-host{display:contents}.z-command-item{color:hsl(var(--foreground)/.85);transition:background-color .12s ease,color .12s ease}.z-command-item.z-command-item-active{background-color:color-mix(in srgb,var(--primary) 12%,transparent)!important;color:var(--primary)!important}ng-scrollbar.z-command-scrollbar{max-height:330px;display:block}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zSelect: [{ type: i0.Output, args: ["zSelect"] }], zAfterClose: [{ type: i0.Output, args: ["zAfterClose"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisible", required: false }] }, { type: i0.Output, args: ["zVisibleChange"] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGroups", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
 /**

package/fesm2022/shival99-z-ui-components-z-command.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-command.mjs","sources":["../../../../libs/core-ui/components/z-command/z-command.define.ts","../../../../libs/core-ui/components/z-command/z-command.component.ts","../../../../libs/core-ui/components/z-command/z-command.component.html","../../../../libs/core-ui/components/z-command/shival99-z-ui-components-z-command.ts"],"sourcesContent":["import { zDetectBrowser } from '@shival99/z-ui/utils';\n\nexport const getOverlayType = (): 'dark' | 'blur' => {\n  const browser = zDetectBrowser();\n  if (browser.name === 'Chrome') {\n    return 'dark';\n  }\n  return 'blur';\n};\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  OnDestroy,\n  output,\n  PLATFORM_ID,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZHoverGlideDirective } from '@shival99/z-ui/components/z-hover-glide';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZOverlayService, type ZOverlayRef } from '@shival99/z-ui/components/z-overlay';\nimport { ZOverlayContainerService, ZOverlayZIndexService, ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { Subscription } from 'rxjs';\nimport { getOverlayType } from './z-command.define';\nimport { ZCommandGroup, ZCommandItem } from './z-command.types';\n\n@Component({\n  selector: 'z-command',\n  imports: [FormsModule, ZIconComponent, TranslatePipe, NgScrollbar, ZHoverGlideDirective],\n  standalone: true,\n  templateUrl: './z-command.component.html',\n  styleUrl: './z-command.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  exportAs: 'zCommand',\n})\nexport class ZCommandComponent implements OnDestroy {\n  public readonly zSelect = output<ZCommandItem>();\n  public readonly zAfterClose = output<void>();\n\n  public readonly class = input<ClassValue>('');\n  public readonly zVisible = model<boolean>(false);\n  public readonly zPlaceholder = input<string>('i18n_z_ui_command_search');\n  public readonly zGroups = input<ZCommandGroup[]>([]);\n  public readonly zOverlay = input<'dark' | 'blur'>(getOverlayType());\n\n  protected readonly searchInputRef = viewChild<ElementRef<HTMLInputElement>>('searchInput');\n\n  private readonly _platformId = inject(PLATFORM_ID);\n  private readonly _host = inject(ElementRef<HTMLElement>);\n  private readonly _overlayService = inject(ZOverlayService);\n  private readonly _cdr = inject(ChangeDetectorRef);\n  private readonly _destroyRef = inject(DestroyRef);\n  private readonly _zTranslate = inject(ZTranslateService);\n  private readonly _overlayContainerService = inject(ZOverlayContainerService);\n  private readonly _zIndexService = inject(ZOverlayZIndexService);\n\n  private _templateOverlayRef: ZOverlayRef | null = null;\n  private _originalParent: HTMLElement | null = null;\n  private _originalNextSibling: Node | null = null;\n  private _backdropSubscription: Subscription | null = null;\n  private _closeTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  protected readonly isLeaving = signal(false);\n  protected readonly shouldRenderContent = computed(() => this.zVisible() || this.isLeaving());\n  protected readonly searchQuery = signal('');\n  protected readonly selectedIndex = signal(0);\n\n  protected readonly filteredGroups = computed(() => {\n    const query = this.searchQuery().toLowerCase().trim();\n    const groups = this.zGroups();\n\n    if (!query) {\n      let currentIndex = 0;\n      return groups.map(group => {\n        const itemsWithIdx = group.items.map(item => {\n          const itemWithIdx = { ...item, globalIndex: currentIndex };\n          currentIndex++;\n          return itemWithIdx;\n        });\n        return { ...group, items: itemsWithIdx };\n      });\n    }\n\n    const matchedGroups = groups\n      .map(group => ({\n        ...group,\n        items: group.items.filter(\n          item => item.label.toLowerCase().includes(query) || group.heading.toLowerCase().includes(query)\n        ),\n      }))\n      .filter(group => group.items.length > 0);\n\n    let currentIndex = 0;\n    return matchedGroups.map(group => {\n      const itemsWithIdx = group.items.map(item => {\n        const itemWithIdx = { ...item, globalIndex: currentIndex };\n        currentIndex++;\n        return itemWithIdx;\n      });\n      return { ...group, items: itemsWithIdx };\n    });\n  });\n\n  protected readonly flattenedItems = computed(() =>\n    this.filteredGroups().reduce<ZCommandItem[]>((acc, group) => acc.concat(group.items), [])\n  );\n\n  protected readonly classes = computed(() =>\n    zMergeClasses(\n      'z-command-dialog border-border bg-popover text-popover-foreground fixed top-[15vh] left-1/2 -translate-x-1/2 w-[calc(100vw-2rem)] sm:w-full max-w-[640px] rounded-xl border shadow-2xl overflow-hidden flex flex-col',\n      this.class()\n    )\n  );\n\n  protected readonly hostClasses = computed(() => {\n    const baseClasses = this.classes();\n    if (this.shouldRenderContent()) {\n      return `${baseClasses} z-command-template-mode`.trim();\n    }\n    return 'z-command-template-host hidden';\n  });\n\n  constructor() {\n    effect(() => {\n      this._zTranslate.currentLang();\n      this._cdr.markForCheck();\n    });\n\n    effect(() => {\n      const visible = this.zVisible();\n      if (visible && !this._templateOverlayRef) {\n        this._openTemplateOverlay();\n        return;\n      }\n\n      if (!visible && this._templateOverlayRef && !this.isLeaving()) {\n        this._closeWithAnimation();\n      }\n    });\n\n    // Reset selectedIndex whenever search query changes\n    effect(() => {\n      this.searchQuery();\n      this.selectedIndex.set(0);\n    });\n  }\n\n  public ngOnDestroy(): void {\n    this._clearCloseTimeout();\n    this._disposeTemplateOverlay();\n  }\n\n  public isDestroyed(): boolean {\n    return this._destroyRef.destroyed;\n  }\n\n  public getNativeElement(): HTMLElement {\n    return this._host.nativeElement;\n  }\n\n  public onSearchQueryChange(query: string): void {\n    this.searchQuery.set(query);\n  }\n\n  public onKeyDown(event: KeyboardEvent): void {\n    const items = this.flattenedItems();\n    if (!items.length) {\n      if (event.key === 'Escape') {\n        this.close();\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'Down') {\n      event.preventDefault();\n      this.selectedIndex.set((this.selectedIndex() + 1) % items.length);\n      this._scrollToSelected();\n      return;\n    }\n    if (event.key === 'ArrowUp' || event.key === 'Up') {\n      event.preventDefault();\n      this.selectedIndex.set((this.selectedIndex() - 1 + items.length) % items.length);\n      this._scrollToSelected();\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.selectItem(items[this.selectedIndex()]);\n      return;\n    }\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n  }\n\n  protected selectItem(item: ZCommandItem): void {\n    this.zSelect.emit(item);\n    this.close();\n  }\n\n  public open(): void {\n    this.isLeaving.set(false);\n    this.zVisible.set(true);\n  }\n\n  public close(): void {\n    this._closeWithAnimation();\n  }\n\n  private _createOverlay(): ZOverlayRef | null {\n    if (!isPlatformBrowser(this._platformId)) {\n      return null;\n    }\n\n    const overlayType = this.zOverlay();\n    const backdropClass = overlayType === 'blur' ? 'z-modal-backdrop-blur' : 'z-modal-backdrop-dark';\n\n    return this._overlayService.createGlobal({\n      hasBackdrop: true,\n      backdropClass,\n      panelClass: 'z-command-overlay-pane',\n      scrollLock: true,\n    });\n  }\n\n  private _openTemplateOverlay(): void {\n    if (this._templateOverlayRef) {\n      return;\n    }\n\n    this._templateOverlayRef = this._createOverlay();\n    if (!this._templateOverlayRef) {\n      return;\n    }\n\n    this._zIndexService.applyToOverlay(this._templateOverlayRef);\n    this._zIndexService.deferMoveToTop(this._templateOverlayRef);\n\n    const hostElement = this._host.nativeElement;\n    this._originalParent = hostElement.parentElement;\n    this._originalNextSibling = hostElement.nextSibling;\n\n    this._templateOverlayRef.overlayElement.appendChild(hostElement);\n\n    this._backdropSubscription = this._templateOverlayRef.backdropClick().subscribe(() => {\n      this.close();\n    });\n\n    this.searchQuery.set('');\n    this.selectedIndex.set(0);\n\n    // Focus input after render\n    setTimeout(() => {\n      const inputEl = this.searchInputRef()?.nativeElement;\n      if (inputEl) {\n        inputEl.focus();\n      }\n    }, 100);\n  }\n\n  private _closeWithAnimation(): void {\n    if (this.isLeaving()) {\n      return;\n    }\n\n    this._overlayContainerService.notifyClosing();\n    this.isLeaving.set(true);\n    this.zVisible.set(false);\n\n    const hostElement = this._host.nativeElement;\n    const { backdropElement } = this._templateOverlayRef ?? {};\n\n    if (backdropElement) {\n      backdropElement.classList.add('z-backdrop-leaving');\n    }\n\n    hostElement.classList.add('command-leave');\n\n    this._clearCloseTimeout();\n    this._closeTimeout = setTimeout(() => {\n      if (this._destroyRef.destroyed) {\n        return;\n      }\n\n      this.isLeaving.set(false);\n      this._disposeTemplateOverlay();\n      this.zAfterClose.emit();\n    }, 150);\n  }\n\n  private _clearCloseTimeout(): void {\n    if (!this._closeTimeout) {\n      return;\n    }\n\n    clearTimeout(this._closeTimeout);\n    this._closeTimeout = null;\n  }\n\n  private _disposeTemplateOverlay(): void {\n    const hostElement = this._host.nativeElement;\n\n    if (this._originalParent && this._originalNextSibling) {\n      this._originalParent.insertBefore(hostElement, this._originalNextSibling);\n    }\n\n    if (this._originalParent && !this._originalNextSibling) {\n      this._originalParent.appendChild(hostElement);\n    }\n\n    hostElement.classList.remove('command-leave');\n    if (this._templateOverlayRef) {\n      this._templateOverlayRef.dispose();\n      this._templateOverlayRef = null;\n    }\n\n    this._originalParent = null;\n    this._originalNextSibling = null;\n\n    if (this._backdropSubscription) {\n      this._backdropSubscription.unsubscribe();\n      this._backdropSubscription = null;\n    }\n  }\n\n  private _scrollToSelected(): void {\n    setTimeout(() => {\n      const scrollbar = this._host.nativeElement.querySelector('ng-scrollbar');\n      const viewport = scrollbar?.querySelector('.ng-scroll-viewport') as HTMLElement;\n      const selected = scrollbar?.querySelector('.z-command-item-active') as HTMLElement;\n      if (!viewport || !selected) {\n        return;\n      }\n      const cTop = viewport.scrollTop;\n      const cBottom = cTop + viewport.clientHeight;\n      const sTop = selected.offsetTop;\n      const sBottom = sTop + selected.clientHeight;\n\n      if (sTop < cTop) {\n        viewport.scrollTop = sTop;\n        return;\n      }\n      if (sBottom > cBottom) {\n        viewport.scrollTop = sBottom - viewport.clientHeight;\n        return;\n      }\n    });\n  }\n}\n","@if (shouldRenderContent()) {\n  <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n    <!-- Search Bar -->\n    <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n      <input\n        type=\"text\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchQueryChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n        #searchInput />\n      <kbd\n        class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded-sm border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n        <span>ESC</span>\n      </kbd>\n    </div>\n\n    <!-- Scrollable Results List using NgScrollbar -->\n    <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n      <div zHoverGlide zHoverGlideClass=\"bg-primary/10 rounded-(--radius-sm)\" class=\"space-y-1 p-2\">\n        @if (flattenedItems().length === 0) {\n          <div class=\"text-muted-foreground py-6 text-center text-sm\">\n            {{ 'i18n_z_ui_command_no_results' | translate }}\n          </div>\n        } @else {\n          @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n            @if (!isFirst) {\n              <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n            }\n\n            <div\n              class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n              {{ group.heading }}\n            </div>\n\n            <div class=\"space-y-0.5\">\n              @for (item of group.items; track item.id) {\n                <div\n                  data-glide-item\n                  class=\"z-command-item relative flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n                  [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n                  (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n                  (click)=\"selectItem(item)\">\n                  <div class=\"flex items-center gap-2.5\">\n                    @if (item.icon) {\n                      <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n                    }\n                    <span>{{ item.label }}</span>\n                  </div>\n\n                  @if (item.shortcut) {\n                    <kbd\n                      class=\"text-muted-foreground bg-muted/50 border-border/40 rounded-sm border px-1 font-mono text-[9px]\">\n                      {{ item.shortcut }}\n                    </kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </ng-scrollbar>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAEO,MAAM,cAAc,GAAG,MAAsB;AAClD,IAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,IAAA,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE;AAC7B,QAAA,OAAO,MAAM;IACf;AACA,IAAA,OAAO,MAAM;AACf;;MCmCa,iBAAiB,CAAA;IACZ,OAAO,GAAG,MAAM,EAAgB;IAChC,WAAW,GAAG,MAAM,EAAQ;IAE5B,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;IAC7B,QAAQ,GAAG,KAAK,CAAU,KAAK;iFAAC;IAChC,YAAY,GAAG,KAAK,CAAS,0BAA0B;qFAAC;IACxD,OAAO,GAAG,KAAK,CAAkB,EAAE;gFAAC;AACpC,IAAA,QAAQ,GAAG,KAAK,CAAkB,cAAc,EAAE;iFAAC;IAEhD,cAAc,GAAG,SAAS,CAA+B,aAAa;uFAAC;AAEzE,IAAA,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;AACjC,IAAA,KAAK,GAAG,MAAM,EAAC,UAAuB,EAAC;AACvC,IAAA,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;AACzC,IAAA,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAChC,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,WAAW,GAAG,MAAM,CAAC,iBAAiB,CAAC;AACvC,IAAA,wBAAwB,GAAG,MAAM,CAAC,wBAAwB,CAAC;AAC3D,IAAA,cAAc,GAAG,MAAM,CAAC,qBAAqB,CAAC;IAEvD,mBAAmB,GAAuB,IAAI;IAC9C,eAAe,GAAuB,IAAI;IAC1C,oBAAoB,GAAgB,IAAI;IACxC,qBAAqB,GAAwB,IAAI;IACjD,aAAa,GAAyC,IAAI;IAE/C,SAAS,GAAG,MAAM,CAAC,KAAK;kFAAC;AACzB,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE;4FAAC;IACzE,WAAW,GAAG,MAAM,CAAC,EAAE;oFAAC;IACxB,aAAa,GAAG,MAAM,CAAC,CAAC;sFAAC;AAEzB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAChD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE;AACrD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE;QAE7B,IAAI,CAAC,KAAK,EAAE;YACV,IAAI,YAAY,GAAG,CAAC;AACpB,YAAA,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,IAAG;gBACxB,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;oBAC1C,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE;AAC1D,oBAAA,YAAY,EAAE;AACd,oBAAA,OAAO,WAAW;AACpB,gBAAA,CAAC,CAAC;gBACF,OAAO,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE;AAC1C,YAAA,CAAC,CAAC;QACJ;QAEA,MAAM,aAAa,GAAG;AACnB,aAAA,GAAG,CAAC,KAAK,KAAK;AACb,YAAA,GAAG,KAAK;AACR,YAAA,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CACvB,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAChG;AACF,SAAA,CAAC;AACD,aAAA,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAE1C,IAAI,YAAY,GAAG,CAAC;AACpB,QAAA,OAAO,aAAa,CAAC,GAAG,CAAC,KAAK,IAAG;YAC/B,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;gBAC1C,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE;AAC1D,gBAAA,YAAY,EAAE;AACd,gBAAA,OAAO,WAAW;AACpB,YAAA,CAAC,CAAC;YACF,OAAO,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE;AAC1C,QAAA,CAAC,CAAC;IACJ,CAAC;uFAAC;AAEiB,IAAA,cAAc,GAAG,QAAQ,CAAC,MAC3C,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM,CAAiB,CAAC,GAAG,EAAE,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;uFAC1F;AAEkB,IAAA,OAAO,GAAG,QAAQ,CAAC,MACpC,aAAa,CACX,sNAAsN,EACtN,IAAI,CAAC,KAAK,EAAE,CACb;gFACF;AAEkB,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE;AAClC,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE;AAC9B,YAAA,OAAO,GAAG,WAAW,CAAA,wBAAA,CAA0B,CAAC,IAAI,EAAE;QACxD;AACA,QAAA,OAAO,gCAAgC;IACzC,CAAC;oFAAC;AAEF,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;AAC9B,YAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC1B,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;gBACxC,IAAI,CAAC,oBAAoB,EAAE;gBAC3B;YACF;AAEA,YAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE;gBAC7D,IAAI,CAAC,mBAAmB,EAAE;YAC5B;AACF,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;YACV,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;AAC3B,QAAA,CAAC,CAAC;IACJ;IAEO,WAAW,GAAA;QAChB,IAAI,CAAC,kBAAkB,EAAE;QACzB,IAAI,CAAC,uBAAuB,EAAE;IAChC;IAEO,WAAW,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,SAAS;IACnC;IAEO,gBAAgB,GAAA;AACrB,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa;IACjC;AAEO,IAAA,mBAAmB,CAAC,KAAa,EAAA;AACtC,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;IAC7B;AAEO,IAAA,SAAS,CAAC,KAAoB,EAAA;AACnC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE;AACnC,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;AACjB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,IAAI,CAAC,KAAK,EAAE;YACd;YACA;QACF;AAEA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC;YACjE,IAAI,CAAC,iBAAiB,EAAE;YACxB;QACF;AACA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,EAAE;YACjD,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC;YAChF,IAAI,CAAC,iBAAiB,EAAE;YACxB;QACF;AACA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;YAC5C;QACF;AACA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,KAAK,EAAE;YACZ;QACF;IACF;AAEU,IAAA,UAAU,CAAC,IAAkB,EAAA;AACrC,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,KAAK,EAAE;IACd;IAEO,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;IACzB;IAEO,KAAK,GAAA;QACV,IAAI,CAAC,mBAAmB,EAAE;IAC5B;IAEQ,cAAc,GAAA;QACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;AACxC,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,EAAE;AACnC,QAAA,MAAM,aAAa,GAAG,WAAW,KAAK,MAAM,GAAG,uBAAuB,GAAG,uBAAuB;AAEhG,QAAA,OAAO,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;AACvC,YAAA,WAAW,EAAE,IAAI;YACjB,aAAa;AACb,YAAA,UAAU,EAAE,wBAAwB;AACpC,YAAA,UAAU,EAAE,IAAI;AACjB,SAAA,CAAC;IACJ;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B;QACF;AAEA,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC7B;QACF;QAEA,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC;QAC5D,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC;AAE5D,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa;AAC5C,QAAA,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC,aAAa;AAChD,QAAA,IAAI,CAAC,oBAAoB,GAAG,WAAW,CAAC,WAAW;QAEnD,IAAI,CAAC,mBAAmB,CAAC,cAAc,CAAC,WAAW,CAAC,WAAW,CAAC;AAEhE,QAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,MAAK;YACnF,IAAI,CAAC,KAAK,EAAE;AACd,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;;QAGzB,UAAU,CAAC,MAAK;YACd,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,aAAa;YACpD,IAAI,OAAO,EAAE;gBACX,OAAO,CAAC,KAAK,EAAE;YACjB;QACF,CAAC,EAAE,GAAG,CAAC;IACT;IAEQ,mBAAmB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB;QACF;AAEA,QAAA,IAAI,CAAC,wBAAwB,CAAC,aAAa,EAAE;AAC7C,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AAExB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa;QAC5C,MAAM,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC,mBAAmB,IAAI,EAAE;QAE1D,IAAI,eAAe,EAAE;AACnB,YAAA,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC;QACrD;AAEA,QAAA,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;QAE1C,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAK;AACnC,YAAA,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE;gBAC9B;YACF;AAEA,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,uBAAuB,EAAE;AAC9B,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACzB,CAAC,EAAE,GAAG,CAAC;IACT;IAEQ,kBAAkB,GAAA;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB;QACF;AAEA,QAAA,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC;AAChC,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI;IAC3B;IAEQ,uBAAuB,GAAA;AAC7B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa;QAE5C,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,oBAAoB,EAAE;YACrD,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC;QAC3E;QAEA,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;AACtD,YAAA,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,WAAW,CAAC;QAC/C;AAEA,QAAA,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;AAC7C,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;AAClC,YAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI;QACjC;AAEA,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC3B,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;AAEhC,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE;AAC9B,YAAA,IAAI,CAAC,qBAAqB,CAAC,WAAW,EAAE;AACxC,YAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI;QACnC;IACF;IAEQ,iBAAiB,GAAA;QACvB,UAAU,CAAC,MAAK;AACd,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,cAAc,CAAC;YACxE,MAAM,QAAQ,GAAG,SAAS,EAAE,aAAa,CAAC,qBAAqB,CAAgB;YAC/E,MAAM,QAAQ,GAAG,SAAS,EAAE,aAAa,CAAC,wBAAwB,CAAgB;AAClF,YAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE;gBAC1B;YACF;AACA,YAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS;AAC/B,YAAA,MAAM,OAAO,GAAG,IAAI,GAAG,QAAQ,CAAC,YAAY;AAC5C,YAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS;AAC/B,YAAA,MAAM,OAAO,GAAG,IAAI,GAAG,QAAQ,CAAC,YAAY;AAE5C,YAAA,IAAI,IAAI,GAAG,IAAI,EAAE;AACf,gBAAA,QAAQ,CAAC,SAAS,GAAG,IAAI;gBACzB;YACF;AACA,YAAA,IAAI,OAAO,GAAG,OAAO,EAAE;gBACrB,QAAQ,CAAC,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC,YAAY;gBACpD;YACF;AACF,QAAA,CAAC,CAAC;IACJ;uGA1TW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3C9B,qjGAmEA,EAAA,MAAA,EAAA,CAAA,smCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlCY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,wSAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,eAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,cAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAiB,WAAW,EAAA,QAAA,EAAA,qDAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,qBAAA,EAAA,kBAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAhD,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAUzC,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAZ7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,CAAC,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,oBAAoB,CAAC,EAAA,UAAA,EAC5E,IAAI,mBAGC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC3B,qBAAA,EAAA,QAAA,EACS,UAAU,EAAA,QAAA,EAAA,qjGAAA,EAAA,MAAA,EAAA,CAAA,smCAAA,CAAA,EAAA;muBAYwD,aAAa,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErD3F;;AAEG;;"}
+{"version":3,"file":"shival99-z-ui-components-z-command.mjs","sources":["../../../../libs/core-ui/components/z-command/z-command.define.ts","../../../../libs/core-ui/components/z-command/z-command.component.ts","../../../../libs/core-ui/components/z-command/z-command.component.html","../../../../libs/core-ui/components/z-command/shival99-z-ui-components-z-command.ts"],"sourcesContent":["import { zDetectBrowser } from '@shival99/z-ui/utils';\n\nexport const getOverlayType = (): 'dark' | 'blur' => {\n  const browser = zDetectBrowser();\n  if (browser.name === 'Chrome') {\n    return 'dark';\n  }\n  return 'blur';\n};\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  OnDestroy,\n  output,\n  PLATFORM_ID,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZHoverGlideDirective } from '@shival99/z-ui/components/z-hover-glide';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZOverlayService, type ZOverlayRef } from '@shival99/z-ui/components/z-overlay';\nimport { ZOverlayContainerService, ZOverlayZIndexService, ZTranslateService } from '@shival99/z-ui/services';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { NgScrollbar } from 'ngx-scrollbar';\nimport { Subscription } from 'rxjs';\nimport { getOverlayType } from './z-command.define';\nimport { ZCommandGroup, ZCommandItem } from './z-command.types';\n\n@Component({\n  selector: 'z-command',\n  imports: [FormsModule, ZIconComponent, TranslatePipe, NgScrollbar, ZHoverGlideDirective],\n  standalone: true,\n  templateUrl: './z-command.component.html',\n  styleUrl: './z-command.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n  exportAs: 'zCommand',\n})\nexport class ZCommandComponent implements OnDestroy {\n  public readonly zSelect = output<ZCommandItem>();\n  public readonly zAfterClose = output<void>();\n\n  public readonly class = input<ClassValue>('');\n  public readonly zVisible = model<boolean>(false);\n  public readonly zPlaceholder = input<string>('i18n_z_ui_command_search');\n  public readonly zGroups = input<ZCommandGroup[]>([]);\n  public readonly zOverlay = input<'dark' | 'blur'>(getOverlayType());\n\n  protected readonly searchInputRef = viewChild<ElementRef<HTMLInputElement>>('searchInput');\n\n  private readonly _platformId = inject(PLATFORM_ID);\n  private readonly _host = inject(ElementRef<HTMLElement>);\n  private readonly _overlayService = inject(ZOverlayService);\n  private readonly _cdr = inject(ChangeDetectorRef);\n  private readonly _destroyRef = inject(DestroyRef);\n  private readonly _zTranslate = inject(ZTranslateService);\n  private readonly _overlayContainerService = inject(ZOverlayContainerService);\n  private readonly _zIndexService = inject(ZOverlayZIndexService);\n\n  private _templateOverlayRef: ZOverlayRef | null = null;\n  private _originalParent: HTMLElement | null = null;\n  private _originalNextSibling: Node | null = null;\n  private _backdropSubscription: Subscription | null = null;\n  private _closeTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  protected readonly isLeaving = signal(false);\n  protected readonly shouldRenderContent = computed(() => this.zVisible() || this.isLeaving());\n  protected readonly searchQuery = signal('');\n  protected readonly selectedIndex = signal(0);\n\n  protected readonly filteredGroups = computed(() => {\n    const query = this.searchQuery().toLowerCase().trim();\n    const groups = this.zGroups();\n\n    if (!query) {\n      let currentIndex = 0;\n      return groups.map(group => {\n        const itemsWithIdx = group.items.map(item => {\n          const itemWithIdx = { ...item, globalIndex: currentIndex };\n          currentIndex++;\n          return itemWithIdx;\n        });\n        return { ...group, items: itemsWithIdx };\n      });\n    }\n\n    const matchedGroups = groups\n      .map(group => ({\n        ...group,\n        items: group.items.filter(\n          item => item.label.toLowerCase().includes(query) || group.heading.toLowerCase().includes(query)\n        ),\n      }))\n      .filter(group => group.items.length > 0);\n\n    let currentIndex = 0;\n    return matchedGroups.map(group => {\n      const itemsWithIdx = group.items.map(item => {\n        const itemWithIdx = { ...item, globalIndex: currentIndex };\n        currentIndex++;\n        return itemWithIdx;\n      });\n      return { ...group, items: itemsWithIdx };\n    });\n  });\n\n  protected readonly flattenedItems = computed(() =>\n    this.filteredGroups().reduce<ZCommandItem[]>((acc, group) => acc.concat(group.items), [])\n  );\n\n  protected readonly classes = computed(() =>\n    zMergeClasses(\n      'z-command-dialog border-border bg-popover text-popover-foreground fixed top-[15vh] left-1/2 -translate-x-1/2 w-[calc(100vw-2rem)] sm:w-full max-w-[640px] rounded-xl border shadow-2xl overflow-hidden flex flex-col',\n      this.class()\n    )\n  );\n\n  protected readonly hostClasses = computed(() => {\n    const baseClasses = this.classes();\n    if (this.shouldRenderContent()) {\n      return `${baseClasses} z-command-template-mode`.trim();\n    }\n    return 'z-command-template-host hidden';\n  });\n\n  constructor() {\n    effect(() => {\n      this._zTranslate.currentLang();\n      this._cdr.markForCheck();\n    });\n\n    effect(() => {\n      const visible = this.zVisible();\n      if (visible && !this._templateOverlayRef) {\n        this._openTemplateOverlay();\n        return;\n      }\n\n      if (!visible && this._templateOverlayRef && !this.isLeaving()) {\n        this._closeWithAnimation();\n      }\n    });\n\n    // Reset selectedIndex whenever search query changes\n    effect(() => {\n      this.searchQuery();\n      this.selectedIndex.set(0);\n    });\n  }\n\n  public ngOnDestroy(): void {\n    this._clearCloseTimeout();\n    this._disposeTemplateOverlay();\n  }\n\n  public isDestroyed(): boolean {\n    return this._destroyRef.destroyed;\n  }\n\n  public getNativeElement(): HTMLElement {\n    return this._host.nativeElement;\n  }\n\n  public onSearchQueryChange(query: string): void {\n    this.searchQuery.set(query);\n  }\n\n  public onKeyDown(event: KeyboardEvent): void {\n    const items = this.flattenedItems();\n    if (!items.length) {\n      if (event.key === 'Escape') {\n        this.close();\n      }\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'Down') {\n      event.preventDefault();\n      this.selectedIndex.set((this.selectedIndex() + 1) % items.length);\n      this._scrollToSelected();\n      return;\n    }\n    if (event.key === 'ArrowUp' || event.key === 'Up') {\n      event.preventDefault();\n      this.selectedIndex.set((this.selectedIndex() - 1 + items.length) % items.length);\n      this._scrollToSelected();\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.selectItem(items[this.selectedIndex()]);\n      return;\n    }\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n      return;\n    }\n  }\n\n  protected selectItem(item: ZCommandItem): void {\n    this.zSelect.emit(item);\n    this.close();\n  }\n\n  public open(): void {\n    this.isLeaving.set(false);\n    this.zVisible.set(true);\n  }\n\n  public close(): void {\n    this._closeWithAnimation();\n  }\n\n  private _createOverlay(): ZOverlayRef | null {\n    if (!isPlatformBrowser(this._platformId)) {\n      return null;\n    }\n\n    const overlayType = this.zOverlay();\n    const backdropClass = overlayType === 'blur' ? 'z-modal-backdrop-blur' : 'z-modal-backdrop-dark';\n\n    return this._overlayService.createGlobal({\n      hasBackdrop: true,\n      backdropClass,\n      panelClass: 'z-command-overlay-pane',\n      scrollLock: true,\n    });\n  }\n\n  private _openTemplateOverlay(): void {\n    if (this._templateOverlayRef) {\n      return;\n    }\n\n    this._templateOverlayRef = this._createOverlay();\n    if (!this._templateOverlayRef) {\n      return;\n    }\n\n    this._zIndexService.applyToOverlay(this._templateOverlayRef);\n    this._zIndexService.deferMoveToTop(this._templateOverlayRef);\n\n    const hostElement = this._host.nativeElement;\n    this._originalParent = hostElement.parentElement;\n    this._originalNextSibling = hostElement.nextSibling;\n\n    this._templateOverlayRef.overlayElement.appendChild(hostElement);\n\n    this._backdropSubscription = this._templateOverlayRef.backdropClick().subscribe(() => {\n      this.close();\n    });\n\n    this.searchQuery.set('');\n    this.selectedIndex.set(0);\n\n    // Focus input after render\n    setTimeout(() => {\n      const inputEl = this.searchInputRef()?.nativeElement;\n      if (inputEl) {\n        inputEl.focus();\n      }\n    }, 100);\n  }\n\n  private _closeWithAnimation(): void {\n    if (this.isLeaving()) {\n      return;\n    }\n\n    this._overlayContainerService.notifyClosing();\n    this.isLeaving.set(true);\n    this.zVisible.set(false);\n\n    const hostElement = this._host.nativeElement;\n    const { backdropElement } = this._templateOverlayRef ?? {};\n\n    if (backdropElement) {\n      backdropElement.classList.add('z-backdrop-leaving');\n    }\n\n    hostElement.classList.add('command-leave');\n\n    this._clearCloseTimeout();\n    this._closeTimeout = setTimeout(() => {\n      if (this._destroyRef.destroyed) {\n        return;\n      }\n\n      this.isLeaving.set(false);\n      this._disposeTemplateOverlay();\n      this.zAfterClose.emit();\n    }, 150);\n  }\n\n  private _clearCloseTimeout(): void {\n    if (!this._closeTimeout) {\n      return;\n    }\n\n    clearTimeout(this._closeTimeout);\n    this._closeTimeout = null;\n  }\n\n  private _disposeTemplateOverlay(): void {\n    const hostElement = this._host.nativeElement;\n\n    if (this._originalParent && this._originalNextSibling) {\n      this._originalParent.insertBefore(hostElement, this._originalNextSibling);\n    }\n\n    if (this._originalParent && !this._originalNextSibling) {\n      this._originalParent.appendChild(hostElement);\n    }\n\n    hostElement.classList.remove('command-leave');\n    if (this._templateOverlayRef) {\n      this._templateOverlayRef.dispose();\n      this._templateOverlayRef = null;\n    }\n\n    this._originalParent = null;\n    this._originalNextSibling = null;\n\n    if (this._backdropSubscription) {\n      this._backdropSubscription.unsubscribe();\n      this._backdropSubscription = null;\n    }\n  }\n\n  private _scrollToSelected(): void {\n    setTimeout(() => {\n      const scrollbar = this._host.nativeElement.querySelector('ng-scrollbar');\n      const viewport = scrollbar?.querySelector('.ng-scroll-viewport') as HTMLElement;\n      const selected = scrollbar?.querySelector('.z-command-item-active') as HTMLElement;\n      if (!viewport || !selected) {\n        return;\n      }\n      const cTop = viewport.scrollTop;\n      const cBottom = cTop + viewport.clientHeight;\n      const sTop = selected.offsetTop;\n      const sBottom = sTop + selected.clientHeight;\n\n      if (sTop < cTop) {\n        viewport.scrollTop = sTop;\n        return;\n      }\n      if (sBottom > cBottom) {\n        viewport.scrollTop = sBottom - viewport.clientHeight;\n        return;\n      }\n    });\n  }\n}\n","@if (shouldRenderContent()) {\n  <div class=\"z-command-wrapper flex h-full w-full flex-col\">\n    <!-- Search Bar -->\n    <div class=\"border-border/40 bg-popover flex items-center border-b px-4 py-2\">\n      <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground mr-2.5 opacity-75\" />\n      <input\n        type=\"text\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        [ngModel]=\"searchQuery()\"\n        (ngModelChange)=\"onSearchQueryChange($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        class=\"placeholder:text-muted-foreground/60 flex h-9 w-full border-0 bg-transparent text-sm ring-0 outline-none focus:ring-0 focus:outline-none\"\n        #searchInput />\n      <kbd\n        class=\"border-border/60 bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded-sm border px-1.5 font-mono text-[9px] font-medium opacity-100 select-none sm:inline-flex\">\n        <span>ESC</span>\n      </kbd>\n    </div>\n\n    <!-- Scrollable Results List using NgScrollbar -->\n    <ng-scrollbar class=\"z-command-scrollbar max-h-[330px]\" visibility=\"hover\" track=\"vertical\">\n      <div zHoverGlide zHoverGlideClass=\"bg-primary/10 rounded-(--radius-sm)\" class=\"space-y-1 p-2\">\n        @if (flattenedItems().length === 0) {\n          <div class=\"text-muted-foreground py-6 text-center text-sm\">\n            {{ 'i18n_z_ui_command_no_results' | translate }}\n          </div>\n        } @else {\n          @for (group of filteredGroups(); track group.heading; let isFirst = $first) {\n            @if (!isFirst) {\n              <div class=\"border-border/40 -mx-2 my-1.5 border-t\"></div>\n            }\n\n            <div\n              class=\"text-muted-foreground/60 px-3 py-1.5 text-[10px] font-bold tracking-wider uppercase select-none\">\n              {{ group.heading }}\n            </div>\n\n            <div class=\"space-y-0.5\">\n              @for (item of group.items; track item.id) {\n                <div\n                  data-glide-item\n                  class=\"z-command-item relative flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-xs transition-colors select-none\"\n                  [class.z-command-item-active]=\"item.globalIndex === selectedIndex()\"\n                  (mouseenter)=\"selectedIndex.set(item.globalIndex || 0)\"\n                  (click)=\"selectItem(item)\">\n                  <div class=\"flex items-center gap-2.5\">\n                    @if (item.icon) {\n                      <z-icon [zType]=\"item.icon\" zSize=\"14\" class=\"opacity-80\" />\n                    }\n                    <span>{{ item.label }}</span>\n                  </div>\n\n                  @if (item.shortcut) {\n                    <kbd\n                      class=\"text-muted-foreground bg-muted/50 border-border/40 rounded-sm border px-1 font-mono text-[9px]\">\n                      {{ item.shortcut }}\n                    </kbd>\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    </ng-scrollbar>\n  </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -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 .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 */
+    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;-webkit-backdrop-filter:blur(2px);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 .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"] }]
+                        }, 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;-webkit-backdrop-filter:blur(2px);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 {