@radix-ng/primitives 0.29.0 → 0.31.0

package/fesm2022/radix-ng-primitives-menu.mjs

@@ -1,46 +1,45 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, input, booleanAttribute, computed, effect, Output, NgModule } from '@angular/core';
+import { Directive, inject, input, booleanAttribute, computed, signal, effect, numberAttribute, untracked, SimpleChange, NgModule } from '@angular/core';
 import * as i1 from '@angular/cdk/menu';
-import { CdkMenu, CdkMenuGroup, CdkMenuItem } from '@angular/cdk/menu';
-import * as i1$1 from '@radix-ng/primitives/separator';
-import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
+import { CdkMenu, CdkMenuGroup, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 
 class RdxMenuContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxMenuContentDirective, isStandalone: true, selector: "[MenuContent]", hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxMenuContentDirective, isStandalone: true, selector: "[RdxMenuContent]", host: { attributes: { "role": "menu" }, properties: { "attr.aria-orientation": "\"vertical\"" } }, hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuContentDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[MenuContent]',
-                    standalone: true,
-                    hostDirectives: [CdkMenu]
+                    selector: '[RdxMenuContent]',
+                    hostDirectives: [CdkMenu],
+                    host: {
+                        role: 'menu',
+                        '[attr.aria-orientation]': '"vertical"'
+                    }
                 }]
         }] });
 
 class RdxMenuDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxMenuDirective, isStandalone: true, selector: "[Menu],[MenuSub]", hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxMenuDirective, isStandalone: true, selector: "[RdxMenuRoot],[RdxMenuSub]", hostDirectives: [{ directive: i1.CdkMenu }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[Menu],[MenuSub]',
-                    standalone: true,
-                    host: {},
+                    selector: '[RdxMenuRoot],[RdxMenuSub]',
                     hostDirectives: [CdkMenu]
                 }]
         }] });
 
 class RdxMenuGroupDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxMenuGroupDirective, isStandalone: true, selector: "[MenuGroup]", host: { attributes: { "role": "group" } }, hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxMenuGroupDirective, isStandalone: true, selector: "[RdxMenuGroup]", host: { attributes: { "role": "group" } }, hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuGroupDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[MenuGroup]',
-                    standalone: true,
+                    selector: '[RdxMenuGroup]',
                     hostDirectives: [CdkMenuGroup],
                     host: {
                         role: 'group'
@@ -48,70 +47,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
-// type radixProps = {
-//     disabled: boolean;
-//     onSelect: () => {};
-// };
+function isIndeterminate(checked) {
+    return checked === 'indeterminate';
+}
+function getCheckedState(checked) {
+    return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
+}
+
+class RdxMenuItemCheckboxDirective {
+    constructor() {
+        this.cdkMenuItemCheckbox = inject(CdkMenuItemCheckbox, { host: true });
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.checked = input(false);
+        this.onCheckedChange = outputFromObservable(this.cdkMenuItemCheckbox.triggered);
+        this.disabledState = computed(() => this.disabled);
+        this.highlightedState = computed(() => this.isFocused());
+        this.isFocused = signal(false);
+        this.isIndeterminate = isIndeterminate;
+        this.getCheckedState = getCheckedState;
+        effect(() => {
+            if (isIndeterminate(this.checked())) {
+                this.cdkMenuItemCheckbox.checked = true;
+            }
+            else {
+                this.cdkMenuItemCheckbox.checked = !this.checked();
+            }
+            this.cdkMenuItemCheckbox.disabled = this.disabled();
+        });
+    }
+    onFocus() {
+        if (!this.disabled()) {
+            this.isFocused.set(true);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+    }
+    onPointerMove(event) {
+        if (event.defaultPrevented)
+            return;
+        if (!(event.pointerType === 'mouse'))
+            return;
+        if (!this.disabled()) {
+            const item = event.currentTarget;
+            item?.focus({ preventScroll: true });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxMenuItemCheckboxDirective, isStandalone: true, selector: "[RdxMenuItemCheckbox]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCheckedChange: "onCheckedChange" }, host: { attributes: { "role": "menuitemcheckbox" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.aria-checked": "isIndeterminate(checked()) ? \"mixed\" : checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-highlighted": "highlightedState() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuItemCheckbox, outputs: ["cdkMenuItemTriggered", "menuItemTriggered"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[RdxMenuItemCheckbox]',
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItemCheckbox,
+                            outputs: ['cdkMenuItemTriggered: menuItemTriggered']
+                        }
+                    ],
+                    host: {
+                        role: 'menuitemcheckbox',
+                        '[attr.aria-checked]': 'isIndeterminate(checked()) ? "mixed" : checked()',
+                        '[attr.data-state]': 'getCheckedState(checked())',
+                        '[attr.data-highlighted]': "highlightedState() ? '' : undefined",
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(pointermove)': 'onPointerMove($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxMenuItemRadioDirective {
+    constructor() {
+        this.cdkMenuItemRadio = inject(CdkMenuItemRadio, { host: true });
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.checked = input(false, { transform: booleanAttribute });
+        this.onValueChange = outputFromObservable(this.cdkMenuItemRadio.triggered);
+        this.disabledState = computed(() => this.disabled());
+        this.highlightedState = computed(() => this.isFocused());
+        this.isFocused = signal(false);
+        this.getCheckedState = getCheckedState;
+        effect(() => {
+            this.cdkMenuItemRadio.checked = this.checked();
+            this.cdkMenuItemRadio.disabled = this.disabled();
+        });
+    }
+    onFocus() {
+        if (!this.disabled()) {
+            this.isFocused.set(true);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+    }
+    onPointerMove(event) {
+        if (event.defaultPrevented)
+            return;
+        if (!(event.pointerType === 'mouse'))
+            return;
+        if (!this.disabled()) {
+            const item = event.currentTarget;
+            item?.focus({ preventScroll: true });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxMenuItemRadioDirective, isStandalone: true, selector: "[RdxMenuItemRadio]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChange: "onValueChange" }, host: { attributes: { "role": "menuitemradio" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.aria-checked": "checked()", "attr.data-state": "getCheckedState(checked())", "attr.data-highlighted": "highlightedState() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuItemRadio, outputs: ["cdkMenuItemTriggered", "menuItemTriggered"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemRadioDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[RdxMenuItemRadio]',
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItemRadio,
+                            outputs: ['cdkMenuItemTriggered: menuItemTriggered']
+                        }
+                    ],
+                    host: {
+                        role: 'menuitemradio',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.data-state]': 'getCheckedState(checked())',
+                        '[attr.data-highlighted]': "highlightedState() ? '' : undefined",
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(pointermove)': 'onPointerMove($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxMenuItemIndicatorDirective {
+    constructor() {
+        this.menuItemRadio = inject(RdxMenuItemRadioDirective, { host: true, optional: true });
+        this.menuCheckboxItem = inject(RdxMenuItemCheckboxDirective, { host: true, optional: true });
+        this.getCheckedState = getCheckedState;
+    }
+    get isChecked() {
+        if (this.menuItemRadio) {
+            return this.menuItemRadio.checked();
+        }
+        if (this.menuCheckboxItem) {
+            return isIndeterminate(this.menuCheckboxItem.checked()) || this.menuCheckboxItem.checked() === true;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxMenuItemIndicatorDirective, isStandalone: true, selector: "[RdxMenuItemIndicator]", host: { properties: { "attr.data-state": "getCheckedState(isChecked)", "style.display": "isChecked ? \"\" : \"none\"" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[RdxMenuItemIndicator]',
+                    host: {
+                        '[attr.data-state]': 'getCheckedState(isChecked)',
+                        '[style.display]': 'isChecked ? "" : "none"'
+                    }
+                }]
+        }] });
+
 class RdxMenuItemDirective {
     constructor() {
         this.cdkMenuItem = inject(CdkMenuItem, { host: true });
-        // When true, prevents the user from interacting with the item.
-        this.disabled = input(false, {
-            transform: booleanAttribute,
-            alias: 'rdxDisabled'
-        });
+        this.disabled = input(false, { transform: booleanAttribute });
+        this.onSelect = outputFromObservable(this.cdkMenuItem.triggered);
+        this.isFocused = signal(false);
         this.disabledState = computed(() => this.disabled());
-        // Event handler called when the user selects an item (via mouse or keyboard).
-        this.onSelect = this.cdkMenuItem.triggered;
+        this.isOpenState = signal(false);
+        this.highlightedState = computed(() => this.isFocused());
         effect(() => {
             this.cdkMenuItem.disabled = this.disabled();
+            this.isOpenState.set(this.cdkMenuItem.isMenuOpen());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: RdxMenuItemDirective, isStandalone: true, selector: "[MenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "rdxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem", "type": "button", "tabindex": "0" }, properties: { "attr.data-orientation": "'horizontal'", "attr.data-disabled": "disabledState() ? '' : undefined", "disabled": "disabledState()" } }, hostDirectives: [{ directive: i1.CdkMenuItem }], ngImport: i0 }); }
+    onFocus() {
+        if (!this.disabled()) {
+            this.isFocused.set(true);
+        }
+    }
+    onBlur() {
+        this.isFocused.set(false);
+    }
+    onPointerMove(event) {
+        if (event.defaultPrevented)
+            return;
+        if (!(event.pointerType === 'mouse'))
+            return;
+        if (!this.disabled()) {
+            const item = event.currentTarget;
+            item?.focus({ preventScroll: true });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxMenuItemDirective, isStandalone: true, selector: "[RdxMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "focus": "onFocus()", "blur": "onBlur()", "pointermove": "onPointerMove($event)" }, properties: { "attr.data-orientation": "'horizontal'", "attr.data-state": "isOpenState()", "attr.aria-disabled": "disabledState() ? '' : undefined", "attr.data-disabled": "disabledState() ? '' : undefined", "attr.data-highlighted": "highlightedState() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuItem, outputs: ["cdkMenuItemTriggered", "menuItemTriggered"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[MenuItem]',
-                    standalone: true,
-                    hostDirectives: [CdkMenuItem],
+                    selector: '[RdxMenuItem]',
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItem,
+                            outputs: ['cdkMenuItemTriggered: menuItemTriggered']
+                        }
+                    ],
                     host: {
                         role: 'menuitem',
-                        type: 'button',
-                        tabindex: '0',
+                        tabindex: '-1',
                         '[attr.data-orientation]': "'horizontal'",
-                        //'[attr.data-highlighted]': "",
+                        '[attr.data-state]': 'isOpenState()',
+                        '[attr.aria-disabled]': "disabledState() ? '' : undefined",
                         '[attr.data-disabled]': "disabledState() ? '' : undefined",
-                        '[disabled]': 'disabledState()'
+                        '[attr.data-highlighted]': "highlightedState() ? '' : undefined",
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(pointermove)': 'onPointerMove($event)'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { onSelect: [{
-                type: Output
-            }] } });
+        }], ctorParameters: () => [] });
 
 class RdxMenuLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxMenuLabelDirective, isStandalone: true, selector: "div[MenuLabel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxMenuLabelDirective, isStandalone: true, selector: "[RdxMenuLabel]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[RdxMenuLabel]'
+                }]
+        }] });
+
+class RdxMenuRadioGroupDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxMenuRadioGroupDirective, isStandalone: true, selector: "[RdxMenuRadioGroup]", hostDirectives: [{ directive: i1.CdkMenuGroup }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuRadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'div[MenuLabel]',
-                    standalone: true
+                    selector: '[RdxMenuRadioGroup]',
+                    hostDirectives: [CdkMenuGroup]
                 }]
         }] });
 
 class RdxMenuSeparatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxMenuSeparatorDirective, isStandalone: true, selector: "[MenuSeparator]", host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "'horizontal'" } }, hostDirectives: [{ directive: i1$1.RdxSeparatorRootDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: RdxMenuSeparatorDirective, isStandalone: true, selector: "[RdxMenuSeparator]", host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "'horizontal'" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxMenuSeparatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[MenuSeparator]',
-                    standalone: true,
-                    hostDirectives: [RdxSeparatorRootDirective],
+                    selector: '[RdxMenuSeparator]',
                     host: {
                         role: 'separator',
                         '[attr.aria-orientation]': "'horizontal'"
@@ -119,30 +303,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
+class RdxMenuTriggerDirective {
+    computePositions() {
+        if (this.align() || this.sideOffset() || this.alignOffset() || this.side()) {
+            this.enablePositions = true;
+        }
+        const side = this.side() || 'bottom';
+        const align = this.align() || 'center';
+        const sideOffset = this.sideOffset() || 0;
+        const alignOffset = this.alignOffset() || 0;
+        let originX = 'center';
+        let originY = 'center';
+        let overlayX = 'center';
+        let overlayY = 'center';
+        let offsetX = 0;
+        let offsetY = 0;
+        switch (side) {
+            case 'top':
+                originY = 'top';
+                overlayY = 'bottom';
+                offsetY = -sideOffset;
+                break;
+            case 'bottom':
+                originY = 'bottom';
+                overlayY = 'top';
+                offsetY = sideOffset;
+                break;
+            case 'left':
+                originX = 'start';
+                overlayX = 'end';
+                offsetX = -sideOffset;
+                break;
+            case 'right':
+                originX = 'end';
+                overlayX = 'start';
+                offsetX = sideOffset;
+                break;
+        }
+        switch (align) {
+            case 'start':
+                if (side === 'top' || side === 'bottom') {
+                    originX = 'start';
+                    overlayX = 'start';
+                    offsetX = alignOffset;
+                }
+                else {
+                    originY = 'top';
+                    overlayY = 'top';
+                    offsetY = alignOffset;
+                }
+                break;
+            case 'end':
+                if (side === 'top' || side === 'bottom') {
+                    originX = 'end';
+                    overlayX = 'end';
+                    offsetX = -alignOffset;
+                }
+                else {
+                    originY = 'bottom';
+                    overlayY = 'bottom';
+                    offsetY = -alignOffset;
+                }
+                break;
+            case 'center':
+            default:
+                if (side === 'top' || side === 'bottom') {
+                    originX = 'center';
+                    overlayX = 'center';
+                }
+                else {
+                    originY = 'center';
+                    overlayY = 'center';
+                }
+                break;
+        }
+        return {
+            originX,
+            originY,
+            overlayX,
+            overlayY,
+            offsetX,
+            offsetY
+        };
+    }
+    constructor() {
+        this.cdkTrigger = inject(CdkMenuTrigger, { host: true });
+        this.menuTriggerFor = input.required();
+        /**
+         * @description The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+         */
+        this.side = input();
+        this.align = input();
+        /**
+         * @description The distance in pixels from the trigger.
+         */
+        this.sideOffset = input(NaN, {
+            transform: numberAttribute
+        });
+        /**
+         * @description An offset in pixels from the "start" or "end" alignment options.
+         */
+        this.alignOffset = input(NaN, {
+            transform: numberAttribute
+        });
+        this.disabled = input(false, {
+            transform: booleanAttribute
+        });
+        this.enablePositions = false;
+        // TODO
+        this.positions = computed(() => this.computePositions());
+        this.onMenuPositionEffect();
+    }
+    /** @ignore */
+    onPointerDown($event) {
+        // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+        // but not when the control key is pressed (avoiding MacOS right click)
+        if (!this.disabled() && $event.button === 0 && !$event.ctrlKey) {
+            /* empty */
+            if (!this.cdkTrigger.isOpen()) {
+                // prevent trigger focusing when opening
+                // this allows the content to be given focus without competition
+                $event.preventDefault();
+            }
+        }
+    }
+    onMenuPositionEffect() {
+        effect(() => {
+            const positions = this.positions();
+            untracked(() => {
+                if (this.enablePositions) {
+                    this.setMenuPositions([positions]);
+                }
+            });
+        });
+    }
+    setMenuPositions(positions) {
+        const prevMenuPosition = this.cdkTrigger.menuPosition;
+        this.cdkTrigger.menuPosition = positions;
+        this.fireNgOnChanges('menuPosition', this.cdkTrigger.menuPosition, prevMenuPosition);
+    }
+    fireNgOnChanges(input, currentValue, previousValue, firstChange = false) {
+        this.cdkTrigger.ngOnChanges({
+            [input]: new SimpleChange(previousValue, currentValue, firstChange)
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: RdxMenuTriggerDirective, isStandalone: true, selector: "[RdxMenuTrigger]", inputs: { menuTriggerFor: { classPropertyName: "menuTriggerFor", publicName: "menuTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "pointerdown": "onPointerDown($event)" }, properties: { "attr.aria-haspopup": "'menu'", "attr.aria-expanded": "cdkTrigger.isOpen()", "attr.data-state": "cdkTrigger.isOpen() ? 'open': 'closed'", "attr.data-disabled": "disabled() ? '' : undefined" } }, hostDirectives: [{ directive: i1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor", "cdkMenuPosition", "menuPosition"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[RdxMenuTrigger]',
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuTrigger,
+                            inputs: ['cdkMenuTriggerFor: menuTriggerFor', 'cdkMenuPosition: menuPosition']
+                        }
+                    ],
+                    host: {
+                        role: 'menuitem',
+                        '[attr.aria-haspopup]': "'menu'",
+                        '[attr.aria-expanded]': 'cdkTrigger.isOpen()',
+                        '[attr.data-state]': "cdkTrigger.isOpen() ? 'open': 'closed'",
+                        '[attr.data-disabled]': "disabled() ? '' : undefined",
+                        '(pointerdown)': 'onPointerDown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
 const menuImports = [
     RdxMenuDirective,
+    RdxMenuItemCheckboxDirective,
+    RdxMenuItemRadioDirective,
+    RdxMenuItemIndicatorDirective,
+    RdxMenuTriggerDirective,
     RdxMenuGroupDirective,
+    RdxMenuRadioGroupDirective,
     RdxMenuItemDirective,
     RdxMenuSeparatorDirective,
     RdxMenuContentDirective,
     RdxMenuLabelDirective
 ];
-class MenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MenuModule, imports: [RdxMenuDirective,
+class RdxMenuModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuModule, imports: [RdxMenuDirective,
+            RdxMenuItemCheckboxDirective,
+            RdxMenuItemRadioDirective,
+            RdxMenuItemIndicatorDirective,
+            RdxMenuTriggerDirective,
             RdxMenuGroupDirective,
+            RdxMenuRadioGroupDirective,
             RdxMenuItemDirective,
             RdxMenuSeparatorDirective,
             RdxMenuContentDirective,
             RdxMenuLabelDirective], exports: [RdxMenuDirective,
+            RdxMenuItemCheckboxDirective,
+            RdxMenuItemRadioDirective,
+            RdxMenuItemIndicatorDirective,
+            RdxMenuTriggerDirective,
             RdxMenuGroupDirective,
+            RdxMenuRadioGroupDirective,
             RdxMenuItemDirective,
             RdxMenuSeparatorDirective,
             RdxMenuContentDirective,
             RdxMenuLabelDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RdxMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...menuImports],
@@ -154,5 +521,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MenuModule, RdxMenuContentDirective, RdxMenuDirective, RdxMenuGroupDirective, RdxMenuItemDirective, RdxMenuLabelDirective, RdxMenuSeparatorDirective };
+export { RdxMenuContentDirective, RdxMenuDirective, RdxMenuGroupDirective, RdxMenuItemCheckboxDirective, RdxMenuItemDirective, RdxMenuItemIndicatorDirective, RdxMenuItemRadioDirective, RdxMenuLabelDirective, RdxMenuModule, RdxMenuRadioGroupDirective, RdxMenuSeparatorDirective, RdxMenuTriggerDirective };
 //# sourceMappingURL=radix-ng-primitives-menu.mjs.map