import { ChangeDetectionStrategy, Component, ContentChildren, Input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IconComponent } from '../icon/icon.component';
import { ButtonComponent } from '../button/button.component';
import { OverlayDirective } from '../../../directives/overlay.directive';
import { MenuComponent } from '../../molecules/menu/menu.component';
import { BehaviorSubject } from 'rxjs';
import { AsyncPipe, NgClass } from '@angular/common';
import * as i0 from "@angular/core";
export class MenuItemComponent {
    constructor() {
        this.text = '';
        this.link = '';
        this.type = 'internal';
        this.size = 'base';
        this.icon = '';
        this.iconSize = 'base';
        this.iconAlone = false;
        this.iconDirection = 'horizontal';
        this.hasSubmenu = false;
        this.submenuPosition = 'horizontal';
        this.isActive = false;
        this.isOpen = new BehaviorSubject(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MenuItemComponent, isStandalone: true, selector: "ct-menu-item", inputs: { text: "text", link: "link", type: "type", size: "size", icon: "icon", iconSize: "iconSize", iconAlone: "iconAlone", iconDirection: "iconDirection", hasSubmenu: "hasSubmenu", submenuPosition: "submenuPosition", isActive: "isActive" }, queries: [{ propertyName: "menus", predicate: MenuComponent }], ngImport: i0, template: "@if (menus.length > 0) {\n  <a\n    [ctOverlay]=\"dropDown\"\n    [ctOverlayPosition]=\"submenuPosition\"\n    (closed)=\"isOpen.next(false)\"\n    (opened)=\"isOpen.next(true)\"\n    [ngClass]=\"{\n      'bg-surface-variant dark:bg-surface-variant-dark': isOpen | async\n    }\"\n    class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-primary-variant dark:text-on-surface-dark hover:dark:bg-primary-dark\">\n    <span\n      class=\"flex items-center gap-3\"\n      [class.flex-row]=\"iconDirection === 'horizontal'\"\n      [class.flex-col]=\"iconDirection === 'vertical'\">\n      @if (icon) {\n        <ct-icon [icon]=\"icon\" [size]=\"iconSize\" />\n      }\n      @if (text && !iconAlone) {\n        <span\n          [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n          [class.text-base]=\"size === 'base' || size === 'lg'\"\n          [class.text-xl]=\"size === 'xl'\"\n          >{{ text }}</span\n        >\n      }\n      @if (!iconAlone) {\n        @if (isOpen | async) {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-up' : 'chevron-left'\" variant=\"blank\" />\n        } @else {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-down' : 'chevron-right'\" variant=\"blank\" />\n        }\n      }\n    </span>\n  </a>\n  <ng-template #dropDown><ng-content></ng-content></ng-template>\n} @else {\n  @if (link) {\n    <a\n      class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark dark:hover:bg-surface-variant-dark\"\n      [routerLink]=\"link\"\n      [ngClass]=\"{\n        'bg-surface-variant dark:bg-surface-variant-dark': isActive\n      }\">\n      <ng-content select=\"[hint]\" />\n      <span\n        class=\"flex items-center gap-3\"\n        [class.flex-row]=\"iconDirection === 'horizontal'\"\n        [class.flex-col]=\"iconDirection === 'vertical'\">\n        @if (icon) {\n          <ct-icon [icon]=\"icon\" variant=\"solid\" [size]=\"iconSize\" />\n        }\n        @if (text && !iconAlone) {\n          <span\n            [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n            [class.text-base]=\"size === 'base' || size === 'lg'\"\n            [class.text-xl]=\"size === 'xl'\"\n            >{{ text }}</span\n          >\n        }\n      </span>\n    </a>\n  } @else {\n    <span\n      class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark dark:hover:bg-surface-variant-dark\"\n      [ngClass]=\"{\n        'bg-surface-variant dark:bg-surface-variant-dark': isActive\n      }\">\n      <ng-content select=\"[hint]\" />\n      <span\n        class=\"flex items-center gap-3\"\n        [class.flex-row]=\"iconDirection === 'horizontal'\"\n        [class.flex-col]=\"iconDirection === 'vertical'\">\n        @if (icon) {\n          <ct-icon [icon]=\"icon\" variant=\"solid\" [size]=\"iconSize\" />\n        }\n        @if (text && !iconAlone) {\n          <span\n            [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n            [class.text-base]=\"size === 'base' || size === 'lg'\"\n            [class.text-xl]=\"size === 'xl'\"\n            >{{ text }}</span\n          >\n        }\n      </span>\n    </span>\n  }\n}\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[ctOverlay]", inputs: ["ctOverlay", "ctOverlayPosition", "ctOverlayCloseOnClick"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-menu-item', standalone: true, imports: [RouterLink, NgClass, AsyncPipe, IconComponent, ButtonComponent, OverlayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (menus.length > 0) {\n  <a\n    [ctOverlay]=\"dropDown\"\n    [ctOverlayPosition]=\"submenuPosition\"\n    (closed)=\"isOpen.next(false)\"\n    (opened)=\"isOpen.next(true)\"\n    [ngClass]=\"{\n      'bg-surface-variant dark:bg-surface-variant-dark': isOpen | async\n    }\"\n    class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-primary-variant dark:text-on-surface-dark hover:dark:bg-primary-dark\">\n    <span\n      class=\"flex items-center gap-3\"\n      [class.flex-row]=\"iconDirection === 'horizontal'\"\n      [class.flex-col]=\"iconDirection === 'vertical'\">\n      @if (icon) {\n        <ct-icon [icon]=\"icon\" [size]=\"iconSize\" />\n      }\n      @if (text && !iconAlone) {\n        <span\n          [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n          [class.text-base]=\"size === 'base' || size === 'lg'\"\n          [class.text-xl]=\"size === 'xl'\"\n          >{{ text }}</span\n        >\n      }\n      @if (!iconAlone) {\n        @if (isOpen | async) {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-up' : 'chevron-left'\" variant=\"blank\" />\n        } @else {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-down' : 'chevron-right'\" variant=\"blank\" />\n        }\n      }\n    </span>\n  </a>\n  <ng-template #dropDown><ng-content></ng-content></ng-template>\n} @else {\n  @if (link) {\n    <a\n      class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark dark:hover:bg-surface-variant-dark\"\n      [routerLink]=\"link\"\n      [ngClass]=\"{\n        'bg-surface-variant dark:bg-surface-variant-dark': isActive\n      }\">\n      <ng-content select=\"[hint]\" />\n      <span\n        class=\"flex items-center gap-3\"\n        [class.flex-row]=\"iconDirection === 'horizontal'\"\n        [class.flex-col]=\"iconDirection === 'vertical'\">\n        @if (icon) {\n          <ct-icon [icon]=\"icon\" variant=\"solid\" [size]=\"iconSize\" />\n        }\n        @if (text && !iconAlone) {\n          <span\n            [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n            [class.text-base]=\"size === 'base' || size === 'lg'\"\n            [class.text-xl]=\"size === 'xl'\"\n            >{{ text }}</span\n          >\n        }\n      </span>\n    </a>\n  } @else {\n    <span\n      class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark dark:hover:bg-surface-variant-dark\"\n      [ngClass]=\"{\n        'bg-surface-variant dark:bg-surface-variant-dark': isActive\n      }\">\n      <ng-content select=\"[hint]\" />\n      <span\n        class=\"flex items-center gap-3\"\n        [class.flex-row]=\"iconDirection === 'horizontal'\"\n        [class.flex-col]=\"iconDirection === 'vertical'\">\n        @if (icon) {\n          <ct-icon [icon]=\"icon\" variant=\"solid\" [size]=\"iconSize\" />\n        }\n        @if (text && !iconAlone) {\n          <span\n            [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n            [class.text-base]=\"size === 'base' || size === 'lg'\"\n            [class.text-xl]=\"size === 'xl'\"\n            >{{ text }}</span\n          >\n        }\n      </span>\n    </span>\n  }\n}\n" }]
        }], propDecorators: { text: [{
                type: Input
            }], link: [{
                type: Input
            }], type: [{
                type: Input,
                args: [{ required: true }]
            }], size: [{
                type: Input
            }], icon: [{
                type: Input
            }], iconSize: [{
                type: Input
            }], iconAlone: [{
                type: Input
            }], iconDirection: [{
                type: Input
            }], hasSubmenu: [{
                type: Input
            }], submenuPosition: [{
                type: Input
            }], isActive: [{
                type: Input
            }], menus: [{
                type: ContentChildren,
                args: [MenuComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 