@frame-ui-ng/components 0.1.0-beta.0

package/fesm2022/frame-ui-ng-components-context-menu.mjs

@@ -0,0 +1,579 @@
+import * as i1 from '@angular/cdk/menu';
+import { CdkMenu, CdkTargetMenuAim, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuGroup, CdkMenuItemRadio, CdkMenuTrigger, CdkContextMenuTrigger } from '@angular/cdk/menu';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, input, booleanAttribute, Directive, effect, signal, DestroyRef, ElementRef, output, NgModule } from '@angular/core';
+import { buildConnectedPositions, FR_DROPDOWN_MENU_CONTENT, FrDropdownMenuTree, FR_DROPDOWN_MENU_PARENT, defaultPositions } from '@frame-ui-ng/components/dropdown-menu';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+const FR_CONTEXT_MENU_CONTENT = new InjectionToken('FrContextMenuContent');
+class FrContextMenuContent {
+    templateRef = inject((TemplateRef));
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    alignOffset = input(0, ...(ngDevMode ? [{ debugName: "alignOffset" }] : /* istanbul ignore next */ []));
+    debugVisible = input(false, { ...(ngDevMode ? { debugName: "debugVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    side = input('right', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    sideOffset = input(4, ...(ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []));
+    isDebugVisible() {
+        return this.debugVisible();
+    }
+    getPositions(isSubmenu) {
+        return buildConnectedPositions({
+            align: this.align(),
+            alignOffset: this.alignOffset(),
+            isSubmenu,
+            side: this.side(),
+            sideOffset: this.sideOffset(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuContent, isStandalone: true, selector: "ng-template[frContextMenuContent], ng-template[frContextMenuSubContent]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, debugVisible: { classPropertyName: "debugVisible", publicName: "debugVisible", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: FR_CONTEXT_MENU_CONTENT,
+                useExisting: FrContextMenuContent,
+            },
+            {
+                provide: FR_DROPDOWN_MENU_CONTENT,
+                useExisting: FrContextMenuContent,
+            },
+        ], exportAs: ["frContextMenuContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[frContextMenuContent], ng-template[frContextMenuSubContent]',
+                    exportAs: 'frContextMenuContent',
+                    providers: [
+                        {
+                            provide: FR_CONTEXT_MENU_CONTENT,
+                            useExisting: FrContextMenuContent,
+                        },
+                        {
+                            provide: FR_DROPDOWN_MENU_CONTENT,
+                            useExisting: FrContextMenuContent,
+                        },
+                    ],
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], debugVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugVisible", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }] } });
+class FrContextMenuPanel {
+    side = inject(FR_CONTEXT_MENU_CONTENT).side;
+    tree = inject(FrDropdownMenuTree);
+    parent = inject(FR_DROPDOWN_MENU_PARENT);
+    handleMouseEnter() {
+        this.tree.enterInteractiveArea();
+    }
+    handleMouseLeave() {
+        this.tree.leaveInteractiveArea(this.parent.closeDelay());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuPanel, isStandalone: true, selector: "[frContextMenuPanel]", host: { attributes: { "tabindex": "-1" }, listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "side()" }, classAttribute: "frame-context-menu__content frame-dropdown-menu__content" }, hostDirectives: [{ directive: i1.CdkMenu }, { directive: i1.CdkTargetMenuAim }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuPanel]',
+                    hostDirectives: [CdkMenu, CdkTargetMenuAim],
+                    host: {
+                        class: 'frame-context-menu__content frame-dropdown-menu__content',
+                        '[attr.data-side]': 'side()',
+                        tabindex: '-1',
+                        '(mouseenter)': 'handleMouseEnter()',
+                        '(mouseleave)': 'handleMouseLeave()',
+                    },
+                }]
+        }] });
+
+class FrContextMenuItem {
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuItem, isStandalone: true, selector: "[frContextMenuItem]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-dropdown-menu__item" }, hostDirectives: [{ directive: i1.CdkMenuItem }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuItem]',
+                    hostDirectives: [CdkMenuItem],
+                    host: {
+                        class: 'frame-context-menu__item frame-dropdown-menu__item',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+class FrContextMenuCheckboxItem {
+    checkboxItem = inject(CdkMenuItemCheckbox);
+    checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), alias: 'checked',
+        transform: booleanAttribute });
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.checkboxItem.checked = this.checked();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuCheckboxItem, isStandalone: true, selector: "button[frContextMenuCheckboxItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "checkboxItem.checked ? \"\" : null", "attr.data-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-context-menu__checkbox-item frame-dropdown-menu__item frame-dropdown-menu__checkbox-item" }, hostDirectives: [{ directive: i1.CdkMenuItemCheckbox }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuCheckboxItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frContextMenuCheckboxItem]',
+                    hostDirectives: [CdkMenuItemCheckbox],
+                    host: {
+                        class: 'frame-context-menu__item frame-context-menu__checkbox-item frame-dropdown-menu__item frame-dropdown-menu__checkbox-item',
+                        '[attr.data-checked]': 'checkboxItem.checked ? "" : null',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+class FrContextMenuRadioGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuRadioGroup, isStandalone: true, selector: "[frContextMenuRadioGroup]", host: { classAttribute: "frame-context-menu__radio-group frame-dropdown-menu__radio-group" }, hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuRadioGroup]',
+                    hostDirectives: [CdkMenuGroup],
+                    host: {
+                        class: 'frame-context-menu__radio-group frame-dropdown-menu__radio-group',
+                    },
+                }]
+        }] });
+class FrContextMenuRadioItem {
+    radioItem = inject(CdkMenuItemRadio);
+    checked = input(false, { ...(ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {}), alias: 'checked',
+        transform: booleanAttribute });
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.radioItem.checked = this.checked();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuRadioItem, isStandalone: true, selector: "button[frContextMenuRadioItem]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-checked": "radioItem.checked ? \"\" : null", "attr.data-inset": "inset() ? \"\" : null", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-context-menu__radio-item frame-dropdown-menu__item frame-dropdown-menu__radio-item" }, hostDirectives: [{ directive: i1.CdkMenuItemRadio }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuRadioItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frContextMenuRadioItem]',
+                    hostDirectives: [CdkMenuItemRadio],
+                    host: {
+                        class: 'frame-context-menu__item frame-context-menu__radio-item frame-dropdown-menu__item frame-dropdown-menu__radio-item',
+                        '[attr.data-checked]': 'radioItem.checked ? "" : null',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+class FrContextMenuLabel {
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuLabel, isStandalone: true, selector: "[frContextMenuLabel]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset() ? \"\" : null" }, classAttribute: "frame-context-menu__label frame-dropdown-menu__label" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuLabel]',
+                    host: {
+                        class: 'frame-context-menu__label frame-dropdown-menu__label',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
+class FrContextMenuSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuSeparator, isStandalone: true, selector: "[frContextMenuSeparator]", host: { attributes: { "role": "separator" }, classAttribute: "frame-context-menu__separator frame-dropdown-menu__separator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuSeparator]',
+                    host: {
+                        class: 'frame-context-menu__separator frame-dropdown-menu__separator',
+                        role: 'separator',
+                    },
+                }]
+        }] });
+class FrContextMenuShortcut {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuShortcut, isStandalone: true, selector: "[frContextMenuShortcut]", host: { classAttribute: "frame-context-menu__shortcut frame-dropdown-menu__shortcut" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuShortcut, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuShortcut]',
+                    host: {
+                        class: 'frame-context-menu__shortcut frame-dropdown-menu__shortcut',
+                    },
+                }]
+        }] });
+class FrContextMenuItemIndicator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrContextMenuItemIndicator, isStandalone: true, selector: "[frContextMenuItemIndicator]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-context-menu__indicator frame-dropdown-menu__indicator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuItemIndicator]',
+                    host: {
+                        class: 'frame-context-menu__indicator frame-dropdown-menu__indicator',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class FrContextMenu {
+    closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    triggerMode = input('both', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenu, isStandalone: true, selector: "[frContextMenu]", inputs: { closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerMode: { classPropertyName: "triggerMode", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "frame-context-menu-root" }, providers: [
+            FrDropdownMenuTree,
+            {
+                provide: FR_DROPDOWN_MENU_PARENT,
+                useExisting: FrContextMenu,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenu]',
+                    providers: [
+                        FrDropdownMenuTree,
+                        {
+                            provide: FR_DROPDOWN_MENU_PARENT,
+                            useExisting: FrContextMenu,
+                        },
+                    ],
+                    host: {
+                        class: 'frame-context-menu-root',
+                    },
+                }]
+        }], propDecorators: { closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+class FrContextMenuSub {
+    parent = inject(FR_DROPDOWN_MENU_PARENT, { skipSelf: true });
+    closeDelayInput = input(null, { ...(ngDevMode ? { debugName: "closeDelayInput" } : /* istanbul ignore next */ {}), alias: 'closeDelay' });
+    triggerModeInput = input(null, { ...(ngDevMode ? { debugName: "triggerModeInput" } : /* istanbul ignore next */ {}), alias: 'triggerMode' });
+    closeDelay = signal(this.parent.closeDelay(), ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    triggerMode = signal(this.parent.triggerMode(), ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.closeDelay.set(this.closeDelayInput() ?? this.parent.closeDelay());
+            this.triggerMode.set(this.triggerModeInput() ?? this.parent.triggerMode());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuSub, isStandalone: true, selector: "[frContextMenuSub]", inputs: { closeDelayInput: { classPropertyName: "closeDelayInput", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "frame-context-menu-sub frame-dropdown-menu-sub" }, providers: [
+            {
+                provide: FR_DROPDOWN_MENU_PARENT,
+                useExisting: FrContextMenuSub,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSub, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuSub]',
+                    providers: [
+                        {
+                            provide: FR_DROPDOWN_MENU_PARENT,
+                            useExisting: FrContextMenuSub,
+                        },
+                    ],
+                    host: {
+                        class: 'frame-context-menu-sub frame-dropdown-menu-sub',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { closeDelayInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+
+class FrContextMenuSubTrigger {
+    cdkMenuTrigger = inject(CdkMenuTrigger);
+    destroyRef = inject(DestroyRef);
+    tree = inject(FrDropdownMenuTree);
+    parent = inject(FR_DROPDOWN_MENU_PARENT);
+    menuContent = input(null, { ...(ngDevMode ? { debugName: "menuContent" } : /* istanbul ignore next */ {}), alias: 'frContextMenuSubTrigger' });
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    triggerModeInput = input(null, { ...(ngDevMode ? { debugName: "triggerModeInput" } : /* istanbul ignore next */ {}), alias: 'triggerMode' });
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.tree.register(this);
+        effect(() => {
+            const content = this.menuContent();
+            this.cdkMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
+            this.cdkMenuTrigger.menuPosition = this.resolvePositions();
+            if (content?.isDebugVisible() && !this.cdkMenuTrigger.isOpen()) {
+                queueMicrotask(() => {
+                    if (!this.cdkMenuTrigger.isOpen()) {
+                        this.cdkMenuTrigger.open();
+                    }
+                });
+            }
+        });
+        this.cdkMenuTrigger.opened.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.tree.cancelClose();
+            this.isOpen.set(true);
+        });
+        this.cdkMenuTrigger.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            if (this.menuContent()?.isDebugVisible()) {
+                queueMicrotask(() => {
+                    if (!this.cdkMenuTrigger.isOpen()) {
+                        this.cdkMenuTrigger.open();
+                    }
+                });
+                return;
+            }
+            this.isOpen.set(false);
+        });
+    }
+    close() {
+        if (this.menuContent()?.isDebugVisible()) {
+            return;
+        }
+        if (this.cdkMenuTrigger.isOpen()) {
+            this.cdkMenuTrigger.close();
+        }
+    }
+    ngOnDestroy() {
+        this.tree.unregister(this);
+    }
+    handleMouseEnter() {
+        this.tree.enterInteractiveArea();
+        if (this.triggerMode === 'hover' || this.triggerMode === 'both') {
+            this.tree.cancelClose();
+            if (!this.cdkMenuTrigger.isOpen()) {
+                this.cdkMenuTrigger.open();
+            }
+        }
+    }
+    handleMouseLeave() {
+        if (this.menuContent()?.isDebugVisible()) {
+            return;
+        }
+        if (this.triggerMode === 'hover' || this.triggerMode === 'both') {
+            this.tree.leaveInteractiveArea(this.parent.closeDelay());
+        }
+    }
+    get triggerMode() {
+        return this.triggerModeInput() ?? this.parent.triggerMode();
+    }
+    resolvePositions() {
+        return this.menuContent()?.getPositions(true) ?? defaultPositions(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSubTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuSubTrigger, isStandalone: true, selector: "[frContextMenuSubTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frContextMenuSubTrigger", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-inset": "inset() ? \"\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "variant()" }, classAttribute: "frame-context-menu__item frame-context-menu__sub-trigger frame-dropdown-menu__item frame-dropdown-menu__sub-trigger" }, hostDirectives: [{ directive: i1.CdkMenuItem }, { directive: i1.CdkMenuTrigger }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuSubTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuSubTrigger]',
+                    hostDirectives: [CdkMenuItem, CdkMenuTrigger],
+                    host: {
+                        class: 'frame-context-menu__item frame-context-menu__sub-trigger frame-dropdown-menu__item frame-dropdown-menu__sub-trigger',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-variant]': 'variant()',
+                        '(mouseenter)': 'handleMouseEnter()',
+                        '(mouseleave)': 'handleMouseLeave()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frContextMenuSubTrigger", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class FrContextMenuTrigger {
+    static CUSTOM_PROPERTY_PREFIX = '--frame-dropdown-menu-';
+    cdkContextMenuTrigger = inject(CdkContextMenuTrigger);
+    destroyRef = inject(DestroyRef);
+    elementRef = inject(ElementRef);
+    longPressTimeoutId = null;
+    menuContent = input(null, { ...(ngDevMode ? { debugName: "menuContent" } : /* istanbul ignore next */ {}), alias: 'frContextMenuTrigger' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    longPressDelay = input(520, ...(ngDevMode ? [{ debugName: "longPressDelay" }] : /* istanbul ignore next */ []));
+    opened = output();
+    closed = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const content = this.menuContent();
+            this.cdkContextMenuTrigger.menuTemplateRef = content?.templateRef ?? null;
+            this.cdkContextMenuTrigger.menuPosition = this.resolvePositions();
+            this.cdkContextMenuTrigger.disabled = this.disabled();
+            if (content?.isDebugVisible() && !this.cdkContextMenuTrigger.isOpen()) {
+                queueMicrotask(() => {
+                    if (!this.cdkContextMenuTrigger.isOpen()) {
+                        this.openAtCenter();
+                    }
+                });
+            }
+        });
+        this.cdkContextMenuTrigger.opened.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.isOpen.set(true);
+            this.opened.emit();
+            queueMicrotask(() => {
+                this.syncCustomPropertiesToOverlay();
+            });
+        });
+        this.cdkContextMenuTrigger.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            if (this.menuContent()?.isDebugVisible()) {
+                queueMicrotask(() => {
+                    if (!this.cdkContextMenuTrigger.isOpen()) {
+                        this.openAtCenter();
+                    }
+                });
+                return;
+            }
+            this.isOpen.set(false);
+            this.closed.emit();
+        });
+    }
+    openAt(coordinates) {
+        if (this.disabled() || !this.menuContent()) {
+            return;
+        }
+        this.cdkContextMenuTrigger.open(coordinates);
+    }
+    close() {
+        this.cdkContextMenuTrigger.close();
+    }
+    handlePointerDown(event) {
+        if (this.disabled() || (event.pointerType !== 'touch' && event.pointerType !== 'pen')) {
+            return;
+        }
+        this.clearLongPress();
+        this.longPressTimeoutId = setTimeout(() => {
+            event.preventDefault();
+            this.openAt({ x: event.clientX, y: event.clientY });
+        }, this.longPressDelay());
+    }
+    clearLongPress() {
+        if (this.longPressTimeoutId === null) {
+            return;
+        }
+        clearTimeout(this.longPressTimeoutId);
+        this.longPressTimeoutId = null;
+    }
+    resolvePositions() {
+        return this.menuContent()?.getPositions(false) ?? defaultPositions(false);
+    }
+    openAtCenter() {
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        this.openAt({
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+        });
+    }
+    syncCustomPropertiesToOverlay() {
+        const overlayRef = this.cdkContextMenuTrigger.overlayRef;
+        const overlayElement = overlayRef?.overlayElement ?? null;
+        if (!overlayElement) {
+            return;
+        }
+        const menuPanel = overlayElement.querySelector('.frame-dropdown-menu__content') ?? overlayElement;
+        const sourceStyles = getComputedStyle(this.elementRef.nativeElement);
+        for (let index = 0; index < sourceStyles.length; index += 1) {
+            const propertyName = sourceStyles.item(index);
+            if (!propertyName.startsWith(FrContextMenuTrigger.CUSTOM_PROPERTY_PREFIX)) {
+                continue;
+            }
+            const propertyValue = sourceStyles.getPropertyValue(propertyName);
+            overlayElement.style.setProperty(propertyName, propertyValue);
+            menuPanel.style.setProperty(propertyName, propertyValue);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrContextMenuTrigger, isStandalone: true, selector: "[frContextMenuTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frContextMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, longPressDelay: { classPropertyName: "longPressDelay", publicName: "longPressDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "pointerdown": "handlePointerDown($event)", "pointerup": "clearLongPress()", "pointercancel": "clearLongPress()", "pointerleave": "clearLongPress()" }, properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-context-menu__trigger" }, hostDirectives: [{ directive: i1.CdkContextMenuTrigger }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frContextMenuTrigger]',
+                    hostDirectives: [CdkContextMenuTrigger],
+                    host: {
+                        class: 'frame-context-menu__trigger',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '(pointerdown)': 'handlePointerDown($event)',
+                        '(pointerup)': 'clearLongPress()',
+                        '(pointercancel)': 'clearLongPress()',
+                        '(pointerleave)': 'clearLongPress()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frContextMenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], longPressDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "longPressDelay", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class FrContextMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuModule, imports: [FrContextMenu,
+            FrContextMenuCheckboxItem,
+            FrContextMenuContent,
+            FrContextMenuItem,
+            FrContextMenuItemIndicator,
+            FrContextMenuLabel,
+            FrContextMenuPanel,
+            FrContextMenuRadioGroup,
+            FrContextMenuRadioItem,
+            FrContextMenuSeparator,
+            FrContextMenuShortcut,
+            FrContextMenuSub,
+            FrContextMenuSubTrigger,
+            FrContextMenuTrigger], exports: [FrContextMenu,
+            FrContextMenuCheckboxItem,
+            FrContextMenuContent,
+            FrContextMenuItem,
+            FrContextMenuItemIndicator,
+            FrContextMenuLabel,
+            FrContextMenuPanel,
+            FrContextMenuRadioGroup,
+            FrContextMenuRadioItem,
+            FrContextMenuSeparator,
+            FrContextMenuShortcut,
+            FrContextMenuSub,
+            FrContextMenuSubTrigger,
+            FrContextMenuTrigger] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FrContextMenu,
+                        FrContextMenuCheckboxItem,
+                        FrContextMenuContent,
+                        FrContextMenuItem,
+                        FrContextMenuItemIndicator,
+                        FrContextMenuLabel,
+                        FrContextMenuPanel,
+                        FrContextMenuRadioGroup,
+                        FrContextMenuRadioItem,
+                        FrContextMenuSeparator,
+                        FrContextMenuShortcut,
+                        FrContextMenuSub,
+                        FrContextMenuSubTrigger,
+                        FrContextMenuTrigger,
+                    ],
+                    exports: [
+                        FrContextMenu,
+                        FrContextMenuCheckboxItem,
+                        FrContextMenuContent,
+                        FrContextMenuItem,
+                        FrContextMenuItemIndicator,
+                        FrContextMenuLabel,
+                        FrContextMenuPanel,
+                        FrContextMenuRadioGroup,
+                        FrContextMenuRadioItem,
+                        FrContextMenuSeparator,
+                        FrContextMenuShortcut,
+                        FrContextMenuSub,
+                        FrContextMenuSubTrigger,
+                        FrContextMenuTrigger,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FR_CONTEXT_MENU_CONTENT, FrContextMenu, FrContextMenuCheckboxItem, FrContextMenuContent, FrContextMenuItem, FrContextMenuItemIndicator, FrContextMenuLabel, FrContextMenuModule, FrContextMenuPanel, FrContextMenuRadioGroup, FrContextMenuRadioItem, FrContextMenuSeparator, FrContextMenuShortcut, FrContextMenuSub, FrContextMenuSubTrigger, FrContextMenuTrigger };
+//# sourceMappingURL=frame-ui-ng-components-context-menu.mjs.map