import * as i0 from '@angular/core';
import { viewChild, output, input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';

class ZDropdownMenuComponent {
    contentWrapper = viewChild('contentWrapper', ...(ngDevMode ? [{ debugName: "contentWrapper" }] : []));
    zOnItemClick = output();
    zItems = input.required(...(ngDevMode ? [{ debugName: "zItems" }] : []));
    zLabel = input(...(ngDevMode ? [undefined, { debugName: "zLabel" }] : []));
    zIcon = input('lucideMenu', ...(ngDevMode ? [{ debugName: "zIcon" }] : []));
    zButtonType = input('outline', ...(ngDevMode ? [{ debugName: "zButtonType" }] : []));
    zPosition = input('bottom-right', ...(ngDevMode ? [{ debugName: "zPosition" }] : []));
    zButtonSize = input('default', ...(ngDevMode ? [{ debugName: "zButtonSize" }] : []));
    zOffset = input(4, ...(ngDevMode ? [{ debugName: "zOffset" }] : []));
    zMinWidth = input(224, ...(ngDevMode ? [{ debugName: "zMinWidth" }] : []));
    zMaxWidth = input(320, ...(ngDevMode ? [{ debugName: "zMaxWidth" }] : []));
    zDisabled = input(false, ...(ngDevMode ? [{ debugName: "zDisabled" }] : []));
    hasContent = signal(false, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
    popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "popoverControl" }] : []));
    visibleItems = computed(() => this.zItems().filter(item => !item.hidden), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
    ngAfterContentInit() {
        const wrapper = this.contentWrapper();
        if (wrapper) {
            const hasProjectedContent = wrapper.nativeElement.children.length > 0;
            this.hasContent.set(hasProjectedContent);
        }
    }
    onItemClick(item) {
        if (item.disabled) {
            return;
        }
        item.onClick?.();
        this.zOnItemClick.emit(item);
        this.popoverControl()?.closeImmediate();
    }
    onControl(control) {
        this.popoverControl.set(control);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZDropdownMenuComponent, isStandalone: true, selector: "z-dropdown-menu", inputs: { zItems: { classPropertyName: "zItems", publicName: "zItems", isSignal: true, isRequired: true, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zIcon: { classPropertyName: "zIcon", publicName: "zIcon", isSignal: true, isRequired: false, transformFunction: null }, zButtonType: { classPropertyName: "zButtonType", publicName: "zButtonType", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zButtonSize: { classPropertyName: "zButtonSize", publicName: "zButtonSize", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zMinWidth: { classPropertyName: "zMinWidth", publicName: "zMinWidth", isSignal: true, isRequired: false, transformFunction: null }, zMaxWidth: { classPropertyName: "zMaxWidth", publicName: "zMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnItemClick: "zOnItemClick" }, providers: [TranslatePipe], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Custom trigger via ng-content -->\n<div\n  #contentWrapper\n  z-popover\n  [zPopoverContent]=\"menuContent\"\n  zTrigger=\"click\"\n  [zPosition]=\"zPosition()\"\n  [zOffset]=\"zOffset()\"\n  [zDisabled]=\"zDisabled()\"\n  (zControl)=\"onControl($event)\"\n  [class.hidden]=\"!hasContent()\">\n  <ng-content />\n</div>\n\n<!-- Default button trigger -->\n@if (!hasContent()) {\n  <button\n    type=\"button\"\n    z-button\n    [zType]=\"zButtonType()\"\n    [zSize]=\"zButtonSize()\"\n    [zDisabled]=\"zDisabled()\"\n    z-popover\n    [zPopoverContent]=\"menuContent\"\n    zTrigger=\"click\"\n    [zPosition]=\"zPosition()\"\n    [zOffset]=\"zOffset()\"\n    [zTypeIcon]=\"zIcon()!\"\n    (zControl)=\"onControl($event)\">\n    @if (zLabel()) {\n      {{ zLabel() | translate }}\n    }\n  </button>\n}\n\n<!-- Menu content template -->\n<ng-template #menuContent let-close=\"close\">\n  <div class=\"z-dropdown-menu-content p-1\" [style.min-width.px]=\"zMinWidth()\" [style.max-width.px]=\"zMaxWidth()\">\n    @for (item of visibleItems(); track $index) {\n      @if (item.divide === 'before' && $index > 0) {\n        <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n      }\n\n      <!-- Menu item - check if has submenu -->\n      @if (item.submenu && item.submenu.length > 0) {\n        <!-- Menu item with nested submenu -->\n        <button\n          type=\"button\"\n          z-popover\n          [zPopoverContent]=\"submenuTemplate\"\n          [zPosition]=\"item.submenuPosition || 'right'\"\n          zTrigger=\"hover\"\n          [zShowDelay]=\"200\"\n          [zHideDelay]=\"100\"\n          [zOffset]=\"6\"\n          [disabled]=\"item.disabled\"\n          [class]=\"item.class\"\n          class=\"hover:bg-accent data-[state=open]:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\">\n          @if (item.icon) {\n            <z-icon [zType]=\"item.icon\" [zSize]=\"item.iconSize || '14'\" class=\"text-muted-foreground shrink-0\" />\n          }\n          <span class=\"truncate\" z-tooltip [zContent]=\"item.label\" [zShowDelay]=\"500\" zTrigger=\"hover\" zPosition=\"top\">\n            {{ item.label | translate }}\n          </span>\n          @if (item.shortcut) {\n            <span class=\"text-muted-foreground ml-auto shrink-0 text-xs tracking-widest\">\n              {{ item.shortcut | translate }}\n            </span>\n          }\n          <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"ml-auto shrink-0\" />\n        </button>\n\n        <!-- Submenu template -->\n        <ng-template #submenuTemplate>\n          <div\n            class=\"p-1\"\n            [style.min-width.px]=\"item.subMinWidth || zMinWidth()\"\n            [style.max-width.px]=\"item.subMaxWidth || zMaxWidth()\">\n            @for (subItem of item.submenu; track subItem.label) {\n              <!-- Nested divider before -->\n              @if (subItem.divide === 'before') {\n                <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n              }\n\n              <button\n                type=\"button\"\n                [disabled]=\"subItem.disabled\"\n                [class]=\"subItem.class\"\n                class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n                (click)=\"onItemClick(subItem)\">\n                @if (subItem.icon) {\n                  <z-icon\n                    [zType]=\"subItem.icon\"\n                    [zSize]=\"subItem.iconSize || '14'\"\n                    class=\"text-muted-foreground shrink-0\" />\n                }\n                <span\n                  class=\"truncate\"\n                  z-tooltip\n                  [zContent]=\"subItem.label\"\n                  [zShowDelay]=\"200\"\n                  zTrigger=\"hover\"\n                  zPosition=\"top\">\n                  {{ subItem.label }}\n                </span>\n                @if (subItem.shortcut) {\n                  <span class=\"text-muted-foreground ml-auto shrink-0 text-xs tracking-widest\">\n                    {{ subItem.shortcut }}\n                  </span>\n                }\n              </button>\n\n              <!-- Nested divider after -->\n              @if (subItem.divide === 'after') {\n                <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n              }\n            }\n          </div>\n        </ng-template>\n      } @else {\n        <!-- Regular menu item (no submenu) -->\n        <button\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          [class]=\"item.class\"\n          class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n          (click)=\"onItemClick(item)\">\n          @if (item.icon) {\n            <z-icon [zType]=\"item.icon\" [zSize]=\"item.iconSize || '14'\" class=\"text-muted-foreground shrink-0\" />\n          }\n          <span class=\"truncate\" z-tooltip [zContent]=\"item.label\" [zShowDelay]=\"500\" zTrigger=\"hover\" zPosition=\"top\">\n            {{ item.label }}\n          </span>\n          @if (item.shortcut) {\n            <span class=\"text-muted-foreground ml-auto shrink-0 text-xs tracking-widest\">{{ item.shortcut }}</span>\n          }\n        </button>\n      }\n\n      <!-- Divider after -->\n      @if (item.divide === 'after' && $index < visibleItems().length - 1) {\n        <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".z-dropdown-menu-content{min-width:inherit}\n"], dependencies: [{ kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZDropdownMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-dropdown-menu', imports: [ZPopoverDirective, ZButtonComponent, ZIconComponent, ZTooltipDirective, TranslatePipe], standalone: true, providers: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Custom trigger via ng-content -->\n<div\n  #contentWrapper\n  z-popover\n  [zPopoverContent]=\"menuContent\"\n  zTrigger=\"click\"\n  [zPosition]=\"zPosition()\"\n  [zOffset]=\"zOffset()\"\n  [zDisabled]=\"zDisabled()\"\n  (zControl)=\"onControl($event)\"\n  [class.hidden]=\"!hasContent()\">\n  <ng-content />\n</div>\n\n<!-- Default button trigger -->\n@if (!hasContent()) {\n  <button\n    type=\"button\"\n    z-button\n    [zType]=\"zButtonType()\"\n    [zSize]=\"zButtonSize()\"\n    [zDisabled]=\"zDisabled()\"\n    z-popover\n    [zPopoverContent]=\"menuContent\"\n    zTrigger=\"click\"\n    [zPosition]=\"zPosition()\"\n    [zOffset]=\"zOffset()\"\n    [zTypeIcon]=\"zIcon()!\"\n    (zControl)=\"onControl($event)\">\n    @if (zLabel()) {\n      {{ zLabel() | translate }}\n    }\n  </button>\n}\n\n<!-- Menu content template -->\n<ng-template #menuContent let-close=\"close\">\n  <div class=\"z-dropdown-menu-content p-1\" [style.min-width.px]=\"zMinWidth()\" [style.max-width.px]=\"zMaxWidth()\">\n    @for (item of visibleItems(); track $index) {\n      @if (item.divide === 'before' && $index > 0) {\n        <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n      }\n\n      <!-- Menu item - check if has submenu -->\n      @if (item.submenu && item.submenu.length > 0) {\n        <!-- Menu item with nested submenu -->\n        <button\n          type=\"button\"\n          z-popover\n          [zPopoverContent]=\"submenuTemplate\"\n          [zPosition]=\"item.submenuPosition || 'right'\"\n          zTrigger=\"hover\"\n          [zShowDelay]=\"200\"\n          [zHideDelay]=\"100\"\n          [zOffset]=\"6\"\n          [disabled]=\"item.disabled\"\n          [class]=\"item.class\"\n          class=\"hover:bg-accent data-[state=open]:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\">\n          @if (item.icon) {\n            <z-icon [zType]=\"item.icon\" [zSize]=\"item.iconSize || '14'\" class=\"text-muted-foreground shrink-0\" />\n          }\n          <span class=\"truncate\" z-tooltip [zContent]=\"item.label\" [zShowDelay]=\"500\" zTrigger=\"hover\" zPosition=\"top\">\n            {{ item.label | translate }}\n          </span>\n          @if (item.shortcut) {\n            <span class=\"text-muted-foreground ml-auto shrink-0 text-xs tracking-widest\">\n              {{ item.shortcut | translate }}\n            </span>\n          }\n          <z-icon zType=\"lucideChevronRight\" zSize=\"14\" class=\"ml-auto shrink-0\" />\n        </button>\n\n        <!-- Submenu template -->\n        <ng-template #submenuTemplate>\n          <div\n            class=\"p-1\"\n            [style.min-width.px]=\"item.subMinWidth || zMinWidth()\"\n            [style.max-width.px]=\"item.subMaxWidth || zMaxWidth()\">\n            @for (subItem of item.submenu; track subItem.label) {\n              <!-- Nested divider before -->\n              @if (subItem.divide === 'before') {\n                <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n              }\n\n              <button\n                type=\"button\"\n                [disabled]=\"subItem.disabled\"\n                [class]=\"subItem.class\"\n                class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n                (click)=\"onItemClick(subItem)\">\n                @if (subItem.icon) {\n                  <z-icon\n                    [zType]=\"subItem.icon\"\n                    [zSize]=\"subItem.iconSize || '14'\"\n                    class=\"text-muted-foreground shrink-0\" />\n                }\n                <span\n                  class=\"truncate\"\n                  z-tooltip\n                  [zContent]=\"subItem.label\"\n                  [zShowDelay]=\"200\"\n                  zTrigger=\"hover\"\n                  zPosition=\"top\">\n                  {{ subItem.label }}\n                </span>\n                @if (subItem.shortcut) {\n                  <span class=\"text-muted-foreground ml-auto shrink-0 text-xs tracking-widest\">\n                    {{ subItem.shortcut }}\n                  </span>\n                }\n              </button>\n\n              <!-- Nested divider after -->\n              @if (subItem.divide === 'after') {\n                <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n              }\n            }\n          </div>\n        </ng-template>\n      } @else {\n        <!-- Regular menu item (no submenu) -->\n        <button\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          [class]=\"item.class\"\n          class=\"hover:bg-accent focus:bg-accent flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n          (click)=\"onItemClick(item)\">\n          @if (item.icon) {\n            <z-icon [zType]=\"item.icon\" [zSize]=\"item.iconSize || '14'\" class=\"text-muted-foreground shrink-0\" />\n          }\n          <span class=\"truncate\" z-tooltip [zContent]=\"item.label\" [zShowDelay]=\"500\" zTrigger=\"hover\" zPosition=\"top\">\n            {{ item.label }}\n          </span>\n          @if (item.shortcut) {\n            <span class=\"text-muted-foreground ml-auto shrink-0 text-xs tracking-widest\">{{ item.shortcut }}</span>\n          }\n        </button>\n      }\n\n      <!-- Divider after -->\n      @if (item.divide === 'after' && $index < visibleItems().length - 1) {\n        <div class=\"bg-border -mx-1 my-1 h-px\"></div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".z-dropdown-menu-content{min-width:inherit}\n"] }]
        }], propDecorators: { contentWrapper: [{ type: i0.ViewChild, args: ['contentWrapper', { isSignal: true }] }], zOnItemClick: [{ type: i0.Output, args: ["zOnItemClick"] }], zItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItems", required: true }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIcon", required: false }] }], zButtonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zButtonType", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zButtonSize", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMinWidth", required: false }] }], zMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxWidth", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { ZDropdownMenuComponent };
//# sourceMappingURL=shival99-z-ui-components-z-dropdown-menu.mjs.map
