ng-primitives 0.90.0 → 0.91.0

package/fesm2022/ng-primitives-roving-focus.mjs

@@ -1,193 +1,92 @@
-import { Directionality } from '@angular/cdk/bidi';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, booleanAttribute, signal, Directive, ElementRef, computed, HostListener } from '@angular/core';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import { inject, signal, InjectionToken, input, booleanAttribute, Directive, computed } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+import { createPrimitive, injectInheritedState, controlled, attrBinding, listener, onDestroy } from 'ng-primitives/state';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { injectElementRef } from 'ng-primitives/internal';
+import { uniqueId } from 'ng-primitives/utils';
 
-/**
- * The state token  for the RovingFocusGroup primitive.
- */
-const NgpRovingFocusGroupStateToken = createStateToken('RovingFocusGroup');
-/**
- * Provides the RovingFocusGroup state.
- */
-const provideRovingFocusGroupState = createStateProvider(NgpRovingFocusGroupStateToken);
-/**
- * Injects the RovingFocusGroup state.
- */
-const injectRovingFocusGroupState = createStateInjector(NgpRovingFocusGroupStateToken);
-/**
- * The RovingFocusGroup state registration function.
- */
-const rovingFocusGroupState = createState(NgpRovingFocusGroupStateToken);
-
-const NgpRovingFocusGroupToken = new InjectionToken('NgpRovingFocusGroupToken');
-/**
- * Inject the RovingFocusGroup directive instance
- * @returns The RovingFocusGroup directive instance
- */
-function injectRovingFocusGroup() {
-    return inject(NgpRovingFocusGroupToken);
-}
-/**
- * Provide the RovingFocusGroup directive instance
- * @param type The RovingFocusGroup directive type
- * @returns The RovingFocusGroup token
- */
-function provideRovingFocusGroup(type, { inherit = true } = {}) {
-    return {
-        provide: NgpRovingFocusGroupToken,
-        // Roving focus groups may be nested, in this case, the parent group should be used
-        useFactory: () => {
-            if (!inherit) {
-                return inject(type, { self: true });
-            }
-            // If the parent group is not found, return the current group
-            // This is useful for nested groups
-            return (inject(NgpRovingFocusGroupToken, { skipSelf: true, optional: true }) ??
-                inject(type, { self: true }));
-        },
-    };
-}
-
-/**
- * Apply the `ngpRovingFocusGroup` directive to an element to manage focus for a group of child elements.
- */
-class NgpRovingFocusGroup {
-    constructor() {
-        /**
-         * Access the directionality service.
-         */
-        this.directionality = inject(Directionality);
-        /**
-         * Determine the orientation of the roving focus group.
-         * @default 'vertical'
-         */
-        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation", alias: 'ngpRovingFocusGroupOrientation' }] : [{
-                alias: 'ngpRovingFocusGroupOrientation',
-            }]));
-        /**
-         * Determine if focus should wrap when the end or beginning is reached.
-         */
-        this.wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap", alias: 'ngpRovingFocusGroupWrap',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpRovingFocusGroupWrap',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * Determine if the home and end keys should navigate to the first and last items.
-         */
-        this.homeEnd = input(true, ...(ngDevMode ? [{ debugName: "homeEnd", alias: 'ngpRovingFocusGroupHomeEnd',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpRovingFocusGroupHomeEnd',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * Determine if the roving focus group is disabled.
-         */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpRovingFocusGroupDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpRovingFocusGroupDisabled',
-                transform: booleanAttribute,
-            }]));
-        /**
-         * Store the items in the roving focus group.
-         */
-        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-        /**
-         * Store the active item in the roving focus group.
-         * @internal
-         */
-        this.activeItem = signal(null, ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
-        /**
-         * The state of the roving focus group.
-         */
-        this.state = rovingFocusGroupState(this);
+const [NgpRovingFocusGroupStateToken, ngpRovingFocusGroup, injectRovingFocusGroupState, provideRovingFocusGroupState,] = createPrimitive('NgpRovingFocusGroup', ({ orientation: _orientation = signal('vertical'), wrap = signal(false), homeEnd = signal(true), disabled = signal(false), inherit = true, }) => {
+    const parentGroup = inherit
+        ? injectInheritedState(() => NgpRovingFocusGroupStateToken)?.()
+        : null;
+    if (parentGroup) {
+        return parentGroup;
     }
+    const directionality = inject(Directionality);
+    const items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    const orientation = controlled(_orientation);
     /**
      * Get the items in the roving focus group sorted by order.
      */
-    get sortedItems() {
-        return this.items().sort((a, b) => {
+    function getSortedItems() {
+        return items().sort((a, b) => {
             // sort the items by their position in the document
-            return a.elementRef.nativeElement.compareDocumentPosition(b.elementRef.nativeElement) &
+            return a.element.nativeElement.compareDocumentPosition(b.element.nativeElement) &
                 Node.DOCUMENT_POSITION_FOLLOWING
                 ? -1
                 : 1;
         });
     }
     /**
-     * Register an item with the roving focus group.
-     * @param item The item to register
-     * @internal
+     * Store the active item in the roving focus group.
      */
-    register(item) {
-        this.items.update(items => [...items, item]);
-        // if there is no active item, make the first item the tabbable item
-        if (!this.activeItem()) {
-            this.activeItem.set(item);
-        }
-    }
-    /**
-     * Unregister an item with the roving focus group.
-     * @param item The item to unregister
-     * @internal
-     */
-    unregister(item) {
-        this.items.update(items => items.filter(i => i !== item));
-        // check if the unregistered item is the active item
-        if (this.activeItem() === item) {
-            // if the active item is unregistered, activate the first item
-            this.activeItem.set(this.items()[0] ?? null);
-        }
-    }
+    const activeItem = signal(null, ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
     /**
      * Activate an item in the roving focus group.
      * @param item The item to activate
      * @param origin The origin of the focus change
      */
-    setActiveItem(item, origin = 'program') {
-        this.activeItem.set(item);
-        item?.focus(origin);
+    function setActiveItem(id, origin = 'program') {
+        activeItem.set(id);
+        const item = items().find(i => i.id() === id) ?? null;
+        if (item) {
+            item.focus(origin);
+        }
     }
     /**
      * Activate the first item in the roving focus group.
      * @param origin The origin of the focus change
      */
-    activateFirstItem(origin) {
+    function activateFirstItem(origin) {
         // find the first item that is not disabled
-        const item = this.sortedItems.find(i => !i.disabled()) ?? null;
+        const item = getSortedItems().find(i => !i.disabled()) ?? null;
         // set the first item as the active item
-        this.setActiveItem(item, origin);
+        if (item) {
+            setActiveItem(item.id(), origin);
+        }
     }
     /**
      * Activate the last item in the roving focus group.
      * @param origin The origin of the focus change
      */
-    activateLastItem(origin) {
+    function activateLastItem(origin) {
         // find the last item that is not disabled
-        const item = [...this.sortedItems].reverse().find(i => !i.disabled()) ?? null;
+        const item = [...getSortedItems()].reverse().find(i => !i.disabled()) ?? null;
         // set the last item as the active item
-        this.setActiveItem(item, origin);
+        if (item) {
+            setActiveItem(item.id(), origin);
+        }
     }
     /**
      * Activate the next item in the roving focus group.
      * @param origin The origin of the focus change
      */
-    activateNextItem(origin) {
-        const activeItem = this.activeItem();
+    function activateNextItem(origin) {
+        const currentActiveItem = activeItem();
         // if there is no active item, activate the first item
-        if (!activeItem) {
-            this.activateFirstItem(origin);
+        if (!currentActiveItem) {
+            activateFirstItem(origin);
             return;
         }
         // find the index of the active item
-        const index = this.sortedItems.indexOf(activeItem);
+        const sortedItems = getSortedItems();
+        const index = sortedItems.findIndex(i => i.id() === currentActiveItem);
         // find the next item that is not disabled
-        const item = this.sortedItems.slice(index + 1).find(i => !i.disabled()) ?? null;
+        const item = sortedItems.slice(index + 1).find(i => !i.disabled()) ?? null;
         // if we are at the end of the list, wrap to the beginning
-        if (!item && this.state.wrap()) {
-            this.activateFirstItem(origin);
+        if (!item && wrap()) {
+            activateFirstItem(origin);
             return;
         }
         // if there is no next item, do nothing
@@ -195,29 +94,30 @@ class NgpRovingFocusGroup {
             return;
         }
         // set the next item as the active item
-        this.setActiveItem(item, origin);
+        setActiveItem(item.id(), origin);
     }
     /**
      * Activate the previous item in the roving focus group.
      * @param origin The origin of the focus change
      */
-    activatePreviousItem(origin) {
-        const activeItem = this.activeItem();
+    function activatePreviousItem(origin) {
+        const currentActiveItem = activeItem();
         // if there is no active item, activate the last item
-        if (!activeItem) {
-            this.activateLastItem(origin);
+        if (!currentActiveItem) {
+            activateLastItem(origin);
             return;
         }
         // find the index of the active item
-        const index = this.sortedItems.indexOf(activeItem);
+        const sortedItems = getSortedItems();
+        const index = sortedItems.findIndex(i => i.id() === currentActiveItem);
         // find the previous item that is not disabled
-        const item = this.sortedItems
+        const item = sortedItems
             .slice(0, index)
             .reverse()
             .find(i => !i.disabled()) ?? null;
         // if we are at the beginning of the list, wrap to the end
-        if (!item && this.state.wrap()) {
-            this.activateLastItem(origin);
+        if (!item && wrap()) {
+            activateLastItem(origin);
             return;
         }
         // if there is no previous item, do nothing
@@ -225,169 +125,292 @@ class NgpRovingFocusGroup {
             return;
         }
         // set the previous item as the active item
-        this.setActiveItem(item, origin);
+        setActiveItem(item.id(), origin);
     }
     /**
      * Handle keyboard navigation for the roving focus group.
      * @param event The keyboard event
-     * @internal
      */
-    onKeydown(event) {
-        if (this.state.disabled()) {
+    function onKeydown(event) {
+        if (disabled()) {
             return;
         }
         switch (event.key) {
             case 'ArrowUp':
-                if (this.state.orientation() === 'vertical') {
+                if (orientation() === 'vertical') {
                     event.preventDefault();
-                    this.activatePreviousItem('keyboard');
+                    activatePreviousItem('keyboard');
                 }
                 break;
             case 'ArrowDown':
-                if (this.state.orientation() === 'vertical') {
+                if (orientation() === 'vertical') {
                     event.preventDefault();
-                    this.activateNextItem('keyboard');
+                    activateNextItem('keyboard');
                 }
                 break;
             case 'ArrowLeft':
-                if (this.state.orientation() === 'horizontal') {
+                if (orientation() === 'horizontal') {
                     event.preventDefault();
-                    if (this.directionality.value === 'ltr') {
-                        this.activatePreviousItem('keyboard');
+                    if (directionality.value === 'ltr') {
+                        activatePreviousItem('keyboard');
                     }
                     else {
-                        this.activateNextItem('keyboard');
+                        activateNextItem('keyboard');
                     }
                 }
                 break;
             case 'ArrowRight':
-                if (this.state.orientation() === 'horizontal') {
+                if (orientation() === 'horizontal') {
                     event.preventDefault();
-                    if (this.directionality.value === 'ltr') {
-                        this.activateNextItem('keyboard');
+                    if (directionality.value === 'ltr') {
+                        activateNextItem('keyboard');
                     }
                     else {
-                        this.activatePreviousItem('keyboard');
+                        activatePreviousItem('keyboard');
                     }
                 }
                 break;
             case 'Home':
-                if (this.state.homeEnd()) {
+                if (homeEnd()) {
                     event.preventDefault();
-                    this.activateFirstItem('keyboard');
+                    activateFirstItem('keyboard');
                 }
                 break;
             case 'End':
-                if (this.state.homeEnd()) {
+                if (homeEnd()) {
                     event.preventDefault();
-                    this.activateLastItem('keyboard');
+                    activateLastItem('keyboard');
                 }
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRovingFocusGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpRovingFocusGroup, isStandalone: true, selector: "[ngpRovingFocusGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "ngpRovingFocusGroupOrientation", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "ngpRovingFocusGroupWrap", isSignal: true, isRequired: false, transformFunction: null }, homeEnd: { classPropertyName: "homeEnd", publicName: "ngpRovingFocusGroupHomeEnd", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpRovingFocusGroupDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRovingFocusGroup(NgpRovingFocusGroup), provideRovingFocusGroupState()], exportAs: ["ngpRovingFocusGroup"], ngImport: i0 }); }
+    function register(item) {
+        items.update(items => [...items, item]);
+        // if there is no active item, make the first item the tabbable item
+        if (!activeItem()) {
+            activeItem.set(item.id());
+        }
+    }
+    /**
+     * Unregister an item with the roving focus group.
+     * @param item The item to unregister
+     * @internal
+     */
+    function unregister(item) {
+        items.update(items => items.filter(i => i !== item));
+        // check if the unregistered item is the active item
+        if (activeItem() === item.id()) {
+            // if the active item is unregistered, activate the first item
+            activeItem.set(items()[0]?.id() ?? null);
+        }
+    }
+    /**
+     * Set the orientation of the roving focus group.
+     * @param value The orientation value
+     */
+    function setOrientation(value) {
+        orientation.set(value);
+    }
+    return {
+        orientation: orientation.asReadonly(),
+        setOrientation,
+        wrap,
+        homeEnd,
+        disabled,
+        activeItem,
+        setActiveItem,
+        onKeydown,
+        register,
+        unregister,
+    };
+});
+
+const NgpRovingFocusGroupToken = new InjectionToken('NgpRovingFocusGroupToken');
+/**
+ * Inject the RovingFocusGroup directive instance
+ * @returns The RovingFocusGroup directive instance
+ */
+function injectRovingFocusGroup() {
+    return inject(NgpRovingFocusGroupToken);
+}
+/**
+ * Provide the RovingFocusGroup directive instance
+ * @param type The RovingFocusGroup directive type
+ * @returns The RovingFocusGroup token
+ */
+function provideRovingFocusGroup(type, { inherit = true } = {}) {
+    return {
+        provide: NgpRovingFocusGroupToken,
+        // Roving focus groups may be nested, in this case, the parent group should be used
+        useFactory: () => {
+            if (!inherit) {
+                return inject(type, { self: true });
+            }
+            // If the parent group is not found, return the current group
+            // This is useful for nested groups
+            return (inject(NgpRovingFocusGroupToken, { skipSelf: true, optional: true }) ??
+                inject(type, { self: true }));
+        },
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRovingFocusGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngpRovingFocusGroup]',
-                    exportAs: 'ngpRovingFocusGroup',
-                    providers: [provideRovingFocusGroup(NgpRovingFocusGroup), provideRovingFocusGroupState()],
-                }]
-        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupOrientation", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupWrap", required: false }] }], homeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupHomeEnd", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupDisabled", required: false }] }] } });
 
 /**
- * Apply the `ngpRovingFocusItem` directive to an element within a roving focus group to automatically manage focus.
+ * Apply the `ngpRovingFocusGroup` directive to an element to manage focus for a group of child elements.
  */
-class NgpRovingFocusItem {
+class NgpRovingFocusGroup {
     constructor() {
         /**
-         * Access the group the roving focus item belongs to.
+         * Determine the orientation of the roving focus group.
+         * @default 'vertical'
          */
-        this.group = injectRovingFocusGroup();
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation", alias: 'ngpRovingFocusGroupOrientation' }] : [{
+                alias: 'ngpRovingFocusGroupOrientation',
+            }]));
         /**
-         * Access the focus monitor service.
+         * Determine if focus should wrap when the end or beginning is reached.
          */
-        this.focusMonitor = inject(FocusMonitor);
+        this.wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap", alias: 'ngpRovingFocusGroupWrap',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpRovingFocusGroupWrap',
+                transform: booleanAttribute,
+            }]));
         /**
-         * Access the element the roving focus item is attached to.
+         * Determine if the home and end keys should navigate to the first and last items.
          */
-        this.elementRef = inject(ElementRef);
+        this.homeEnd = input(true, ...(ngDevMode ? [{ debugName: "homeEnd", alias: 'ngpRovingFocusGroupHomeEnd',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpRovingFocusGroupHomeEnd',
+                transform: booleanAttribute,
+            }]));
         /**
-         * Define if the item is disabled.
+         * Determine if the roving focus group is disabled.
          */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpRovingFocusItemDisabled',
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpRovingFocusGroupDisabled',
                 transform: booleanAttribute }] : [{
-                alias: 'ngpRovingFocusItemDisabled',
+                alias: 'ngpRovingFocusGroupDisabled',
                 transform: booleanAttribute,
             }]));
         /**
-         * Derive the tabindex of the roving focus item.
+         * Store the active item in the roving focus group.
+         * @internal
          */
-        this.tabindex = computed(() => !this.group.disabled() && this.group.activeItem() === this ? 0 : -1, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
-    }
-    /**
-     * Initialize the roving focus item.
-     */
-    ngOnInit() {
-        this.group.register(this);
+        this.activeItem = signal(null, ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
+        /**
+         * The state of the roving focus group.
+         */
+        this.state = ngpRovingFocusGroup({
+            orientation: this.orientation,
+            wrap: this.wrap,
+            homeEnd: this.homeEnd,
+            disabled: this.disabled,
+        });
     }
     /**
-     * Clean up the roving focus item.
+     * Activate an item in the roving focus group.
+     * @param item The item to activate
+     * @param origin The origin of the focus change
      */
-    ngOnDestroy() {
-        this.group.unregister(this);
+    setActiveItem(item, origin = 'program') {
+        if (item) {
+            this.state.setActiveItem(item.id(), origin);
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRovingFocusGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpRovingFocusGroup, isStandalone: true, selector: "[ngpRovingFocusGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "ngpRovingFocusGroupOrientation", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "ngpRovingFocusGroupWrap", isSignal: true, isRequired: false, transformFunction: null }, homeEnd: { classPropertyName: "homeEnd", publicName: "ngpRovingFocusGroupHomeEnd", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpRovingFocusGroupDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            provideRovingFocusGroup(NgpRovingFocusGroup),
+            provideRovingFocusGroupState({ inherit: true }),
+        ], exportAs: ["ngpRovingFocusGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRovingFocusGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpRovingFocusGroup]',
+                    exportAs: 'ngpRovingFocusGroup',
+                    providers: [
+                        provideRovingFocusGroup(NgpRovingFocusGroup),
+                        provideRovingFocusGroupState({ inherit: true }),
+                    ],
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupOrientation", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupWrap", required: false }] }], homeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupHomeEnd", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusGroupDisabled", required: false }] }] } });
+
+const [NgpRovingFocusItemStateToken, ngpRovingFocusItem, injectRovingFocusItemState, provideRovingFocusItemState,] = createPrimitive('NgpRovingFocusItem', ({ disabled = signal(false) }) => {
+    const element = injectElementRef();
+    const group = injectRovingFocusGroupState();
+    const focusMonitor = inject(FocusMonitor);
+    // genertate a unique id for the roving focus item - this is not a DOM id but an internal identifier
+    const id = uniqueId('ngp-roving-focus-item');
     /**
-     * Forward the keydown event to the roving focus group.
-     * @param event The keyboard event
+     * Derive the tabindex of the roving focus item.
      */
-    onKeydown(event) {
-        if (this.disabled()) {
+    const tabindex = computed(() => !group()?.disabled() && group()?.activeItem() === id ? 0 : -1, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+    // Setup host attribute bindings
+    attrBinding(element, 'tabindex', () => tabindex().toString());
+    // Setup keyboard event listener
+    listener(element, 'keydown', (event) => {
+        if (disabled()) {
             return;
         }
-        this.group.onKeydown(event);
-    }
-    /**
-     * Activate the roving focus item on click.
-     */
-    activate() {
-        if (this.disabled()) {
+        group()?.onKeydown(event);
+    });
+    // Setup click event listener
+    listener(element, 'click', () => {
+        if (disabled()) {
             return;
         }
-        this.group.setActiveItem(this, 'mouse');
+        group()?.setActiveItem(id, 'mouse');
+    });
+    function focus(origin) {
+        focusMonitor.focusVia(element, origin);
     }
-    /**
-     * Focus the roving focus item.
-     * @param origin The origin of the focus
-     */
-    focus(origin) {
-        this.focusMonitor.focusVia(this.elementRef, origin);
+    const state = {
+        id: signal(id),
+        disabled,
+        tabindex,
+        focus,
+        element,
+    };
+    // Register the item when created
+    group()?.register(state);
+    // Unregister the item when destroyed
+    onDestroy(() => group()?.unregister(state));
+    return state;
+});
+
+/**
+ * Apply the `ngpRovingFocusItem` directive to an element within a roving focus group to automatically manage focus.
+ */
+class NgpRovingFocusItem {
+    constructor() {
+        /**
+         * Define if the item is disabled.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpRovingFocusItemDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpRovingFocusItemDisabled',
+                transform: booleanAttribute,
+            }]));
+        this.state = ngpRovingFocusItem({ disabled: this.disabled });
+        /**
+         * Expose the internal id of the roving focus item.
+         * @internal
+         */
+        this.id = computed(() => this.state.id(), ...(ngDevMode ? [{ debugName: "id" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRovingFocusItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpRovingFocusItem, isStandalone: true, selector: "[ngpRovingFocusItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpRovingFocusItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "click": "activate()" }, properties: { "attr.tabindex": "tabindex()" } }, exportAs: ["ngpRovingFocusItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpRovingFocusItem, isStandalone: true, selector: "[ngpRovingFocusItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpRovingFocusItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRovingFocusItemState()], exportAs: ["ngpRovingFocusItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpRovingFocusItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpRovingFocusItem]',
                     exportAs: 'ngpRovingFocusItem',
-                    host: {
-                        '[attr.tabindex]': 'tabindex()',
-                    },
+                    providers: [provideRovingFocusItemState()],
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusItemDisabled", required: false }] }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], activate: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpRovingFocusItemDisabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpRovingFocusGroup, NgpRovingFocusGroupToken, NgpRovingFocusItem, injectRovingFocusGroup, injectRovingFocusGroupState, provideRovingFocusGroup, provideRovingFocusGroupState };
+export { NgpRovingFocusGroup, NgpRovingFocusGroupStateToken, NgpRovingFocusGroupToken, NgpRovingFocusItem, NgpRovingFocusItemStateToken, injectRovingFocusGroup, injectRovingFocusGroupState, injectRovingFocusItemState, ngpRovingFocusGroup, ngpRovingFocusItem, provideRovingFocusGroup, provideRovingFocusGroupState, provideRovingFocusItemState };
 //# sourceMappingURL=ng-primitives-roving-focus.mjs.map