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

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

@@ -0,0 +1,647 @@
+import * as i1 from '@angular/cdk/menu';
+import { CdkMenu, CdkTargetMenuAim, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuGroup, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, input, Directive, inject, signal, effect, TemplateRef, booleanAttribute, DestroyRef, ElementRef, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+function defaultPositions(isSubmenu) {
+    return buildConnectedPositions({
+        align: 'start',
+        alignOffset: 0,
+        isSubmenu,
+        side: isSubmenu ? 'right' : 'bottom',
+        sideOffset: 4,
+    });
+}
+function buildConnectedPositions(options) {
+    const placements = primaryPlacement(options);
+    return [placements.primary, placements.fallback];
+}
+function primaryPlacement(options) {
+    if (options.isSubmenu) {
+        const isRight = options.side !== 'left';
+        const horizontalOffset = isRight ? options.sideOffset : -options.sideOffset;
+        const originY = submenuOriginY(options.align);
+        const overlayY = submenuOverlayY(options.align);
+        return {
+            primary: {
+                originX: isRight ? 'end' : 'start',
+                originY,
+                overlayX: isRight ? 'start' : 'end',
+                overlayY,
+                offsetX: horizontalOffset,
+                offsetY: options.alignOffset,
+            },
+            fallback: {
+                originX: isRight ? 'start' : 'end',
+                originY,
+                overlayX: isRight ? 'end' : 'start',
+                overlayY,
+                offsetX: -horizontalOffset,
+                offsetY: options.alignOffset,
+            },
+        };
+    }
+    const isBottom = options.side !== 'top';
+    const verticalOffset = isBottom ? options.sideOffset : -options.sideOffset;
+    const originX = rootOriginX(options.align);
+    const overlayX = rootOverlayX(options.align);
+    return {
+        primary: {
+            originX,
+            originY: isBottom ? 'bottom' : 'top',
+            overlayX,
+            overlayY: isBottom ? 'top' : 'bottom',
+            offsetX: options.alignOffset,
+            offsetY: verticalOffset,
+        },
+        fallback: {
+            originX,
+            originY: isBottom ? 'top' : 'bottom',
+            overlayX,
+            overlayY: isBottom ? 'bottom' : 'top',
+            offsetX: options.alignOffset,
+            offsetY: -verticalOffset,
+        },
+    };
+}
+function rootOriginX(align) {
+    if (align === 'center') {
+        return 'center';
+    }
+    return align;
+}
+function rootOverlayX(align) {
+    if (align === 'center') {
+        return 'center';
+    }
+    return align;
+}
+function submenuOriginY(align) {
+    if (align === 'center') {
+        return 'center';
+    }
+    return align === 'end' ? 'bottom' : 'top';
+}
+function submenuOverlayY(align) {
+    if (align === 'center') {
+        return 'center';
+    }
+    return align === 'end' ? 'bottom' : 'top';
+}
+
+const FR_DROPDOWN_MENU_PARENT = new InjectionToken('FrDropdownMenuParent');
+class FrDropdownMenuTree {
+    triggers = new Set();
+    closeTimeoutId = null;
+    pointerInsideCount = 0;
+    register(trigger) {
+        this.triggers.add(trigger);
+    }
+    unregister(trigger) {
+        this.triggers.delete(trigger);
+    }
+    cancelClose() {
+        if (this.closeTimeoutId !== null) {
+            clearTimeout(this.closeTimeoutId);
+            this.closeTimeoutId = null;
+        }
+    }
+    enterInteractiveArea() {
+        this.pointerInsideCount += 1;
+        this.cancelClose();
+    }
+    leaveInteractiveArea(delay) {
+        this.pointerInsideCount = Math.max(0, this.pointerInsideCount - 1);
+        if (this.pointerInsideCount === 0) {
+            this.scheduleClose(delay);
+        }
+    }
+    scheduleClose(delay) {
+        this.cancelClose();
+        this.closeTimeoutId = setTimeout(() => {
+            this.closeAll();
+        }, delay);
+    }
+    closeAll() {
+        this.cancelClose();
+        for (const trigger of this.triggers) {
+            trigger.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTree, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTree });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTree, decorators: [{
+            type: Injectable
+        }] });
+class FrDropdownMenu {
+    closeDelay = input(140, ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    triggerMode = input('click', ...(ngDevMode ? [{ debugName: "triggerMode" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenu, isStandalone: true, selector: "[frDropdownMenu]", 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-dropdown-menu-root" }, providers: [
+            FrDropdownMenuTree,
+            {
+                provide: FR_DROPDOWN_MENU_PARENT,
+                useExisting: FrDropdownMenu,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenu]',
+                    providers: [
+                        FrDropdownMenuTree,
+                        {
+                            provide: FR_DROPDOWN_MENU_PARENT,
+                            useExisting: FrDropdownMenu,
+                        },
+                    ],
+                    host: {
+                        class: 'frame-dropdown-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 FrDropdownMenuSub {
+    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: FrDropdownMenuSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuSub, isStandalone: true, selector: "[frDropdownMenuSub]", 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-dropdown-menu-sub" }, providers: [
+            {
+                provide: FR_DROPDOWN_MENU_PARENT,
+                useExisting: FrDropdownMenuSub,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSub, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuSub]',
+                    providers: [
+                        {
+                            provide: FR_DROPDOWN_MENU_PARENT,
+                            useExisting: FrDropdownMenuSub,
+                        },
+                    ],
+                    host: {
+                        class: '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 }] }] } });
+
+const FR_DROPDOWN_MENU_CONTENT = new InjectionToken('FrDropdownMenuContent');
+class FrDropdownMenuContent {
+    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('bottom', ...(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: FrDropdownMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuContent, isStandalone: true, selector: "ng-template[frDropdownMenuContent], ng-template[frDropdownMenuSubContent]", 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_DROPDOWN_MENU_CONTENT,
+                useExisting: FrDropdownMenuContent,
+            },
+        ], exportAs: ["frDropdownMenuContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[frDropdownMenuContent], ng-template[frDropdownMenuSubContent]',
+                    exportAs: 'frDropdownMenuContent',
+                    providers: [
+                        {
+                            provide: FR_DROPDOWN_MENU_CONTENT,
+                            useExisting: FrDropdownMenuContent,
+                        },
+                    ],
+                }]
+        }], 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 FrDropdownMenuPanel {
+    side = inject(FR_DROPDOWN_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: FrDropdownMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuPanel, isStandalone: true, selector: "[frDropdownMenuPanel]", host: { attributes: { "tabindex": "-1" }, listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" }, properties: { "attr.data-side": "side()" }, classAttribute: "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: FrDropdownMenuPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuPanel]',
+                    hostDirectives: [CdkMenu, CdkTargetMenuAim],
+                    host: {
+                        class: 'frame-dropdown-menu__content',
+                        '[attr.data-side]': 'side()',
+                        tabindex: '-1',
+                        '(mouseenter)': 'handleMouseEnter()',
+                        '(mouseleave)': 'handleMouseLeave()'
+                    },
+                }]
+        }] });
+
+class FrDropdownMenuItem {
+    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: FrDropdownMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuItem, isStandalone: true, selector: "[frDropdownMenuItem]", 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-dropdown-menu__item" }, hostDirectives: [{ directive: i1.CdkMenuItem }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuItem]',
+                    hostDirectives: [CdkMenuItem],
+                    host: {
+                        class: '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 FrDropdownMenuCheckboxItem {
+    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: FrDropdownMenuCheckboxItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuCheckboxItem, isStandalone: true, selector: "button[frDropdownMenuCheckboxItem]", 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-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: FrDropdownMenuCheckboxItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frDropdownMenuCheckboxItem]',
+                    hostDirectives: [CdkMenuItemCheckbox],
+                    host: {
+                        class: '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 FrDropdownMenuRadioGroup {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuRadioGroup, isStandalone: true, selector: "[frDropdownMenuRadioGroup]", host: { classAttribute: "frame-dropdown-menu__radio-group" }, hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuRadioGroup]',
+                    hostDirectives: [CdkMenuGroup],
+                    host: {
+                        class: 'frame-dropdown-menu__radio-group',
+                    },
+                }]
+        }] });
+class FrDropdownMenuRadioItem {
+    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: FrDropdownMenuRadioItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuRadioItem, isStandalone: true, selector: "button[frDropdownMenuRadioItem]", 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-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: FrDropdownMenuRadioItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frDropdownMenuRadioItem]',
+                    hostDirectives: [CdkMenuItemRadio],
+                    host: {
+                        class: '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 FrDropdownMenuLabel {
+    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: FrDropdownMenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuLabel, isStandalone: true, selector: "[frDropdownMenuLabel]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-inset": "inset() ? \"\" : null" }, classAttribute: "frame-dropdown-menu__label" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuLabel]',
+                    host: {
+                        class: 'frame-dropdown-menu__label',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] } });
+class FrDropdownMenuSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuSeparator, isStandalone: true, selector: "[frDropdownMenuSeparator]", host: { attributes: { "role": "separator" }, classAttribute: "frame-dropdown-menu__separator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuSeparator]',
+                    host: {
+                        class: 'frame-dropdown-menu__separator',
+                        role: 'separator',
+                    },
+                }]
+        }] });
+class FrDropdownMenuShortcut {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuShortcut, isStandalone: true, selector: "[frDropdownMenuShortcut]", host: { classAttribute: "frame-dropdown-menu__shortcut" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuShortcut, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuShortcut]',
+                    host: {
+                        class: 'frame-dropdown-menu__shortcut',
+                    },
+                }]
+        }] });
+class FrDropdownMenuItemIndicator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuItemIndicator, isStandalone: true, selector: "[frDropdownMenuItemIndicator]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-dropdown-menu__indicator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuItemIndicator]',
+                    host: {
+                        class: 'frame-dropdown-menu__indicator',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class FrDropdownMenuTriggerBase {
+    static CUSTOM_PROPERTY_PREFIX = '--frame-dropdown-menu-';
+    cdkMenuTrigger = inject(CdkMenuTrigger);
+    destroyRef = inject(DestroyRef);
+    elementRef = inject(ElementRef);
+    tree = inject(FrDropdownMenuTree);
+    parent = inject(FR_DROPDOWN_MENU_PARENT);
+    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);
+            queueMicrotask(() => {
+                this.syncCustomPropertiesToOverlay();
+            });
+        });
+        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);
+        });
+    }
+    get triggerMode() {
+        return this.triggerModeInput() ?? this.parent.triggerMode();
+    }
+    get closeDelay() {
+        return this.parent.closeDelay();
+    }
+    resolvePositions() {
+        return (this.menuContent()?.getPositions(this.isSubmenuTrigger) ??
+            defaultPositions(this.isSubmenuTrigger));
+    }
+    openFromHover() {
+        if (this.triggerMode === 'hover' || this.triggerMode === 'both') {
+            this.tree.cancelClose();
+            if (!this.cdkMenuTrigger.isOpen()) {
+                this.cdkMenuTrigger.open();
+            }
+        }
+    }
+    handleMouseEnter() {
+        this.tree.enterInteractiveArea();
+        this.openFromHover();
+    }
+    handleMouseLeave() {
+        if (this.menuContent()?.isDebugVisible()) {
+            return;
+        }
+        if (this.triggerMode === 'hover' || this.triggerMode === 'both') {
+            this.tree.leaveInteractiveArea(this.closeDelay);
+        }
+    }
+    close() {
+        if (this.menuContent()?.isDebugVisible()) {
+            return;
+        }
+        if (this.cdkMenuTrigger.isOpen()) {
+            this.cdkMenuTrigger.close();
+        }
+    }
+    ngOnDestroy() {
+        this.tree.unregister(this);
+    }
+    syncCustomPropertiesToOverlay() {
+        const overlayRef = this.cdkMenuTrigger
+            .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(FrDropdownMenuTriggerBase.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: FrDropdownMenuTriggerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrDropdownMenuTriggerBase, isStandalone: true, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTriggerBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '(mouseenter)': 'handleMouseEnter()',
+                        '(mouseleave)': 'handleMouseLeave()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+class FrDropdownMenuTrigger extends FrDropdownMenuTriggerBase {
+    menuContent = input(null, { ...(ngDevMode ? { debugName: "menuContent" } : /* istanbul ignore next */ {}), alias: 'frDropdownMenuTrigger' });
+    triggerModeInput = input(null, { ...(ngDevMode ? { debugName: "triggerModeInput" } : /* istanbul ignore next */ {}), alias: 'triggerMode' });
+    isSubmenuTrigger = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuTrigger, isStandalone: true, selector: "[frDropdownMenuTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frDropdownMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, triggerModeInput: { classPropertyName: "triggerModeInput", publicName: "triggerMode", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "isOpen() ? \"open\" : \"closed\"" }, classAttribute: "frame-dropdown-menu__trigger" }, usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuTrigger }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuTrigger]',
+                    hostDirectives: [CdkMenuTrigger],
+                    host: {
+                        class: 'frame-dropdown-menu__trigger',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                    },
+                }]
+        }], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frDropdownMenuTrigger", required: false }] }], triggerModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMode", required: false }] }] } });
+class FrDropdownMenuSubTrigger extends FrDropdownMenuTriggerBase {
+    menuContent = input(null, { ...(ngDevMode ? { debugName: "menuContent" } : /* istanbul ignore next */ {}), alias: 'frDropdownMenuSubTrigger' });
+    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 */ []));
+    isSubmenuTrigger = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSubTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrDropdownMenuSubTrigger, isStandalone: true, selector: "[frDropdownMenuSubTrigger]", inputs: { menuContent: { classPropertyName: "menuContent", publicName: "frDropdownMenuSubTrigger", 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: { properties: { "attr.data-inset": "inset() ? \"\" : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-variant": "variant()" }, classAttribute: "frame-dropdown-menu__item frame-dropdown-menu__sub-trigger" }, usesInheritance: true, hostDirectives: [{ directive: i1.CdkMenuItem }, { directive: i1.CdkMenuTrigger }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuSubTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frDropdownMenuSubTrigger]',
+                    hostDirectives: [CdkMenuItem, CdkMenuTrigger],
+                    host: {
+                        class: 'frame-dropdown-menu__item frame-dropdown-menu__sub-trigger',
+                        '[attr.data-inset]': 'inset() ? "" : null',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                }]
+        }], propDecorators: { menuContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "frDropdownMenuSubTrigger", 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 }] }] } });
+
+const FR_DROPDOWN_MENU_ALIGNMENTS = ['center', 'end', 'start'];
+const FR_DROPDOWN_MENU_SIDES = ['bottom', 'left', 'right', 'top'];
+const FR_DROPDOWN_MENU_TRIGGER_MODES = ['both', 'click', 'hover'];
+const FR_DROPDOWN_MENU_ITEM_VARIANTS = ['default', 'destructive'];
+
+class FrDropdownMenuModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuModule, imports: [FrDropdownMenu,
+            FrDropdownMenuCheckboxItem,
+            FrDropdownMenuContent,
+            FrDropdownMenuItem,
+            FrDropdownMenuItemIndicator,
+            FrDropdownMenuLabel,
+            FrDropdownMenuPanel,
+            FrDropdownMenuRadioGroup,
+            FrDropdownMenuRadioItem,
+            FrDropdownMenuSeparator,
+            FrDropdownMenuShortcut,
+            FrDropdownMenuSub,
+            FrDropdownMenuSubTrigger,
+            FrDropdownMenuTrigger], exports: [FrDropdownMenu,
+            FrDropdownMenuCheckboxItem,
+            FrDropdownMenuContent,
+            FrDropdownMenuItem,
+            FrDropdownMenuItemIndicator,
+            FrDropdownMenuLabel,
+            FrDropdownMenuPanel,
+            FrDropdownMenuRadioGroup,
+            FrDropdownMenuRadioItem,
+            FrDropdownMenuSeparator,
+            FrDropdownMenuShortcut,
+            FrDropdownMenuSub,
+            FrDropdownMenuSubTrigger,
+            FrDropdownMenuTrigger] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrDropdownMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FrDropdownMenu,
+                        FrDropdownMenuCheckboxItem,
+                        FrDropdownMenuContent,
+                        FrDropdownMenuItem,
+                        FrDropdownMenuItemIndicator,
+                        FrDropdownMenuLabel,
+                        FrDropdownMenuPanel,
+                        FrDropdownMenuRadioGroup,
+                        FrDropdownMenuRadioItem,
+                        FrDropdownMenuSeparator,
+                        FrDropdownMenuShortcut,
+                        FrDropdownMenuSub,
+                        FrDropdownMenuSubTrigger,
+                        FrDropdownMenuTrigger,
+                    ],
+                    exports: [
+                        FrDropdownMenu,
+                        FrDropdownMenuCheckboxItem,
+                        FrDropdownMenuContent,
+                        FrDropdownMenuItem,
+                        FrDropdownMenuItemIndicator,
+                        FrDropdownMenuLabel,
+                        FrDropdownMenuPanel,
+                        FrDropdownMenuRadioGroup,
+                        FrDropdownMenuRadioItem,
+                        FrDropdownMenuSeparator,
+                        FrDropdownMenuShortcut,
+                        FrDropdownMenuSub,
+                        FrDropdownMenuSubTrigger,
+                        FrDropdownMenuTrigger,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FR_DROPDOWN_MENU_ALIGNMENTS, FR_DROPDOWN_MENU_CONTENT, FR_DROPDOWN_MENU_ITEM_VARIANTS, FR_DROPDOWN_MENU_PARENT, FR_DROPDOWN_MENU_SIDES, FR_DROPDOWN_MENU_TRIGGER_MODES, FrDropdownMenu, FrDropdownMenuCheckboxItem, FrDropdownMenuContent, FrDropdownMenuItem, FrDropdownMenuItemIndicator, FrDropdownMenuLabel, FrDropdownMenuModule, FrDropdownMenuPanel, FrDropdownMenuRadioGroup, FrDropdownMenuRadioItem, FrDropdownMenuSeparator, FrDropdownMenuShortcut, FrDropdownMenuSub, FrDropdownMenuSubTrigger, FrDropdownMenuTree, FrDropdownMenuTrigger, buildConnectedPositions, defaultPositions };
+//# sourceMappingURL=frame-ui-ng-components-dropdown-menu.mjs.map