ng-primitives 0.110.2 → 0.111.1

package/fesm2022/ng-primitives-menu.mjs

@@ -1,11 +1,11 @@
 import { createOverlay, injectOverlay, coerceOffset, coerceFlip, coerceShift } from 'ng-primitives/portal';
 export { injectOverlayContext as injectMenuContext } from 'ng-primitives/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, ViewContainerRef, signal, computed, effect, input, booleanAttribute, Directive, numberAttribute } from '@angular/core';
+import { InjectionToken, inject, Injector, ViewContainerRef, signal, computed, effect, input, booleanAttribute, Directive, output, numberAttribute } from '@angular/core';
 import { ngpRovingFocusItem, provideRovingFocusItemState, ngpRovingFocusGroup, provideRovingFocusGroupState } from 'ng-primitives/roving-focus';
 import { ngpButton } from 'ng-primitives/button';
 import { injectElementRef } from 'ng-primitives/internal';
-import { createPrimitive, controlled, attrBinding, dataBinding, listener, deprecatedSetter, styleBinding } from 'ng-primitives/state';
+import { createPrimitive, controlled, attrBinding, dataBinding, listener, deprecatedSetter, styleBinding, emitter } from 'ng-primitives/state';
 import { Directionality } from '@angular/cdk/bidi';
 import { ngpFocusTrap, provideFocusTrapState } from 'ng-primitives/focus-trap';
 import { Subject } from 'rxjs';
@@ -694,13 +694,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerFlip", required: false }] }] } });
 
-const [NgpMenuItemStateToken, ngpMenuItem, injectMenuItemState, provideMenuItemState] = createPrimitive('NgpMenuItem', ({ disabled = signal(false) }) => {
+const [NgpMenuItemStateToken, ngpMenuItem, injectMenuItemState, provideMenuItemState] = createPrimitive('NgpMenuItem', ({ disabled = signal(false), closeOnSelect = signal(true), role = 'menuitem', }) => {
     const element = injectElementRef();
     const injector = inject(Injector);
     const parentMenu = injectMenuState({ optional: true });
     ngpButton({ disabled });
     // Host bindings
-    attrBinding(element, 'role', 'menuitem');
+    attrBinding(element, 'role', role);
     // Event listeners
     listener(element, 'click', onClick);
     listener(element, 'keydown', handleArrowKey);
@@ -711,7 +711,8 @@ const [NgpMenuItemStateToken, ngpMenuItem, injectMenuItemState, provideMenuItemS
         const trigger = injector.get(NgpSubmenuTrigger, null, { self: true, optional: true });
         const origin = event.detail === 0 ? 'keyboard' : 'mouse';
         // if this is a submenu trigger, we don't want to close the menu, we want to open the submenu
-        if (!trigger) {
+        // if closeOnSelect is false, we don't want to close the menu (e.g., checkbox/radio items)
+        if (!trigger && closeOnSelect()) {
             parentMenu()?.closeAllMenus(origin);
         }
     }
@@ -754,11 +755,17 @@ class NgpMenuItem {
                 alias: 'ngpMenuItemDisabled',
                 transform: booleanAttribute,
             }]));
-        ngpMenuItem({ disabled: this.disabled });
+        /** Whether the menu should close when this item is selected */
+        this.closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect", alias: 'ngpMenuItemCloseOnSelect',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpMenuItemCloseOnSelect',
+                transform: booleanAttribute,
+            }]));
+        ngpMenuItem({ disabled: this.disabled, closeOnSelect: this.closeOnSelect });
         ngpRovingFocusItem({ disabled: this.disabled });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpMenuItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMenuItemState(), provideRovingFocusItemState()], exportAs: ["ngpMenuItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpMenuItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "ngpMenuItemCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMenuItemState(), provideRovingFocusItemState()], exportAs: ["ngpMenuItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItem, decorators: [{
             type: Directive,
@@ -767,7 +774,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                     exportAs: 'ngpMenuItem',
                     providers: [provideMenuItemState(), provideRovingFocusItemState()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemDisabled", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemDisabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemCloseOnSelect", required: false }] }] } });
+
+const [NgpMenuItemCheckboxStateToken, ngpMenuItemCheckbox, injectMenuItemCheckboxState, provideMenuItemCheckboxState,] = createPrimitive('NgpMenuItemCheckbox', ({ checked: _checked = signal(false), disabled = signal(false), onCheckedChange, }) => {
+    const element = injectElementRef();
+    const checked = controlled(_checked);
+    const checkedChange = emitter();
+    // Use base menu item behavior but don't close on select
+    ngpMenuItem({ disabled, closeOnSelect: signal(false), role: 'menuitemcheckbox' });
+    // Host bindings
+    attrBinding(element, 'aria-checked', checked);
+    dataBinding(element, 'data-checked', checked);
+    // Toggle on click
+    listener(element, 'click', () => toggle());
+    function toggle() {
+        if (disabled()) {
+            return;
+        }
+        const nextChecked = !checked();
+        checked.set(nextChecked);
+        onCheckedChange?.(nextChecked);
+        checkedChange.emit(nextChecked);
+    }
+    return {
+        checked,
+        checkedChange: checkedChange.asObservable(),
+        toggle,
+    };
+});
+
+/**
+ * The `NgpMenuItemCheckbox` directive represents a menu item that can be toggled on and off.
+ */
+class NgpMenuItemCheckbox {
+    constructor() {
+        /** Whether the checkbox is checked */
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked", alias: 'ngpMenuItemCheckboxChecked',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpMenuItemCheckboxChecked',
+                transform: booleanAttribute,
+            }]));
+        /** Event emitted when the checked state changes */
+        this.checkedChange = output({
+            alias: 'ngpMenuItemCheckboxCheckedChange',
+        });
+        /** Whether the menu item checkbox is disabled */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpMenuItemCheckboxDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpMenuItemCheckboxDisabled',
+                transform: booleanAttribute,
+            }]));
+        ngpMenuItemCheckbox({
+            checked: this.checked,
+            disabled: this.disabled,
+            onCheckedChange: value => this.checkedChange.emit(value),
+        });
+        ngpRovingFocusItem({ disabled: this.disabled });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpMenuItemCheckbox, isStandalone: true, selector: "[ngpMenuItemCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "ngpMenuItemCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpMenuItemCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpMenuItemCheckboxCheckedChange" }, providers: [provideMenuItemCheckboxState(), provideRovingFocusItemState()], exportAs: ["ngpMenuItemCheckbox"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMenuItemCheckbox]',
+                    exportAs: 'ngpMenuItemCheckbox',
+                    providers: [provideMenuItemCheckboxState(), provideRovingFocusItemState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemCheckboxChecked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["ngpMenuItemCheckboxCheckedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemCheckboxDisabled", required: false }] }] } });
+
+const [NgpMenuItemRadioGroupStateToken, ngpMenuItemRadioGroup, injectMenuItemRadioGroupState, provideMenuItemRadioGroupState,] = createPrimitive('NgpMenuItemRadioGroup', ({ value: _value = signal(null), onValueChange, }) => {
+    const element = injectElementRef();
+    const value = controlled(_value);
+    const valueChange = emitter();
+    // Host bindings
+    attrBinding(element, 'role', 'group');
+    function select(newValue) {
+        if (value() === newValue) {
+            return;
+        }
+        value.set(newValue);
+        onValueChange?.(newValue);
+        valueChange.emit(newValue);
+    }
+    return {
+        value,
+        valueChange: valueChange.asObservable(),
+        select,
+    };
+});
+
+const [NgpMenuItemRadioStateToken, ngpMenuItemRadio, injectMenuItemRadioState, provideMenuItemRadioState,] = createPrimitive('NgpMenuItemRadio', ({ value, disabled = signal(false) }) => {
+    const element = injectElementRef();
+    const radioGroup = injectMenuItemRadioGroupState();
+    // Use base menu item behavior but don't close on select
+    ngpMenuItem({ disabled, closeOnSelect: signal(false), role: 'menuitemradio' });
+    // Computed checked state
+    const checked = computed(() => radioGroup()?.value() === value(), ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    // Host bindings
+    attrBinding(element, 'aria-checked', checked);
+    dataBinding(element, 'data-checked', checked);
+    // Select on click
+    listener(element, 'click', () => {
+        if (disabled()) {
+            return;
+        }
+        radioGroup()?.select(value());
+    });
+    return {
+        checked,
+    };
+});
+
+/**
+ * The `NgpMenuItemIndicator` directive renders inside a checkbox or radio menu item
+ * and exposes `data-checked` based on the parent item's checked state.
+ */
+class NgpMenuItemIndicator {
+    constructor() {
+        const element = injectElementRef();
+        const checkboxState = injectMenuItemCheckboxState({ optional: true });
+        const radioState = injectMenuItemRadioState({ optional: true });
+        const checked = computed(() => checkboxState()?.checked() ?? radioState()?.checked() ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        dataBinding(element, 'data-checked', checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpMenuItemIndicator, isStandalone: true, selector: "[ngpMenuItemIndicator]", exportAs: ["ngpMenuItemIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMenuItemIndicator]',
+                    exportAs: 'ngpMenuItemIndicator',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The `NgpMenuItemRadioGroup` directive represents a group of radio menu items.
+ */
+class NgpMenuItemRadioGroup {
+    constructor() {
+        /** The current value of the radio group */
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpMenuItemRadioGroupValue' }] : [{
+                alias: 'ngpMenuItemRadioGroupValue',
+            }]));
+        /** Event emitted when the value changes */
+        this.valueChange = output({
+            alias: 'ngpMenuItemRadioGroupValueChange',
+        });
+        ngpMenuItemRadioGroup({
+            value: this.value,
+            onValueChange: value => this.valueChange.emit(value),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpMenuItemRadioGroup, isStandalone: true, selector: "[ngpMenuItemRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "ngpMenuItemRadioGroupValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpMenuItemRadioGroupValueChange" }, providers: [provideMenuItemRadioGroupState()], exportAs: ["ngpMenuItemRadioGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMenuItemRadioGroup]',
+                    exportAs: 'ngpMenuItemRadioGroup',
+                    providers: [provideMenuItemRadioGroupState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemRadioGroupValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpMenuItemRadioGroupValueChange"] }] } });
+
+/**
+ * The `NgpMenuItemRadio` directive represents a radio menu item within a radio group.
+ */
+class NgpMenuItemRadio {
+    constructor() {
+        /** The value this radio item represents */
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value", alias: 'ngpMenuItemRadioValue' }] : [{
+                alias: 'ngpMenuItemRadioValue',
+            }]));
+        /** Whether the radio item is disabled */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpMenuItemRadioDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpMenuItemRadioDisabled',
+                transform: booleanAttribute,
+            }]));
+        ngpMenuItemRadio({ value: this.value, disabled: this.disabled });
+        ngpRovingFocusItem({ disabled: this.disabled });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemRadio, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpMenuItemRadio, isStandalone: true, selector: "[ngpMenuItemRadio]", inputs: { value: { classPropertyName: "value", publicName: "ngpMenuItemRadioValue", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpMenuItemRadioDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMenuItemRadioState(), provideRovingFocusItemState()], exportAs: ["ngpMenuItemRadio"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItemRadio, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpMenuItemRadio]',
+                    exportAs: 'ngpMenuItemRadio',
+                    providers: [provideMenuItemRadioState(), provideRovingFocusItemState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemRadioValue", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemRadioDisabled", required: false }] }] } });
 
 /**
  * The `NgpMenuTrigger` directive allows you to turn an element into a menu trigger.
@@ -986,5 +1186,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgpMenu, NgpMenuItem, NgpMenuTrigger, NgpSubmenuTrigger, injectMenuItemState, injectMenuState, injectMenuTriggerState, injectSubmenuTriggerState, provideMenuConfig, provideMenuItemState, provideMenuState, provideMenuTriggerState, provideSubmenuTriggerState };
+export { NgpMenu, NgpMenuItem, NgpMenuItemCheckbox, NgpMenuItemIndicator, NgpMenuItemRadio, NgpMenuItemRadioGroup, NgpMenuTrigger, NgpSubmenuTrigger, injectMenuItemCheckboxState, injectMenuItemRadioGroupState, injectMenuItemRadioState, injectMenuItemState, injectMenuState, injectMenuTriggerState, injectSubmenuTriggerState, provideMenuConfig, provideMenuItemCheckboxState, provideMenuItemRadioGroupState, provideMenuItemRadioState, provideMenuItemState, provideMenuState, provideMenuTriggerState, provideSubmenuTriggerState };
 //# sourceMappingURL=ng-primitives-menu.mjs.map