@radix-ng/primitives 1.0.0-beta.5 → 1.0.2

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

@@ -0,0 +1,599 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, signal, output, computed, effect, Directive, input, linkedSignal, afterNextRender, untracked, booleanAttribute, model, NgModule } from '@angular/core';
+import { ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END, createContext } from '@radix-ng/primitives/core';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
+
+const ACTIVE_COMPOSITE_ITEM = 'data-composite-item-active';
+const ARROW_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT]);
+const COMPOSITE_KEYS = new Set([...ARROW_KEYS, HOME, END]);
+const MODIFIER_KEYS = ['Shift', 'Control', 'Alt', 'Meta'];
+function sortByDocumentPosition(items) {
+    return [...items]
+        .filter((item) => item.element.isConnected)
+        .sort((a, b) => {
+        const position = a.element.compareDocumentPosition(b.element);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
+            return 1;
+        }
+        return 0;
+    });
+}
+function isModifierKeySet(event, allowedModifierKeys) {
+    return MODIFIER_KEYS.some((key) => !allowedModifierKeys.includes(key) && event.getModifierState(key));
+}
+function isNativeTextInput(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    return target.tagName === 'TEXTAREA' || target.tagName === 'INPUT';
+}
+function getCompositeNavigationKeys(orientation, dir) {
+    const horizontalForwardKey = dir === 'rtl' ? ARROW_LEFT : ARROW_RIGHT;
+    const horizontalBackwardKey = dir === 'rtl' ? ARROW_RIGHT : ARROW_LEFT;
+    return {
+        forwardKeys: orientation === 'horizontal'
+            ? [horizontalForwardKey]
+            : orientation === 'vertical'
+                ? [ARROW_DOWN]
+                : [horizontalForwardKey, ARROW_DOWN],
+        backwardKeys: orientation === 'horizontal'
+            ? [horizontalBackwardKey]
+            : orientation === 'vertical'
+                ? [ARROW_UP]
+                : [horizontalBackwardKey, ARROW_UP]
+    };
+}
+function shouldKeepNativeTextInputBehavior(event, target, orientation, dir) {
+    const { forwardKeys, backwardKeys } = getCompositeNavigationKeys(orientation, dir);
+    const selectionStart = target.selectionStart;
+    const selectionEnd = target.selectionEnd;
+    const value = target.value ?? '';
+    if (selectionStart == null || selectionEnd == null || event.shiftKey || selectionStart !== selectionEnd) {
+        return true;
+    }
+    if (!backwardKeys.includes(event.key) && selectionStart < value.length) {
+        return true;
+    }
+    if (!forwardKeys.includes(event.key) && selectionStart > 0) {
+        return true;
+    }
+    return false;
+}
+function isIndexOutOfListBounds(list, index) {
+    return index < 0 || index >= list.length;
+}
+function getMinListIndex(list, disabledIndices) {
+    return findNonDisabledListIndex(list, { startingIndex: -1, disabledIndices });
+}
+function getMaxListIndex(list, disabledIndices) {
+    return findNonDisabledListIndex(list, { startingIndex: list.length, decrement: true, disabledIndices });
+}
+function findNonDisabledListIndex(list, options = {}) {
+    const { startingIndex = -1, decrement = false, disabledIndices } = options;
+    const step = decrement ? -1 : 1;
+    for (let index = startingIndex + step; index >= 0 && index < list.length; index += step) {
+        if (!isListIndexDisabled(list, index, disabledIndices)) {
+            return index;
+        }
+    }
+    return -1;
+}
+function isListIndexDisabled(list, index, disabledIndices) {
+    if (disabledIndices?.includes(index)) {
+        return true;
+    }
+    const element = list[index];
+    if (!element) {
+        return false;
+    }
+    if (!isElementVisible(element)) {
+        return true;
+    }
+    return (disabledIndices === undefined &&
+        (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true'));
+}
+function isElementDisabled(element) {
+    return element === null || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+}
+function isElementVisible(element) {
+    if (!element || !element.isConnected) {
+        return false;
+    }
+    if (typeof Element !== 'undefined' && !(element instanceof Element)) {
+        return true;
+    }
+    let styles;
+    try {
+        styles = getComputedStyle(element);
+    }
+    catch {
+        return true;
+    }
+    return styles.visibility !== 'hidden' && styles.visibility !== 'collapse';
+}
+function scrollIntoViewIfNeeded(scrollContainer, element, direction, orientation) {
+    if (!scrollContainer || !element || typeof scrollContainer.scrollTo !== 'function') {
+        return;
+    }
+    const isOverflowingX = scrollContainer.clientWidth < scrollContainer.scrollWidth;
+    const isOverflowingY = scrollContainer.clientHeight < scrollContainer.scrollHeight;
+    let left = scrollContainer.scrollLeft;
+    let top = scrollContainer.scrollTop;
+    if (isOverflowingX && orientation !== 'vertical') {
+        const elementOffsetLeft = getOffset(scrollContainer, element, 'left');
+        const containerStyles = getScrollStyles(scrollContainer);
+        const elementStyles = getScrollStyles(element);
+        if (elementOffsetLeft - elementStyles.scrollMarginLeft <
+            scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft) {
+            left = elementOffsetLeft - elementStyles.scrollMarginLeft - containerStyles.scrollPaddingLeft;
+        }
+        else if (elementOffsetLeft + element.offsetWidth + elementStyles.scrollMarginRight >
+            scrollContainer.scrollLeft + scrollContainer.clientWidth - containerStyles.scrollPaddingRight) {
+            left =
+                elementOffsetLeft +
+                    element.offsetWidth +
+                    elementStyles.scrollMarginRight -
+                    scrollContainer.clientWidth +
+                    containerStyles.scrollPaddingRight;
+        }
+        if (direction === 'rtl') {
+            left = Math.max(left, 0);
+        }
+    }
+    if (isOverflowingY && orientation !== 'horizontal') {
+        const elementOffsetTop = getOffset(scrollContainer, element, 'top');
+        const containerStyles = getScrollStyles(scrollContainer);
+        const elementStyles = getScrollStyles(element);
+        if (elementOffsetTop - elementStyles.scrollMarginTop <
+            scrollContainer.scrollTop + containerStyles.scrollPaddingTop) {
+            top = elementOffsetTop - elementStyles.scrollMarginTop - containerStyles.scrollPaddingTop;
+        }
+        else if (elementOffsetTop + element.offsetHeight + elementStyles.scrollMarginBottom >
+            scrollContainer.scrollTop + scrollContainer.clientHeight - containerStyles.scrollPaddingBottom) {
+            top =
+                elementOffsetTop +
+                    element.offsetHeight +
+                    elementStyles.scrollMarginBottom -
+                    scrollContainer.clientHeight +
+                    containerStyles.scrollPaddingBottom;
+        }
+    }
+    scrollContainer.scrollTo({ left, top, behavior: 'auto' });
+}
+function getOffset(ancestor, element, side) {
+    const propName = side === 'left' ? 'offsetLeft' : 'offsetTop';
+    let result = 0;
+    let current = element;
+    while (current?.offsetParent) {
+        result += current[propName];
+        if (current.offsetParent === ancestor) {
+            break;
+        }
+        current = current.offsetParent;
+    }
+    return result;
+}
+function getScrollStyles(element) {
+    const styles = getComputedStyle(element);
+    return {
+        scrollMarginTop: parseFloat(styles.scrollMarginTop) || 0,
+        scrollMarginRight: parseFloat(styles.scrollMarginRight) || 0,
+        scrollMarginBottom: parseFloat(styles.scrollMarginBottom) || 0,
+        scrollMarginLeft: parseFloat(styles.scrollMarginLeft) || 0,
+        scrollPaddingTop: parseFloat(styles.scrollPaddingTop) || 0,
+        scrollPaddingRight: parseFloat(styles.scrollPaddingRight) || 0,
+        scrollPaddingBottom: parseFloat(styles.scrollPaddingBottom) || 0,
+        scrollPaddingLeft: parseFloat(styles.scrollPaddingLeft) || 0
+    };
+}
+
+const listContext = () => {
+    const list = inject(RdxCompositeList);
+    return {
+        listElement: list.elementRef.nativeElement,
+        items: list.items,
+        itemMap: list.itemMap,
+        registerItem: (item) => list.registerItem(item),
+        indexOf: (element) => list.indexOf(element)
+    };
+};
+const [injectRdxCompositeListContext, provideRdxCompositeListContext] = createContext('RdxCompositeListContext', 'utils/composite');
+/**
+ * Base UI-style composite list. Owns item registration and DOM-order metadata without applying
+ * roving tabindex or keyboard navigation.
+ */
+class RdxCompositeList {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.registeredItems = signal([], ...(ngDevMode ? [{ debugName: "registeredItems" }] : /* istanbul ignore next */ []));
+        /** Emits when the ordered item map changes. */
+        this.onMapChange = output();
+        /** Items registered with this list, sorted in DOM order. */
+        this.items = computed(() => sortByDocumentPosition(this.registeredItems()), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Ordered metadata keyed by item element. */
+        this.itemMap = computed(() => {
+            const map = new Map();
+            this.items().forEach((item, index) => {
+                map.set(item.element, { ...(item.metadata() ?? {}), index });
+            });
+            return map;
+        }, ...(ngDevMode ? [{ debugName: "itemMap" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.onMapChange.emit(this.itemMap());
+        });
+    }
+    registerItem(item) {
+        this.registeredItems.update((items) => [
+            ...items.filter((registered) => registered.element !== item.element),
+            item
+        ]);
+        return () => {
+            this.registeredItems.update((items) => items.filter((registered) => registered.element !== item.element));
+        };
+    }
+    indexOf(element) {
+        return this.items().findIndex((item) => item.element === element);
+    }
+    elements() {
+        return this.items().map((item) => item.element);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCompositeList, isStandalone: true, selector: "[rdxCompositeList]", outputs: { onMapChange: "onMapChange" }, providers: [provideRdxCompositeListContext(listContext)], exportAs: ["rdxCompositeList"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCompositeList]',
+                    exportAs: 'rdxCompositeList',
+                    providers: [provideRdxCompositeListContext(listContext)]
+                }]
+        }], ctorParameters: () => [], propDecorators: { onMapChange: [{ type: i0.Output, args: ["onMapChange"] }] } });
+
+/**
+ * Registers the host with the nearest composite list without changing focus behavior.
+ */
+class RdxCompositeListItem {
+    constructor() {
+        this.listContext = injectRdxCompositeListContext(true);
+        this.elementRef = inject(ElementRef);
+        this.hasRendered = signal(false, ...(ngDevMode ? [{ debugName: "hasRendered" }] : /* istanbul ignore next */ []));
+        /** Arbitrary metadata included in the list's ordered item map. */
+        this.metadataInput = input(undefined, { ...(ngDevMode ? { debugName: "metadataInput" } : /* istanbul ignore next */ {}), alias: 'metadata' });
+        this._metadata = linkedSignal(() => this.metadataInput(), ...(ngDevMode ? [{ debugName: "_metadata" }] : /* istanbul ignore next */ []));
+        this.index = computed(() => this.listContext?.indexOf(this.elementRef.nativeElement) ?? -1, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.inListElement = computed(() => {
+            const listContext = this.listContext;
+            return !!listContext && listContext.listElement.contains(this.elementRef.nativeElement);
+        }, ...(ngDevMode ? [{ debugName: "inListElement" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.hasRendered.set(true);
+        });
+        effect((onCleanup) => {
+            const listContext = this.listContext;
+            if (!listContext || !this.hasRendered() || !this.inListElement()) {
+                return;
+            }
+            const element = this.elementRef.nativeElement;
+            const unregister = untracked(() => listContext.registerItem({ element, metadata: this._metadata.asReadonly() }));
+            onCleanup(unregister);
+        });
+    }
+    setMetadata(value) {
+        this._metadata.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeListItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCompositeListItem, isStandalone: true, selector: "[rdxCompositeListItem]", inputs: { metadataInput: { classPropertyName: "metadataInput", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["rdxCompositeListItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeListItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCompositeListItem]',
+                    exportAs: 'rdxCompositeListItem'
+                }]
+        }], ctorParameters: () => [], propDecorators: { metadataInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }] } });
+
+const rootContext = () => {
+    const root = inject(RdxCompositeRoot);
+    return {
+        rootElement: root.elementRef.nativeElement,
+        highlightedIndex: root.highlightedIndex.asReadonly(),
+        highlightItemOnHover: root.highlightItemOnHover,
+        orientation: root.orientation,
+        dir: root.dir,
+        isIndexDisabled: (index) => root.isIndexDisabled(index),
+        setHighlightedIndex: (index, shouldScrollIntoView) => root.setHighlightedIndex(index, shouldScrollIntoView),
+        relayKeyboardEvent: (event) => root.relayKeyboardEvent(event)
+    };
+};
+const [injectRdxCompositeRootContext, provideRdxCompositeRootContext] = createContext('RdxCompositeRootContext', 'utils/composite');
+/**
+ * Internal Base UI-style composite root for roving index and arrow-key navigation.
+ */
+class RdxCompositeRoot {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.compositeList = inject(RdxCompositeList, { self: true });
+        this.hasSetInitialIndex = false;
+        /** The composite orientation. */
+        this.orientationInput = input('both', { ...(ngDevMode ? { debugName: "orientationInput" } : /* istanbul ignore next */ {}), alias: 'orientation' });
+        this._orientation = linkedSignal(() => this.orientationInput(), ...(ngDevMode ? [{ debugName: "_orientation" }] : /* istanbul ignore next */ []));
+        this.orientation = this._orientation.asReadonly();
+        /** Text direction for horizontal arrow-key navigation. */
+        this.dirInput = input(undefined, { ...(ngDevMode ? { debugName: "dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+        this.effectiveDir = injectDirection(this.dirInput);
+        this._dir = linkedSignal(() => this.effectiveDir(), ...(ngDevMode ? [{ debugName: "_dir" }] : /* istanbul ignore next */ []));
+        this.dir = this._dir.asReadonly();
+        /** Whether arrow-key navigation wraps at the first/last item. */
+        this.loopFocusInput = input(true, { ...(ngDevMode ? { debugName: "loopFocusInput" } : /* istanbul ignore next */ {}), alias: 'loopFocus',
+            transform: booleanAttribute });
+        this._loopFocus = linkedSignal(() => this.loopFocusInput(), ...(ngDevMode ? [{ debugName: "_loopFocus" }] : /* istanbul ignore next */ []));
+        this.loopFocus = this._loopFocus.asReadonly();
+        /** Enables Home and End keys. */
+        this.enableHomeAndEndKeysInput = input(false, { ...(ngDevMode ? { debugName: "enableHomeAndEndKeysInput" } : /* istanbul ignore next */ {}), alias: 'enableHomeAndEndKeys',
+            transform: booleanAttribute });
+        this._enableHomeAndEndKeys = linkedSignal(() => this.enableHomeAndEndKeysInput(), ...(ngDevMode ? [{ debugName: "_enableHomeAndEndKeys" }] : /* istanbul ignore next */ []));
+        this.enableHomeAndEndKeys = this._enableHomeAndEndKeys.asReadonly();
+        /** Indices that are skipped by keyboard navigation. */
+        this.disabledIndicesInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledIndicesInput" } : /* istanbul ignore next */ {}), alias: 'disabledIndices' });
+        this._disabledIndices = linkedSignal(() => this.disabledIndicesInput(), ...(ngDevMode ? [{ debugName: "_disabledIndices" }] : /* istanbul ignore next */ []));
+        this.disabledIndices = this._disabledIndices.asReadonly();
+        /** Modifier keys that should not block composite navigation. */
+        this.modifierKeysInput = input([], { ...(ngDevMode ? { debugName: "modifierKeysInput" } : /* istanbul ignore next */ {}), alias: 'modifierKeys' });
+        this._modifierKeys = linkedSignal(() => this.modifierKeysInput(), ...(ngDevMode ? [{ debugName: "_modifierKeys" }] : /* istanbul ignore next */ []));
+        this.modifierKeys = this._modifierKeys.asReadonly();
+        /** Whether hovering an item should focus it. */
+        this.highlightItemOnHover = input(false, { ...(ngDevMode ? { debugName: "highlightItemOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether handled navigation keys stop propagation. */
+        this.stopEventPropagation = input(true, { ...(ngDevMode ? { debugName: "stopEventPropagation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The currently highlighted item index. */
+        this.highlightedIndex = model(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+        /** Emits when this root changes the highlighted index. */
+        this.onHighlightedIndexChange = output();
+        /** Emits when the ordered item map changes. */
+        this.onMapChange = output();
+        this.items = this.compositeList.items;
+        this.itemMap = this.compositeList.itemMap;
+        effect(() => {
+            const items = this.items();
+            if (items.length === 0) {
+                return;
+            }
+            if (!this.hasSetInitialIndex) {
+                this.hasSetInitialIndex = true;
+                const activeIndex = items.findIndex((item) => item.element.hasAttribute(ACTIVE_COMPOSITE_ITEM));
+                if (activeIndex !== -1) {
+                    this.setHighlightedIndex(activeIndex, true);
+                    return;
+                }
+            }
+            if (this.isIndexDisabled(this.highlightedIndex())) {
+                const firstEnabledIndex = getMinListIndex(this.elements(), this.disabledIndices());
+                if (!isIndexOutOfListBounds(items, firstEnabledIndex)) {
+                    this.setHighlightedIndex(firstEnabledIndex);
+                }
+            }
+        });
+        effect(() => {
+            this.onMapChange.emit(this.itemMap());
+        });
+    }
+    indexOf(element) {
+        return this.compositeList.indexOf(element);
+    }
+    setOrientation(value) {
+        this._orientation.set(value);
+    }
+    setLoopFocus(value) {
+        this._loopFocus.set(value);
+    }
+    setDir(value) {
+        this._dir.set(value);
+    }
+    setEnableHomeAndEndKeys(value) {
+        this._enableHomeAndEndKeys.set(value);
+    }
+    setDisabledIndices(value) {
+        this._disabledIndices.set(value);
+    }
+    setModifierKeys(value) {
+        this._modifierKeys.set(value);
+    }
+    isIndexDisabled(index) {
+        return isListIndexDisabled(this.elements(), index, this.disabledIndices());
+    }
+    setHighlightedIndex(index, shouldScrollIntoView = false) {
+        if (this.highlightedIndex() !== index) {
+            this.highlightedIndex.set(index);
+            this.onHighlightedIndexChange.emit(index);
+        }
+        if (shouldScrollIntoView) {
+            scrollIntoViewIfNeeded(this.elementRef.nativeElement, this.elements()[index], this.dir(), this.orientation());
+        }
+    }
+    relayKeyboardEvent(event) {
+        this.handleCompositeKeydown(event, true);
+    }
+    handleKeydown(event) {
+        this.handleCompositeKeydown(event, false);
+    }
+    handleCompositeKeydown(event, relayed) {
+        const relevantKeys = this.enableHomeAndEndKeys() ? COMPOSITE_KEYS : ARROW_KEYS;
+        if (!relevantKeys.has(event.key) || isModifierKeySet(event, this.modifierKeys())) {
+            return;
+        }
+        const target = event.target;
+        const rootElement = this.elementRef.nativeElement;
+        if (!relayed && target instanceof HTMLElement) {
+            const closestRoot = target.closest('[rdxCompositeRoot]');
+            if (closestRoot && closestRoot !== rootElement) {
+                return;
+            }
+        }
+        if (isNativeTextInput(target) && !isElementDisabled(target)) {
+            try {
+                if (shouldKeepNativeTextInputBehavior(event, target, this.orientation(), this.dir())) {
+                    return;
+                }
+            }
+            catch {
+                return;
+            }
+        }
+        const elements = this.elements();
+        if (elements.length === 0) {
+            return;
+        }
+        const nextIndex = this.getNextIndex(event, elements);
+        if (nextIndex === this.highlightedIndex() || isIndexOutOfListBounds(elements, nextIndex)) {
+            return;
+        }
+        if (this.stopEventPropagation()) {
+            event.stopPropagation();
+        }
+        event.preventDefault();
+        this.setHighlightedIndex(nextIndex, true);
+        queueMicrotask(() => {
+            this.elements()[nextIndex]?.focus();
+        });
+    }
+    getNextIndex(event, elements) {
+        const highlightedIndex = this.highlightedIndex();
+        const minIndex = getMinListIndex(elements, this.disabledIndices());
+        const maxIndex = getMaxListIndex(elements, this.disabledIndices());
+        if (this.enableHomeAndEndKeys()) {
+            if (event.key === 'Home') {
+                return minIndex;
+            }
+            if (event.key === 'End') {
+                return maxIndex;
+            }
+        }
+        const { forwardKeys, backwardKeys } = getCompositeNavigationKeys(this.orientation(), this.dir());
+        const isForward = forwardKeys.includes(event.key);
+        const isBackward = backwardKeys.includes(event.key);
+        if (!isForward && !isBackward) {
+            return highlightedIndex;
+        }
+        const decrement = isBackward;
+        const boundaryIndex = decrement ? minIndex : maxIndex;
+        const loopIndex = decrement ? maxIndex : minIndex;
+        if (this.loopFocus() && highlightedIndex === boundaryIndex) {
+            return loopIndex;
+        }
+        return findNonDisabledListIndex(elements, {
+            startingIndex: highlightedIndex,
+            decrement,
+            disabledIndices: this.disabledIndices()
+        });
+    }
+    elements() {
+        return this.compositeList.elements();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxCompositeRoot, isStandalone: true, selector: "[rdxCompositeRoot]", inputs: { orientationInput: { classPropertyName: "orientationInput", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, dirInput: { classPropertyName: "dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loopFocusInput: { classPropertyName: "loopFocusInput", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, enableHomeAndEndKeysInput: { classPropertyName: "enableHomeAndEndKeysInput", publicName: "enableHomeAndEndKeys", isSignal: true, isRequired: false, transformFunction: null }, disabledIndicesInput: { classPropertyName: "disabledIndicesInput", publicName: "disabledIndices", isSignal: true, isRequired: false, transformFunction: null }, modifierKeysInput: { classPropertyName: "modifierKeysInput", publicName: "modifierKeys", isSignal: true, isRequired: false, transformFunction: null }, highlightItemOnHover: { classPropertyName: "highlightItemOnHover", publicName: "highlightItemOnHover", isSignal: true, isRequired: false, transformFunction: null }, stopEventPropagation: { classPropertyName: "stopEventPropagation", publicName: "stopEventPropagation", isSignal: true, isRequired: false, transformFunction: null }, highlightedIndex: { classPropertyName: "highlightedIndex", publicName: "highlightedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { highlightedIndex: "highlightedIndexChange", onHighlightedIndexChange: "onHighlightedIndexChange", onMapChange: "onMapChange" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, providers: [provideRdxCompositeRootContext(rootContext)], exportAs: ["rdxCompositeRoot"], hostDirectives: [{ directive: RdxCompositeList }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCompositeRoot]',
+                    exportAs: 'rdxCompositeRoot',
+                    hostDirectives: [RdxCompositeList],
+                    providers: [provideRdxCompositeRootContext(rootContext)],
+                    host: {
+                        '(keydown)': 'handleKeydown($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loopFocusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], enableHomeAndEndKeysInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHomeAndEndKeys", required: false }] }], disabledIndicesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledIndices", required: false }] }], modifierKeysInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifierKeys", required: false }] }], highlightItemOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightItemOnHover", required: false }] }], stopEventPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "stopEventPropagation", required: false }] }], highlightedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightedIndex", required: false }] }, { type: i0.Output, args: ["highlightedIndexChange"] }], onHighlightedIndexChange: [{ type: i0.Output, args: ["onHighlightedIndexChange"] }], onMapChange: [{ type: i0.Output, args: ["onMapChange"] }] } });
+
+/**
+ * Internal Base UI-style composite item. Registers itself with the nearest composite root and
+ * receives the roving `tabindex` from the root's highlighted index.
+ */
+class RdxCompositeItem {
+    constructor() {
+        this.rootContext = injectRdxCompositeRootContext(true);
+        this.listItem = inject(RdxCompositeListItem, { self: true });
+        this.elementRef = inject(ElementRef);
+        this.index = this.listItem.index;
+        this.inRootElement = computed(() => {
+            const rootContext = this.rootContext;
+            return !!rootContext && rootContext.rootElement.contains(this.elementRef.nativeElement);
+        }, ...(ngDevMode ? [{ debugName: "inRootElement" }] : /* istanbul ignore next */ []));
+        this.highlighted = computed(() => this.rootContext?.highlightedIndex() === this.index(), ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+        this.tabIndex = computed(() => {
+            const rootContext = this.rootContext;
+            if (!rootContext || !this.inRootElement()) {
+                return null;
+            }
+            const index = this.index();
+            return index !== -1 && rootContext.highlightedIndex() === index && !rootContext.isIndexDisabled(index) ? 0 : -1;
+        }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    }
+    setMetadata(value) {
+        this.listItem.setMetadata(value);
+    }
+    handleFocus() {
+        const index = this.index();
+        if (this.inRootElement() && index !== -1) {
+            this.rootContext?.setHighlightedIndex(index);
+        }
+    }
+    handleMouseMove() {
+        const rootContext = this.rootContext;
+        const index = this.index();
+        if (!this.inRootElement() ||
+            !rootContext ||
+            index === -1 ||
+            !rootContext.highlightItemOnHover() ||
+            this.highlighted()) {
+            return;
+        }
+        if (!rootContext.isIndexDisabled(index)) {
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxCompositeItem, isStandalone: true, selector: "[rdxCompositeItem]", host: { listeners: { "focus": "handleFocus()", "mousemove": "handleMouseMove()" }, properties: { "attr.tabindex": "tabIndex()" } }, exportAs: ["rdxCompositeItem"], hostDirectives: [{ directive: RdxCompositeListItem, inputs: ["metadata", "metadata"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCompositeItem]',
+                    exportAs: 'rdxCompositeItem',
+                    hostDirectives: [
+                        {
+                            directive: RdxCompositeListItem,
+                            inputs: ['metadata']
+                        }
+                    ],
+                    host: {
+                        '[attr.tabindex]': 'tabIndex()',
+                        '(focus)': 'handleFocus()',
+                        '(mousemove)': 'handleMouseMove()'
+                    }
+                }]
+        }] });
+
+const compositeImports = [RdxCompositeList, RdxCompositeListItem, RdxCompositeRoot, RdxCompositeItem];
+class RdxCompositeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeModule, imports: [RdxCompositeList, RdxCompositeListItem, RdxCompositeRoot, RdxCompositeItem], exports: [RdxCompositeList, RdxCompositeListItem, RdxCompositeRoot, RdxCompositeItem] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCompositeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...compositeImports],
+                    exports: [...compositeImports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ACTIVE_COMPOSITE_ITEM, ARROW_KEYS, COMPOSITE_KEYS, MODIFIER_KEYS, RdxCompositeItem, RdxCompositeList, RdxCompositeListItem, RdxCompositeModule, RdxCompositeRoot, compositeImports, findNonDisabledListIndex, getCompositeNavigationKeys, getMaxListIndex, getMinListIndex, injectRdxCompositeListContext, injectRdxCompositeRootContext, isElementDisabled, isElementVisible, isIndexOutOfListBounds, isListIndexDisabled, isModifierKeySet, isNativeTextInput, provideRdxCompositeListContext, provideRdxCompositeRootContext, scrollIntoViewIfNeeded, shouldKeepNativeTextInputBehavior, sortByDocumentPosition };
+//# sourceMappingURL=radix-ng-primitives-composite.mjs.map