@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/menu/fesm2022/menu.mjs

@@ -0,0 +1,461 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, Directive, booleanAttribute, NgModule } from '@angular/core';
+import * as i1 from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuBar, CdkMenuItem, CdkMenuGroup, CdkMenuItemCheckbox, CdkMenuItemRadio } from '@angular/cdk/menu';
+import { hlm } from '@egose/shadcn-theme-ng-tw/utils';
+import { cva } from 'class-variance-authority';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck, lucideCircle, lucideChevronRight } from '@ng-icons/lucide';
+import { HlmIcon, provideHlmIconConfig } from '@egose/shadcn-theme-ng-tw/icon';
+
+const menuVariants = cva('tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:origin-top tw:overflow-y-auto tw:overflow-x-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-md', {
+    variants: {
+        variant: {
+            default: 'tw:my-0.5',
+            menubar: 'tw:my-2',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+class HlmMenu {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm(menuVariants({ variant: this.variant() }), this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenu, isStandalone: true, selector: "hlm-menu", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    hostDirectives: [CdkMenu],
+                    template: ` <ng-content /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class HlmMenuBar {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:bg-background tw:shadow-xs tw:flex tw:h-9 tw:items-center tw:gap-1 tw:rounded-md tw:border tw:p-1', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuBar, isStandalone: true, selector: "hlm-menu-bar", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.CdkMenuBar }], ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-bar',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    hostDirectives: [CdkMenuBar],
+                    template: '<ng-content/>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuBarItem {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:focus:bg-secondary tw:focus:text-secondary-foreground tw:aria-expanded:bg-secondary tw:aria-expanded:text-secondary-foreground tw:flex tw:select-none tw:items-center tw:rounded-sm tw:px-2 tw:py-1 tw:text-sm tw:font-medium tw:outline-none', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuBarItem, isStandalone: true, selector: "[hlmMenuBarItem]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.CdkMenuItem }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBarItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmMenuBarItem]',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    hostDirectives: [CdkMenuItem],
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmMenuGroup, isStandalone: true, selector: "hlm-menu-group", host: { classAttribute: "block" }, hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-group',
+                    host: {
+                        class: "tw:block",
+                    },
+                    hostDirectives: [CdkMenuGroup],
+                    template: ` <ng-content /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class HlmMenuItem {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm(`tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:data-[variant=destructive]:text-destructive tw:data-[variant=destructive]:focus:bg-destructive/10 tw:dark:data-[variant=destructive]:focus:bg-destructive/20 tw:data-[variant=destructive]:focus:text-destructive tw:data-[variant=destructive]:*:[ng-icon]:!text-destructive tw:[&_ng-icon]:text-muted-foreground tw:relative tw:flex tw:w-full tw:cursor-default tw:select-none tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-none tw:data-[disabled]:pointer-events-none tw:data-[inset]:pl-8 tw:data-[disabled]:opacity-50 tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0`, this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuItem, isStandalone: true, selector: "[hlmMenuItem]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-variant": "variant()", "attr.data-inset": "inset() ? \"\" : null" } }, hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmMenuItem]',
+                    host: {
+                        '[class]': '_computedClass()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItem,
+                            inputs: ['cdkMenuItemDisabled: disabled'],
+                            outputs: ['cdkMenuItemTriggered: triggered'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuItemCheck {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:absolute tw:left-2 tw:flex tw:h-3.5 tw:w-3.5 tw:items-center tw:justify-center tw:opacity-0 tw:group-[.checked]:opacity-100', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemCheck, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuItemCheck, isStandalone: true, selector: "hlm-menu-item-check", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideCheck })], ngImport: i0, template: `
+    <!-- Using 1rem for size to mimick h-4 w-4 -->
+    <ng-icon hlm size="1rem" name="lucideCheck" />
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemCheck, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-item-check',
+                    providers: [provideIcons({ lucideCheck })],
+                    imports: [NgIcon, HlmIcon],
+                    template: `
+    <!-- Using 1rem for size to mimick h-4 w-4 -->
+    <ng-icon hlm size="1rem" name="lucideCheck" />
+  `,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuItemCheckbox {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:focus-visible:bg-secondary tw:focus-visible:text-secondary-foreground tw:group tw:relative tw:flex tw:w-full tw:cursor-default tw:select-none tw:items-center tw:rounded-sm tw:py-1.5 tw:pl-8 tw:pr-2 tw:text-sm tw:outline-none tw:transition-colors tw:disabled:pointer-events-none tw:disabled:opacity-50', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuItemCheckbox, isStandalone: true, selector: "[hlmMenuItemCheckbox]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuItemChecked", "checked"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmMenuItemCheckbox]',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItemCheckbox,
+                            inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+                            outputs: ['cdkMenuItemTriggered: triggered'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuItemIcon {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:mr-2', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuItemIcon, isStandalone: true, selector: "[hlmMenuIcon]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideHlmIconConfig({ size: 'sm' })], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmMenuIcon]',
+                    providers: [provideHlmIconConfig({ size: 'sm' })],
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuItemRadio {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:hover:bg-secondary tw:hover:text-secondary-foreground tw:focus-visible:bg-secondary tw:focus-visible:text-secondary-foreground tw:group tw:relative tw:flex tw:w-full tw:cursor-default tw:select-none tw:items-center tw:rounded-sm tw:py-1.5 tw:pl-8 tw:pr-2 tw:text-sm tw:outline-none tw:transition-colors tw:disabled:pointer-events-none tw:disabled:opacity-50', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemRadio, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuItemRadio, isStandalone: true, selector: "[hlmMenuItemRadio]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.CdkMenuItemRadio, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuItemChecked", "checked"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemRadio, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmMenuItemRadio]',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItemRadio,
+                            inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked'],
+                            outputs: ['cdkMenuItemTriggered: triggered'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuItemRadioIndicator {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:absolute tw:left-2 tw:flex tw:h-3.5 tw:w-3.5 tw:items-center tw:justify-center tw:opacity-0 tw:group-[.checked]:opacity-100', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemRadioIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuItemRadioIndicator, isStandalone: true, selector: "hlm-menu-item-radio", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideCircle })], ngImport: i0, template: `
+    <!-- Using 0.5rem for size to mimick h-2 w-2 -->
+    <ng-icon hlm size="0.5rem" class="tw:*:*:fill-current" name="lucideCircle" />
+  `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemRadioIndicator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-item-radio',
+                    providers: [provideIcons({ lucideCircle })],
+                    imports: [NgIcon, HlmIcon],
+                    template: `
+    <!-- Using 0.5rem for size to mimick h-2 w-2 -->
+    <ng-icon hlm size="0.5rem" class="tw:*:*:fill-current" name="lucideCircle" />
+  `,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuItemSubIndicator {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:ml-auto tw:size-4', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemSubIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuItemSubIndicator, isStandalone: true, selector: "hlm-menu-item-sub-indicator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronRight })], ngImport: i0, template: ` <ng-icon hlm size="sm" name="lucideChevronRight" class="tw:text-popover-foreground" /> `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemSubIndicator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-item-sub-indicator',
+                    providers: [provideIcons({ lucideChevronRight })],
+                    imports: [NgIcon, HlmIcon],
+                    template: ` <ng-icon hlm size="sm" name="lucideChevronRight" class="tw:text-popover-foreground" /> `,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuLabel {
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:block tw:px-2 tw:py-1.5 tw:text-sm tw:font-semibold tw:data-[inset]:pl-8', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuLabel, isStandalone: true, selector: "hlm-menu-label", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()", "attr.data-inset": "inset() ? \"\" : null" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-label',
+                    template: ` <ng-content /> `,
+                    host: {
+                        '[class]': '_computedClass()',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuSeparator {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:bg-border tw:-mx-1 tw:my-1 tw:block tw:h-px', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuSeparator, isStandalone: true, selector: "hlm-menu-separator", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-separator',
+                    template: '',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmMenuShortcut {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuShortcut, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmMenuShortcut, isStandalone: true, selector: "hlm-menu-shortcut", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuShortcut, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-menu-shortcut',
+                    template: ` <ng-content /> `,
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class HlmSubMenu {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm('tw:border-border tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:min-w-[8rem] tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSubMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmSubMenu, isStandalone: true, selector: "hlm-sub-menu", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSubMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-sub-menu',
+                    host: {
+                        '[class]': '_computedClass()',
+                    },
+                    hostDirectives: [CdkMenu],
+                    template: ` <ng-content /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/*
+ * Public API Surface of menu
+ */
+const HlmMenuItemImports = [
+    HlmMenuItem,
+    HlmMenuItemIcon,
+    HlmMenuGroup,
+    HlmMenuItemSubIndicator,
+    HlmMenuItemRadioIndicator,
+    HlmMenuItemCheck,
+    HlmMenuShortcut,
+    HlmMenuItemCheckbox,
+    HlmMenuItemRadio,
+];
+const HlmMenuStructureImports = [HlmMenuLabel, HlmMenuSeparator];
+const HlmMenuImports = [...HlmMenuItemImports, ...HlmMenuStructureImports, HlmMenu, HlmSubMenu];
+const HlmMenuBarImports = [...HlmMenuImports, HlmMenuBar, HlmMenuBarItem];
+class HlmMenuItemModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemModule, imports: [HlmMenuItem,
+            HlmMenuItemIcon,
+            HlmMenuGroup,
+            HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck,
+            HlmMenuShortcut,
+            HlmMenuItemCheckbox,
+            HlmMenuItemRadio], exports: [HlmMenuItem,
+            HlmMenuItemIcon,
+            HlmMenuGroup,
+            HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck,
+            HlmMenuShortcut,
+            HlmMenuItemCheckbox,
+            HlmMenuItemRadio] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemModule, imports: [HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmMenuItemImports],
+                    exports: [...HlmMenuItemImports],
+                }]
+        }] });
+class HlmMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuModule, imports: [HlmMenuItem,
+            HlmMenuItemIcon,
+            HlmMenuGroup,
+            HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck,
+            HlmMenuShortcut,
+            HlmMenuItemCheckbox,
+            HlmMenuItemRadio, HlmMenuLabel, HlmMenuSeparator, HlmMenu, HlmSubMenu], exports: [HlmMenuItem,
+            HlmMenuItemIcon,
+            HlmMenuGroup,
+            HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck,
+            HlmMenuShortcut,
+            HlmMenuItemCheckbox,
+            HlmMenuItemRadio, HlmMenuLabel, HlmMenuSeparator, HlmMenu, HlmSubMenu] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuModule, imports: [HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmMenuImports],
+                    exports: [...HlmMenuImports],
+                }]
+        }] });
+class HlmMenuBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBarModule, imports: [HlmMenuItem,
+            HlmMenuItemIcon,
+            HlmMenuGroup,
+            HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck,
+            HlmMenuShortcut,
+            HlmMenuItemCheckbox,
+            HlmMenuItemRadio, HlmMenuLabel, HlmMenuSeparator, HlmMenu, HlmSubMenu, HlmMenuBar, HlmMenuBarItem], exports: [HlmMenuItem,
+            HlmMenuItemIcon,
+            HlmMenuGroup,
+            HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck,
+            HlmMenuShortcut,
+            HlmMenuItemCheckbox,
+            HlmMenuItemRadio, HlmMenuLabel, HlmMenuSeparator, HlmMenu, HlmSubMenu, HlmMenuBar, HlmMenuBarItem] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBarModule, imports: [HlmMenuItemSubIndicator,
+            HlmMenuItemRadioIndicator,
+            HlmMenuItemCheck] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmMenuBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmMenuBarImports],
+                    exports: [...HlmMenuBarImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmMenu, HlmMenuBar, HlmMenuBarImports, HlmMenuBarItem, HlmMenuBarModule, HlmMenuGroup, HlmMenuImports, HlmMenuItem, HlmMenuItemCheck, HlmMenuItemCheckbox, HlmMenuItemIcon, HlmMenuItemImports, HlmMenuItemModule, HlmMenuItemRadio, HlmMenuItemRadioIndicator, HlmMenuItemSubIndicator, HlmMenuLabel, HlmMenuModule, HlmMenuSeparator, HlmMenuShortcut, HlmMenuStructureImports, HlmSubMenu, menuVariants };
+

package/menu/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "menu",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/menu.mjs",
+  "typings": "types/menu.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/menu.d.ts",
+      "default": "./fesm2022/menu.mjs"
+    }
+  },
+  "type": "module"
+}