@agorapulse/ui-components 18.0.8 → 18.0.10

package/fesm2022/agorapulse-ui-components-nav-selector.mjs

@@ -0,0 +1,2198 @@
+import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
+import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
+import { SymbolComponent, withSymbols, apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apFolder, apArrowExpand, apArrowReduce, apSearch } from '@agorapulse/ui-symbol';
+import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, afterRender, Directive, signal, computed, effect, Injectable, ChangeDetectionStrategy, Component, viewChild, afterNextRender, model, contentChild, contentChildren, TemplateRef } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { EventPluginsModule } from '@tinkoff/ng-event-plugins';
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
+import { CounterComponent } from '@agorapulse/ui-components/counter';
+import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
+import { apMore } from '@agorapulse/ui-symbol/icons';
+import { MatMenu, MatMenuTrigger, MatMenuItem } from '@angular/material/menu';
+
+class TreeNodeAccessibilityDirective {
+    apTreeNodeAccessibility = input.required();
+    constructor(el, renderer) {
+        afterRender(() => {
+            const nativeEl = el.nativeElement;
+            const entry = this.apTreeNodeAccessibility();
+            renderer.setAttribute(nativeEl, 'aria-level', `${entry.accessibility.ariaLevel}`);
+            renderer.setAttribute(nativeEl, 'aria-setsize', `${entry.accessibility.ariaSetsize}`);
+            renderer.setAttribute(nativeEl, 'aria-posinset', `${entry.accessibility.ariaPosinset}`);
+            renderer.setAttribute(nativeEl, 'tabindex', `${entry.accessibility.tabIndex}`);
+            renderer.setAttribute(nativeEl, 'aria-label', `${entry.alias}`);
+            if ('folded' in entry) {
+                renderer.setAttribute(nativeEl, 'aria-expanded', `${entry.folded}`);
+            }
+            renderer.setAttribute(nativeEl, 'role', 'treeitem');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TreeNodeAccessibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.9", type: TreeNodeAccessibilityDirective, isStandalone: true, selector: "[apTreeNodeAccessibility]", inputs: { apTreeNodeAccessibility: { classPropertyName: "apTreeNodeAccessibility", publicName: "apTreeNodeAccessibility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TreeNodeAccessibilityDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[apTreeNodeAccessibility]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+const isNavSelectorEntryALeaf = (entry) => entry.type === 'LEAF';
+const isNavSelectorEntryAGroup = (entry) => entry.type === 'GROUP';
+const isNavSelectorEntryACategory = (entry) => entry.type === 'CATEGORY';
+const isInternalNavSelectorEntryALeaf = (entry) => entry.type === 'LEAF';
+const isInternalNavSelectorEntryANode = (entry) => `children` in entry;
+const isInternalNavSelectorEntryACategory = (entry) => entry.type === 'CATEGORY';
+const isInternalNavSelectorEntryAGroup = (entry) => entry.type === 'GROUP';
+const isInternalNavSelectorEntryALeafDetails = (entry) => entry.type === 'LEAF_DETAILS';
+
+/**
+ * NavSelectorAccessibility is a utility class that provides methods to manage the accessibility and the focusability of nav selector entries.
+ */
+class NavSelectorAccessibility {
+    /**
+     * Set tabIndex to 0 for the first focusable entry and -1 for all other entries
+     * @param entries nav selector entries
+     */
+    static resetFocus(entries) {
+        return entries.reduce((acc, entry) => {
+            if (!acc.length) {
+                return [{ ...entry, accessibility: { ...entry.accessibility, tabIndex: entry.focusable ? 0 : -1 } }];
+            }
+            if (acc.every(({ focusable }) => !focusable)) {
+                return [...acc, { ...entry, accessibility: { ...entry.accessibility, tabIndex: entry.focusable ? 0 : -1 } }];
+            }
+            return [...acc, entry];
+        }, []);
+    }
+    /**
+     * Focus the given entry and set tabIndex to 0 for the given uid and -1 for all other entries
+     * @param entries nav selector entries
+     * @param uid the uid of the entry to focus
+     */
+    static focus(entries, uid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryAGroup(entry) || isInternalNavSelectorEntryACategory(entry)) {
+                return {
+                    ...this.focusAnEntry(entry, uid),
+                    children: NavSelectorAccessibility.focus(entry.children, uid),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return {
+                    ...this.focusAnEntry(entry, uid),
+                    details: entry.details.map(detail => this.focusAnEntry(detail, uid)),
+                };
+            }
+            return this.focusAnEntry(entry, uid);
+        });
+    }
+    /**
+     * Unfocus the given entry and set tabIndex to -1 for the given uid and 0 for all other entries
+     * @param entries nav selector entries
+     * @param uid the uid of the entry to unfocus
+     */
+    static unfocus(entries, uid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryAGroup(entry) || isInternalNavSelectorEntryACategory(entry)) {
+                return {
+                    ...this.unfocusAnEntry(entry, uid),
+                    children: NavSelectorAccessibility.unfocus(entry.children, uid),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return {
+                    ...this.unfocusAnEntry(entry, uid),
+                    details: entry.details.map(detail => this.unfocusAnEntry(detail, uid)),
+                };
+            }
+            return this.unfocusAnEntry(entry, uid);
+        });
+    }
+    /**
+     * Focus the previous entry focusable and set tabIndex to 0 for the previous focusable entry and -1 for all other entries
+     *
+     * If not previous entries are focusable, entries will not be modified
+     *
+     * @param entries nav selector entries
+     */
+    static focusPrevious(entries) {
+        const flattenEntries = this.flatten(entries);
+        const idxFocusedId = flattenEntries.findIndex(({ accessibility }) => accessibility.tabIndex === 0);
+        if (idxFocusedId === 0 || this.previousEntryIsFirstAndNotFocusable(flattenEntries, idxFocusedId)) {
+            return entries;
+        }
+        const focusedEntry = flattenEntries[idxFocusedId];
+        focusedEntry.accessibility.tabIndex = -1;
+        for (let i = idxFocusedId - 1; i >= 0; i--) {
+            const entry = flattenEntries[i];
+            if (entry.focusable) {
+                entry.accessibility.tabIndex = 0;
+                break;
+            }
+        }
+        return this.unflatten(flattenEntries);
+    }
+    /**
+     * Focus the next entry focusable and set tabIndex to 0 for the next focusable entry and -1 for all other entries
+     *
+     * If not next entries are focusable, entries will not be modified
+     *
+     * @param entries nav selector entries
+     */
+    static focusNext(entries) {
+        const flattenEntries = this.flatten(entries);
+        const focusableFlattenEntries = flattenEntries.filter(entry => entry.focusable);
+        const idxFocusedId = focusableFlattenEntries.findIndex(({ accessibility }) => accessibility.tabIndex === 0);
+        if (focusableFlattenEntries.length - 1 <= idxFocusedId) {
+            return entries;
+        }
+        focusableFlattenEntries[idxFocusedId].accessibility.tabIndex = -1;
+        focusableFlattenEntries[idxFocusedId + 1].accessibility.tabIndex = 0;
+        return this.unflatten(flattenEntries);
+    }
+    static previousEntryIsFirstAndNotFocusable(flattenEntries, idxFocusedId) {
+        if (idxFocusedId - 1 === 0) {
+            const previous = flattenEntries[0];
+            return !previous.focusable;
+        }
+        return false;
+    }
+    static focusAnEntry(entry, uid) {
+        return { ...entry, accessibility: { ...entry.accessibility, tabIndex: entry.uid === uid ? 0 : -1 } };
+    }
+    static unfocusAnEntry(entry, uid) {
+        return { ...entry, accessibility: { ...entry.accessibility, tabIndex: entry.uid === uid ? -1 : entry.accessibility.tabIndex } };
+    }
+    /**
+     * Flatten the nav selector entries. It is easier to work with flat entries for the focus management as we need to know which is the previous or the next entry
+     * @param entries nav selector entries
+     */
+    static flatten(entries) {
+        return entries.flatMap(entry => {
+            if (isInternalNavSelectorEntryAGroup(entry) || isInternalNavSelectorEntryACategory(entry)) {
+                return [{ ...entry, children: [] }, ...this.flatten(entry.children)];
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return [{ ...entry, details: [] }, ...entry.details.map(detail => ({ ...detail }))];
+            }
+            return [{ ...entry }];
+        });
+    }
+    /**
+     * Unflatten the nav selector entries
+     * @param entries nav selector entries
+     */
+    static unflatten(entries) {
+        return entries.reduceRight((acc, entry) => {
+            if (!acc.length) {
+                return [entry];
+            }
+            if (entry.accessibility.ariaLevel < acc[0].accessibility.ariaLevel) {
+                if (isInternalNavSelectorEntryALeaf(entry)) {
+                    return [
+                        {
+                            ...entry,
+                            details: acc
+                                .filter(it => isInternalNavSelectorEntryALeafDetails(it))
+                                // Force destroying the reference to the original object else Angular will not detect the change
+                                .map(it => ({ ...it })),
+                        },
+                        ...acc.filter(it => !isInternalNavSelectorEntryALeafDetails(it)),
+                    ];
+                }
+                else if (isInternalNavSelectorEntryAGroup(entry) || isInternalNavSelectorEntryACategory(entry)) {
+                    return [
+                        {
+                            ...entry,
+                            children: acc.filter(({ accessibility }) => accessibility.ariaLevel > entry.accessibility.ariaLevel),
+                        },
+                        ...acc.filter(({ accessibility }) => accessibility.ariaLevel <= entry.accessibility.ariaLevel),
+                    ];
+                }
+            }
+            return [entry, ...acc];
+        }, []);
+    }
+}
+
+/**
+ * NavSelectorMultiSelect is a utility class that provides methods to select an entry in multiple mode.
+ */
+class NavSelectorMultiSelect {
+    /**
+     * Select an entry in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups and leaves are selectable.
+     *
+     * Groups may be in undetermined state if some of their children are selected and some are not.
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to select
+     */
+    static selectInMultipleMode(entries, entryUid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return this.selectALeafInMultipleMode(entry, entryUid);
+            }
+            else if (isInternalNavSelectorEntryAGroup(entry)) {
+                return this.selectAGroupInMultipleMode(entry, entryUid);
+            }
+            else if (isInternalNavSelectorEntryACategory(entry)) {
+                return this.selectACategoryInMultipleMode(entry, entryUid);
+            }
+            return entry;
+        });
+    }
+    /**
+     * Select only a leaf in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups may be in undetermined state if some of their children are selected and some are not.
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to select
+     */
+    static selectOnlyALeafInMultipleMode(entries, entryUid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return {
+                    ...entry,
+                    selected: entry.uid === entryUid,
+                };
+            }
+            else if (isInternalNavSelectorEntryACategory(entry)) {
+                return {
+                    ...entry,
+                    children: this.selectOnlyALeafInMultipleMode(entry.children, entryUid),
+                };
+            }
+            else if (isInternalNavSelectorEntryAGroup(entry)) {
+                const children = entry.children.flatMap(child => this.selectOnlyALeafInMultipleMode([child], entryUid));
+                const selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && !child.selectable));
+                return {
+                    ...entry,
+                    children,
+                    selected,
+                    undeterminedSelection: !selected && children.some(child => child.selected),
+                };
+            }
+            return entry;
+        });
+    }
+    /**
+     * Select all entries in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups and leaves are selectable.
+     * @param entries nav selector entries
+     */
+    static selectAll(entries) {
+        return this.selectChildren(entries);
+    }
+    /**
+     * Unselect all entries in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups and leaves are selectable.
+     * @param entries nav selector entries
+     */
+    static unselectAll(entries) {
+        return this.unselectChildren(entries);
+    }
+    static selectALeafInMultipleMode(leaf, entryUid) {
+        let selected = false;
+        if (leaf.selectable) {
+            selected = leaf.uid === entryUid ? !leaf.selected : leaf.selected;
+        }
+        return {
+            ...leaf,
+            selected,
+        };
+    }
+    static selectACategoryInMultipleMode(entry, entryUid) {
+        return {
+            ...entry,
+            children: entry.children.map(child => {
+                if (isInternalNavSelectorEntryALeaf(child)) {
+                    return this.selectALeafInMultipleMode(child, entryUid);
+                }
+                return this.selectAGroupInMultipleMode(child, entryUid);
+            }),
+        };
+    }
+    static selectAGroupInMultipleMode(entry, entryUid) {
+        if (!entry.selectable) {
+            return entry;
+        }
+        let selected;
+        let children;
+        let undeterminedSelection = false;
+        if (entry.uid === entryUid) {
+            selected = !entry.selected;
+            if (selected) {
+                children = this.selectLeafs(entry.children);
+            }
+            else {
+                children = this.unselectLeafs(entry.children);
+            }
+        }
+        else {
+            children = entry.children.map(child => this.toggleSelectLeaf(child, entryUid));
+            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && !child.selectable));
+            undeterminedSelection = !selected && children.some(child => child.selected);
+        }
+        return {
+            ...entry,
+            children,
+            selected,
+            undeterminedSelection,
+        };
+    }
+    static toggleSelectLeaf(leaf, uid) {
+        if (leaf.uid === uid) {
+            return {
+                ...leaf,
+                selected: !leaf.selected,
+            };
+        }
+        return leaf;
+    }
+    static selectLeafs(leafs) {
+        return leafs.map(leaf => ({
+            ...leaf,
+            selected: true,
+        }));
+    }
+    static unselectLeafs(leafs) {
+        return leafs.map(leaf => ({
+            ...leaf,
+            selected: false,
+        }));
+    }
+    static unselectChildren(entry) {
+        return entry.map(child => {
+            if (isInternalNavSelectorEntryALeaf(child)) {
+                return {
+                    ...child,
+                    selected: false,
+                };
+            }
+            else if (isInternalNavSelectorEntryACategory(child)) {
+                return {
+                    ...child,
+                    children: this.unselectChildren(child.children),
+                };
+            }
+            else if (isInternalNavSelectorEntryANode(child)) {
+                return {
+                    ...child,
+                    children: this.unselectChildren(child.children),
+                    selected: false,
+                };
+            }
+            return child;
+        });
+    }
+    static selectChildren(entry) {
+        return entry.map(child => {
+            if (isInternalNavSelectorEntryALeaf(child)) {
+                return {
+                    ...child,
+                    selected: child.selectable,
+                };
+            }
+            else if (isInternalNavSelectorEntryACategory(child)) {
+                return {
+                    ...child,
+                    children: this.selectChildren(child.children),
+                };
+            }
+            else if (isInternalNavSelectorEntryAGroup(child)) {
+                return {
+                    ...child,
+                    children: this.selectChildren(child.children),
+                    selected: true,
+                };
+            }
+            return child;
+        });
+    }
+}
+
+/**
+ * NavSelectorSingleSelect is a utility class that provides methods to select a single entry in a nav selector.
+ */
+class NavSelectorSingleSelect {
+    /**
+     * Selects a single entry in the nav selector.
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to select
+     */
+    static select(entries, entryUid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return this.selectALeaf(entry, entryUid);
+            }
+            else if (isInternalNavSelectorEntryANode(entry)) {
+                return {
+                    ...entry,
+                    children: entry.children.flatMap(child => this.select([child], entryUid)),
+                };
+            }
+            return entry;
+        });
+    }
+    static selectALeaf(leaf, entryUid) {
+        if (!!leaf.details.length) {
+            return this.selectALeafWithDetails(leaf, entryUid);
+        }
+        return this.selectALeafWithoutDetails(leaf, entryUid);
+    }
+    static selectALeafWithDetails(leaf, entryUid) {
+        if (leaf.uid === entryUid) {
+            const leafSelected = !leaf.detailsDisplayable && leaf.selectable;
+            return {
+                ...leaf,
+                selected: leafSelected,
+                accessibility: {
+                    ...leaf.accessibility,
+                    tabIndex: leafSelected ? 0 : -1,
+                },
+                folded: !leaf.detailsDisplayable,
+                details: leaf.details.reduce((details, detail, idx) => {
+                    const detailSelected = leaf.detailsDisplayable && !detail.displayError && (idx === 0 || !details[idx - 1].selected);
+                    details.push({
+                        ...detail,
+                        selected: detailSelected,
+                        accessibility: {
+                            ...detail.accessibility,
+                            tabIndex: detailSelected ? 0 : -1,
+                        },
+                    });
+                    return details;
+                }, []),
+            };
+        }
+        const details = leaf.details.map(detail => {
+            const detailSelected = detail.uid === entryUid && !detail.displayError;
+            return {
+                ...detail,
+                selected: detailSelected,
+                accessibility: {
+                    ...detail.accessibility,
+                    tabIndex: detailSelected ? 0 : -1,
+                },
+            };
+        });
+        return {
+            ...leaf,
+            accessibility: {
+                ...leaf.accessibility,
+                tabIndex: -1,
+            },
+            selected: false,
+            folded: !leaf.folded ? false : details.every(detail => !detail.selected),
+            details,
+        };
+    }
+    static selectALeafWithoutDetails(leaf, entryUid) {
+        const selected = leaf.selectable && leaf.uid === entryUid;
+        return {
+            ...leaf,
+            selected,
+            accessibility: {
+                ...leaf.accessibility,
+                tabIndex: selected ? 0 : -1,
+            },
+            folded: true,
+        };
+    }
+}
+
+const LeafLogics = {
+    DISABLED: 'DISABLED',
+    FEATURE_LOCKED: 'FEATURE_LOCKED',
+    TOKEN_INVALID: 'TOKEN_INVALID',
+    COUNTER: 'COUNTER',
+};
+/**
+ * NavSelectorBuilder is a utility class that builds the NavSelector entries for single and multiple select modes.
+ * It also checks the structure of the entries to ensure they are valid.
+ */
+class NavSelectorBuilder {
+    // /!\/!\ Order of logics is important /!\/!\
+    static LEAF_LOGICS_PRIORITY = {
+        [LeafLogics.DISABLED]: (leaf) => leaf.disableReason !== null,
+        [LeafLogics.FEATURE_LOCKED]: (leaf) => leaf.featureLocked,
+        [LeafLogics.TOKEN_INVALID]: (leaf) => leaf.tokenInvalid,
+        [LeafLogics.COUNTER]: (leaf) => leaf.counter !== null,
+    };
+    /**
+     * Builds the NavSelector entries for single select mode.
+     * @param entries nav selector entries
+     * @param selectedEntryUid selected entry uid
+     * @param detailsDisplayedLimit number of details displayed limit
+     */
+    static build(entries, selectedEntryUid, detailsDisplayedLimit) {
+        this.structureChecker(entries);
+        const builtEntries = this.buildEntries(entries, false, 1, detailsDisplayedLimit);
+        if (selectedEntryUid) {
+            return NavSelectorSingleSelect.select(builtEntries, selectedEntryUid);
+        }
+        return builtEntries;
+    }
+    /**
+     * Builds the NavSelector entries for multiple select mode.
+     * @param entries nav selector entries
+     * @param selectedEntryUids selected entry uids
+     * @param detailsDisplayedLimit number of details displayed limit
+     */
+    static buildInMultipleMode(entries, selectedEntryUids, detailsDisplayedLimit) {
+        this.structureChecker(entries, true);
+        let builtEntries = this.buildEntries(entries, true, 1, detailsDisplayedLimit);
+        if (selectedEntryUids) {
+            for (const selectedEntryUid of selectedEntryUids) {
+                builtEntries = NavSelectorMultiSelect.selectInMultipleMode(builtEntries, selectedEntryUid);
+            }
+        }
+        return builtEntries;
+    }
+    static structureChecker(entries, multipleModeEnabled = false) {
+        entries.forEach(entry => {
+            if (isNavSelectorEntryAGroup(entry) || isNavSelectorEntryACategory(entry)) {
+                this.structureChecker(entry.children, multipleModeEnabled);
+            }
+            else if (isNavSelectorEntryALeaf(entry)) {
+                if (entry.details.length && multipleModeEnabled) {
+                    console.error(`NavSelectorBuilder: Leaf ${entry.uid} with details is not allowed in multiple mode`);
+                }
+            }
+        });
+    }
+    static buildEntries(entries, multipleModeEnabled, level = 1, detailsDisplayedLimit) {
+        const newEntries = entries
+            .map((entry, idx) => this.buildEntry(entry, { multipleModeEnabled, level, idx, totalNumberOfEntry: entries.length, detailsDisplayedLimit }))
+            .filter(it => it !== null);
+        return NavSelectorAccessibility.resetFocus(newEntries);
+    }
+    static buildEntry(entry, { multipleModeEnabled, level, idx, totalNumberOfEntry, detailsDisplayedLimit, }) {
+        if (isNavSelectorEntryALeaf(entry)) {
+            return this.buildLeaf(entry, {
+                multipleModeEnabled,
+                level,
+                idx,
+                totalNumberOfLeaf: totalNumberOfEntry,
+                focusable: true,
+                detailsDisplayedLimit,
+            });
+        }
+        else if (isNavSelectorEntryACategory(entry)) {
+            return this.buildCategory(entry, {
+                multipleModeEnabled,
+                level,
+                idx,
+                totalNumberOfCategory: totalNumberOfEntry,
+                detailsDisplayedLimit,
+            });
+        }
+        else {
+            return this.buildGroup(entry, {
+                multipleModeEnabled,
+                level,
+                idx,
+                totalNumberOfGroups: totalNumberOfEntry,
+                focusable: true,
+                detailsDisplayedLimit,
+            });
+        }
+    }
+    static buildCategoryChildren(entry, { focusable, multipleModeEnabled, categoryLevel, detailsDisplayedLimit, }) {
+        return entry.children
+            .map((child, idx) => {
+            if (isNavSelectorEntryALeaf(child)) {
+                return this.buildLeaf(child, {
+                    focusable,
+                    multipleModeEnabled,
+                    level: categoryLevel + 1,
+                    idx,
+                    totalNumberOfLeaf: entry.children.length,
+                    detailsDisplayedLimit,
+                });
+            }
+            else {
+                return this.buildGroup(child, {
+                    focusable,
+                    multipleModeEnabled,
+                    level: categoryLevel + 1,
+                    idx,
+                    totalNumberOfGroups: entry.children.length,
+                    detailsDisplayedLimit,
+                });
+            }
+        })
+            .filter(it => it !== null);
+    }
+    static buildCategory(node, { multipleModeEnabled, level, idx, totalNumberOfCategory, detailsDisplayedLimit, }) {
+        const children = this.buildCategoryChildren(node, {
+            focusable: !node.folded,
+            multipleModeEnabled,
+            categoryLevel: level,
+            detailsDisplayedLimit,
+        });
+        return {
+            uid: node.uid,
+            alias: node.alias,
+            children,
+            hidden: false,
+            focusable: true,
+            accessibility: {
+                tabIndex: -1,
+                ariaLevel: level,
+                ariaPosinset: idx + 1,
+                ariaSetsize: totalNumberOfCategory,
+            },
+            folded: node.folded,
+            type: node.type,
+        };
+    }
+    static buildGroupChildren(entry, { multipleModeEnabled, groupLevel, focusable, detailsDisplayedLimit, }) {
+        return entry.children
+            .map((child, idx) => this.buildLeaf(child, {
+            multipleModeEnabled,
+            level: groupLevel + 1,
+            idx,
+            totalNumberOfLeaf: entry.children.length,
+            focusable: focusable && !entry.folded,
+            detailsDisplayedLimit,
+        }))
+            .filter(it => it !== null);
+    }
+    static buildGroup(node, { focusable, multipleModeEnabled, level, idx, totalNumberOfGroups, detailsDisplayedLimit, }) {
+        const children = this.buildGroupChildren(node, { multipleModeEnabled, groupLevel: level, focusable, detailsDisplayedLimit });
+        const displayTokenInvalid = children.some(({ displayTokenInvalid }) => displayTokenInvalid);
+        const selectedChildrenCount = children.filter(({ selected }) => selected).length;
+        return {
+            uid: node.uid,
+            alias: node.alias,
+            children,
+            childrenPictureUrlSample: children
+                .map((child, idx) => isInternalNavSelectorEntryALeaf(child) && idx < 4 ? { url: child.pictureUrl, initial: child.alias[0] } : null)
+                .filter(it => it !== null),
+            hidden: false,
+            accessibility: {
+                tabIndex: -1,
+                ariaPosinset: idx + 1,
+                ariaLevel: level,
+                ariaSetsize: totalNumberOfGroups,
+            },
+            focusable,
+            displayCounter: node.folded && children.some(child => isInternalNavSelectorEntryALeaf(child) && child.counter !== 0),
+            counter: children.reduce((acc, { counter }) => acc + counter, 0),
+            displayTokenInvalid,
+            selected: false,
+            selectable: multipleModeEnabled && children.some(({ selectable }) => selectable),
+            undeterminedSelection: selectedChildrenCount !== children.length && selectedChildrenCount > 0,
+            folded: node.folded,
+            type: node.type,
+        };
+    }
+    static buildLeaf(leaf, { focusable, multipleModeEnabled, level, idx, totalNumberOfLeaf, detailsDisplayedLimit, }) {
+        if (leaf.missingPermission) {
+            return null;
+        }
+        const detailsDisplayable = this.isLeafLogicValid(leaf, LeafLogics.COUNTER) && !!leaf.details.length;
+        const foldable = !!leaf.details.length && detailsDisplayable;
+        const folded = true;
+        const counter = (leaf.details.reduce((acc, detail) => acc + (detail.counter ?? 0), 0) || leaf.counter) ?? 0;
+        const counterDisplayable = counter !== 0 && this.isLeafLogicValid(leaf, LeafLogics.COUNTER);
+        const disabled = leaf.disableReason !== null;
+        const viewMoreDisplayable = leaf.details.length > detailsDisplayedLimit;
+        return {
+            uid: leaf.uid,
+            alias: leaf.alias,
+            pictureUrl: leaf.pictureUrl,
+            disabled,
+            disableReason: leaf.disableReason,
+            hidden: false,
+            focusable: focusable && !disabled,
+            accessibility: {
+                tabIndex: -1,
+                ariaPosinset: idx + 1,
+                ariaLevel: level,
+                ariaSetsize: totalNumberOfLeaf,
+            },
+            foldable,
+            folded,
+            displayCounter: folded && counterDisplayable,
+            counterDisplayable,
+            counter,
+            network: leaf.network,
+            displayTokenInvalid: leaf.tokenInvalid && this.isLeafLogicValid(leaf, LeafLogics.TOKEN_INVALID, LeafLogics.COUNTER),
+            displayFeatureLocked: leaf.featureLocked && this.isLeafLogicValid(leaf, LeafLogics.FEATURE_LOCKED, LeafLogics.TOKEN_INVALID, LeafLogics.COUNTER),
+            selected: false,
+            selectable: multipleModeEnabled
+                ? this.isLeafLogicValid(leaf, LeafLogics.COUNTER)
+                : this.isLeafLogicValid(leaf, LeafLogics.FEATURE_LOCKED, LeafLogics.TOKEN_INVALID, LeafLogics.COUNTER),
+            detailsDisplayable,
+            details: leaf.details.map(detail => this.buildLeafDetail(detail, level + 1, focusable && !folded)),
+            type: 'LEAF',
+            viewMoreDisplayable,
+            viewMoreDisplayed: viewMoreDisplayable,
+            viewMoreDetailsDisplayedLimit: detailsDisplayedLimit,
+        };
+    }
+    static buildLeafDetail(detail, level, focusable) {
+        return {
+            uid: detail.uid,
+            counter: detail.counter ?? 0,
+            displayCounter: detail.counter !== null,
+            alias: detail.name,
+            hidden: false,
+            accessibility: {
+                tabIndex: -1,
+                ariaPosinset: 1,
+                ariaLevel: level,
+                ariaSetsize: 1,
+            },
+            focusable,
+            selected: false,
+            errorReason: detail.errorReason,
+            displayError: detail.errorReason !== null,
+            type: 'LEAF_DETAILS',
+        };
+    }
+    static isLeafLogicValid(leaf, ...excludes) {
+        return Object.entries(this.LEAF_LOGICS_PRIORITY)
+            .filter(([key]) => !excludes.includes(key))
+            .every(([, logic]) => !logic(leaf));
+    }
+}
+
+const isInternalNavSelectorEntryALeafFocusable = (leaf, { parentFolded, minified }) => {
+    if (parentFolded) {
+        return false;
+    }
+    if (minified) {
+        return !leaf.disabled && !leaf.displayTokenInvalid && !leaf.displayFeatureLocked;
+    }
+    return !leaf.disabled;
+};
+
+/**
+ * NavSelectorFilter is a utility class that provides methods to filter entries
+ */
+class NavSelectorFilter {
+    /**
+     * Filters the entries based on the search string
+     *
+     * The search string is normalized and lowercase and trimmed.
+     *
+     * If a category matches the search string, all its children are unfolded, marked as focusable, and not hidden.
+     *
+     * If a group matches the search string, the group is unfolded and all its children are unfolded, marked as focusable, and not hidden.
+     *
+     * If a leaf matches the search string, it is marked as not hidden and focusable.
+     *
+     * Else the entry marked as hidden and not focusable.
+     *
+     * It also determines whenever counter and token invalid should be displayed on groups and leaves.
+     *
+     * @param entries The entries to filter.
+     * @param search The search string.
+     * @returns The filtered entries.
+     */
+    static filter(entries, search) {
+        const formattedSearch = this.cleanValue(search);
+        if (!formattedSearch) {
+            return entries;
+        }
+        return this.filterEntries(entries, formattedSearch);
+    }
+    static filterEntries(entries, formattedSearch) {
+        const newEntries = entries.map(entry => {
+            if (this.matches(entry.alias, formattedSearch)) {
+                return this.recursivelyUnfoldEntry(entry);
+            }
+            if (isInternalNavSelectorEntryANode(entry)) {
+                const children = this.filterEntries(entry.children, formattedSearch);
+                if (children.every(({ hidden }) => hidden)) {
+                    return {
+                        ...entry,
+                        children,
+                        hidden: true,
+                    };
+                }
+                return {
+                    ...entry,
+                    hidden: false,
+                    displayCounter: false,
+                    displayTokenInvalid: false,
+                    folded: false,
+                    children,
+                };
+            }
+            return {
+                ...entry,
+                focusable: false,
+                hidden: true,
+            };
+        });
+        return NavSelectorAccessibility.resetFocus(newEntries);
+    }
+    static recursivelyUnfoldEntry(entry) {
+        if (isInternalNavSelectorEntryAGroup(entry)) {
+            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child));
+            return {
+                ...entry,
+                folded: false,
+                children,
+                displayCounter: false,
+                displayTokenInvalid: false,
+            };
+        }
+        else if (isInternalNavSelectorEntryALeaf(entry)) {
+            return {
+                ...entry,
+                hidden: false,
+                focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded: false, minified: false }),
+                displayCounter: entry.counterDisplayable,
+            };
+        }
+        else if (isInternalNavSelectorEntryACategory(entry)) {
+            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child));
+            return {
+                ...entry,
+                folded: false,
+                hidden: false,
+                children,
+            };
+        }
+        return entry;
+    }
+    static matches(alias, formattedSearch) {
+        return this.cleanValue(alias).includes(formattedSearch);
+    }
+    static cleanValue(value) {
+        return value.trim().normalize('NFKC').toLowerCase();
+    }
+}
+
+/**
+ * Class to handle the folding and unfolding of nav selector entries.
+ */
+class NavSelectorFolding {
+    /**
+     * Toggle the folding state of an entry.
+     *
+     * @see {@link NavSelectorFolding.fold} and {@link NavSelectorFolding.unfold} for more information on folding and unfolding.
+     *
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to toggle
+     * @param minified true if the nav selector is minified. Needed for leaf as they are not foldable in minified mode
+     */
+    static toggleFolding(entries, entryUid, minified) {
+        return this.toggleEntryFolding(entries, entryUid, minified);
+    }
+    /**
+     * Fold an entry.
+     *
+     * Set unfocusable on all children of the folded entry.
+     * Compute whenever the counter and token invalid should be displayed on groups and leaves.
+     *
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to fold
+     * @param minified true if the nav selector is minified. Needed for leaf as they are not foldable in minified mode
+     */
+    static fold(entries, entryUid, minified) {
+        return this.foldEntry(entries, entryUid, minified);
+    }
+    /**
+     * Unfold an entry.
+     *
+     * Set focusable on all children of the folded entry.
+     * Compute whenever the counter and token invalid should be displayed on groups and leaves.
+     *
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to unfold
+     * @param minified true if the nav selector is minified. Needed for leaf as they are not foldable in minified mode
+     */
+    static unfold(entries, entryUid, minified) {
+        return this.unfoldEntry(entries, entryUid, minified);
+    }
+    static toggleEntryFolding(entries, entryUid, minified, parentFolded = false) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryACategory(entry)) {
+                if (entry.uid === entryUid) {
+                    const folded = !entry.folded;
+                    if (folded) {
+                        return this.foldCategory(entry, minified);
+                    }
+                    else {
+                        return this.unfoldCategory(entry, minified);
+                    }
+                }
+                return {
+                    ...entry,
+                    children: this.toggleEntryFolding(entry.children, entryUid, minified, entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryAGroup(entry)) {
+                if (entry.uid === entryUid) {
+                    const folded = !entry.folded;
+                    if (folded) {
+                        return this.foldGroup(entry, minified);
+                    }
+                    else {
+                        return this.unfoldGroup(entry, minified);
+                    }
+                }
+                return {
+                    ...entry,
+                    children: this.toggleEntryFolding(entry.children, entryUid, minified, parentFolded || entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === entryUid) {
+                    const folded = !entry.folded;
+                    if (folded) {
+                        return this.foldLeaf(entry, minified);
+                    }
+                    else {
+                        return this.unfoldLeaf(entry, minified);
+                    }
+                }
+                return {
+                    ...entry,
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { minified, parentFolded }),
+                };
+            }
+            return { ...entry, focusable: !parentFolded };
+        });
+    }
+    static foldEntry(entries, entryUid, minified, parentFolded = false) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryACategory(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.foldCategory(entry, minified);
+                }
+                return {
+                    ...entry,
+                    children: this.foldEntry(entry.children, entryUid, minified, entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryAGroup(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.foldGroup(entry, minified);
+                }
+                return {
+                    ...entry,
+                    focusable: !parentFolded,
+                    children: this.foldEntry(entry.children, entryUid, minified, parentFolded || entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.foldLeaf(entry, minified);
+                }
+                return {
+                    ...entry,
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { minified, parentFolded }),
+                };
+            }
+            return { ...entry, focusable: !parentFolded };
+        });
+    }
+    static unfoldEntry(entries, entryUid, minified, parentFolded = false) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryACategory(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.unfoldCategory(entry, minified);
+                }
+                return {
+                    ...entry,
+                    children: this.unfoldEntry(entry.children, entryUid, minified, entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryAGroup(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.unfoldGroup(entry, minified);
+                }
+                return {
+                    ...entry,
+                    children: this.unfoldEntry(entry.children, entryUid, minified, parentFolded || entry.folded),
+                    focusable: !parentFolded,
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.unfoldLeaf(entry, minified);
+                }
+                return {
+                    ...entry,
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { minified, parentFolded }),
+                };
+            }
+            return { ...entry, focusable: !parentFolded };
+        });
+    }
+    static foldCategory(category, minified) {
+        return {
+            ...category,
+            folded: true,
+            children: this.foldEntry(category.children, category.uid, minified, true),
+        };
+    }
+    static unfoldCategory(category, minified) {
+        return {
+            ...category,
+            folded: false,
+            children: this.unfoldEntry(category.children, category.uid, minified, false),
+        };
+    }
+    static foldGroup(group, minified) {
+        return {
+            ...group,
+            folded: true,
+            children: this.foldEntry(group.children, group.uid, minified, true),
+            displayCounter: !!group.counter,
+            displayTokenInvalid: group.children.some(({ displayTokenInvalid }) => displayTokenInvalid),
+        };
+    }
+    static unfoldGroup(group, minified) {
+        return {
+            ...group,
+            folded: false,
+            children: this.unfoldEntry(group.children, group.uid, minified, false),
+            displayCounter: false,
+            displayTokenInvalid: false,
+        };
+    }
+    static foldLeaf(leaf, minified) {
+        if (!leaf.foldable || minified) {
+            return leaf;
+        }
+        return {
+            ...leaf,
+            displayCounter: true,
+            folded: true,
+            details: leaf.details.map(detail => ({ ...detail, focusable: false })),
+        };
+    }
+    static unfoldLeaf(leaf, minified) {
+        if (!leaf.foldable || minified) {
+            return leaf;
+        }
+        return {
+            ...leaf,
+            displayCounter: false,
+            folded: false,
+            details: leaf.details.map((detail, idx) => ({
+                ...detail,
+                focusable: idx < leaf.viewMoreDetailsDisplayedLimit,
+            })),
+        };
+    }
+}
+
+/**
+ * NavSelectorMinifying is a utility class that provides methods to apply rules on entries when minifying or expanded nav selector.
+ */
+class NavSelectorMinifying {
+    /**
+     * When minifying the nav selector, compute the focusable state of the entries.
+     *
+     * Leaf are not focusable in any error state when minified.
+     * Detail are not focusable when minified.
+     *
+     * @param entries The entries to minify.
+     * @returns The modified entries.
+     */
+    static minify(entries) {
+        return this.compute(entries, true);
+    }
+    /**
+     * When expanding the nav selector, compute the focusable state of the entries.
+     *
+     * Leaf are not focusable in disabled state when expanded.
+     * Detail are focusable when expanded.
+     *
+     * @param entries The entries to minify.
+     * @returns The modified entries.
+     */
+    static expand(entries) {
+        return this.compute(entries, false);
+    }
+    static compute(entries, minified, parent = null) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryALeafDetails(entry)) {
+                return { ...entry, focusable: !minified };
+            }
+            if (isInternalNavSelectorEntryANode(entry)) {
+                return {
+                    ...entry,
+                    children: this.compute(entry.children, minified, entry),
+                };
+            }
+            return {
+                ...entry,
+                focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded: parent?.folded === true, minified: minified }),
+                details: this.compute(entry.details, minified),
+            };
+        });
+    }
+}
+
+/**
+ * Utility class to handle the view more functionality on leaves
+ */
+class NavSelectorViewMore {
+    /**
+     * Change the view more details displayed limit on leaves
+     * @param entries nav selector entries
+     * @param limit the number of details we want to display by default
+     */
+    static changeViewMoreDetailsDisplayedLimit(entries, limit) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryANode(entry)) {
+                return {
+                    ...entry,
+                    children: this.changeViewMoreDetailsDisplayedLimit(entry.children, limit),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                const viewMoreDisplayable = entry.details.length > limit;
+                return {
+                    ...entry,
+                    viewMoreDisplayed: viewMoreDisplayable,
+                    viewMoreDisplayable,
+                    viewMoreDetailsDisplayedLimit: limit,
+                    details: entry.details.map((detail, idx) => ({
+                        ...detail,
+                        focusable: entry.focusable && !entry.folded && idx < limit,
+                    })),
+                };
+            }
+            return entry;
+        });
+    }
+    /**
+     * We want to display all details of the leaf
+     *
+     * set viewMoreDisplayed to false and set all details as focusable
+     *
+     * @param entries nav selector entries
+     * @param leafUid the uid of the leaf we want to view all details
+     */
+    static viewMore(entries, leafUid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryANode(entry)) {
+                return {
+                    ...entry,
+                    children: this.viewMore(entry.children, leafUid),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === leafUid) {
+                    return {
+                        ...entry,
+                        viewMoreDisplayed: false,
+                        details: entry.details.map(detail => ({
+                            ...detail,
+                            focusable: true,
+                        })),
+                    };
+                }
+            }
+            return entry;
+        });
+    }
+    /**
+     * We want to display only the number of details of the leaf corresponding to the viewMoreDetailsDisplayedLimit
+     *
+     * set viewMoreDisplayed to true and set only the details with an index lower than the limit as focusable
+     *
+     * @param entries nav selector entries
+     * @param uid the uid of the leaf we want to view all details
+     */
+    static viewLess(entries, uid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryANode(entry)) {
+                return {
+                    ...entry,
+                    children: this.viewLess(entry.children, uid),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === uid) {
+                    return {
+                        ...entry,
+                        viewMoreDisplayed: true,
+                        details: entry.details.map((detail, idx) => ({
+                            ...detail,
+                            focusable: idx < entry.viewMoreDetailsDisplayedLimit,
+                        })),
+                    };
+                }
+            }
+            return entry;
+        });
+    }
+}
+
+/**
+ * NavSelectorState is a service that manages the state of the nav selector.
+ *
+ * It should be provided by the component to ensure that if many nav selectors are used in the same page, they don't share the same state.
+ */
+class NavSelectorState {
+    entries = signal([]);
+    multipleModeEnabled = signal(false);
+    _texts = signal({
+        title: '',
+        only: '',
+        tokenInvalid: '',
+        featureLocked: '',
+        searchPlaceholder: '',
+        noResults: '',
+        viewMore: '',
+        viewLess: '',
+    });
+    lastSelectedUids = signal([]);
+    isMultipleModeEnabled = this.multipleModeEnabled;
+    search = signal('');
+    filteredEntries = computed(() => NavSelectorFilter.filter(this.entries(), this.search()));
+    noResults = computed(() => this.filteredEntries().every(({ hidden }) => hidden));
+    texts = this._texts.asReadonly();
+    leafActionProjection = signal(undefined);
+    expanded = signal(true);
+    expandedAfterDelay = signal(true);
+    selectedUidsChangeCallback = null;
+    constructor() {
+        effect(() => {
+            const newSelectedUids = this.collectSelectedUids(this.entries());
+            if (this.selectedUidsChangeCallback) {
+                this.selectedUidsChangeCallback(newSelectedUids);
+            }
+        }, { allowSignalWrites: true });
+    }
+    updateMultiModeEnabled(enabled) {
+        this.multipleModeEnabled.set(enabled);
+    }
+    updateEntries(entries, initialSelectedEntryUids, detailsDisplayedLimit) {
+        if (this.multipleModeEnabled()) {
+            this.entries.set(NavSelectorBuilder.buildInMultipleMode(entries, initialSelectedEntryUids, detailsDisplayedLimit));
+        }
+        else {
+            this.entries.set(NavSelectorBuilder.build(entries, initialSelectedEntryUids?.[0] ?? null, detailsDisplayedLimit));
+        }
+    }
+    onGroupToggleFolding(group) {
+        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, group.uid, !this.expanded()));
+    }
+    onNodeSelect(node) {
+        this.entries.update(entries => NavSelectorMultiSelect.selectInMultipleMode(entries, node.uid));
+    }
+    onLeafClicked(leaf) {
+        if (!leaf.selectable) {
+            return;
+        }
+        if (this.multipleModeEnabled()) {
+            this.entries.update(entries => NavSelectorMultiSelect.selectInMultipleMode(entries, leaf.uid));
+        }
+        else {
+            this.entries.update(entries => NavSelectorSingleSelect.select(entries, leaf.uid));
+        }
+    }
+    onLeafToggleFolding(leaf) {
+        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, leaf.uid, !this.expanded()));
+    }
+    onLeafDetailClicked(leafDetail) {
+        this.entries.update(entries => NavSelectorSingleSelect.select(entries, leafDetail.uid));
+    }
+    updateTexts(texts) {
+        this._texts.set(texts);
+    }
+    selectOnlyLeaf(leaf) {
+        this.entries.update(entries => NavSelectorMultiSelect.selectOnlyALeafInMultipleMode(entries, leaf.uid));
+    }
+    toggleExpanded() {
+        this.expanded.update(expanded => !expanded);
+        this.entries.update(entries => {
+            if (this.expanded()) {
+                return NavSelectorMinifying.expand(entries);
+            }
+            return NavSelectorMinifying.minify(entries);
+        });
+        if (!this.expanded()) {
+            setTimeout(() => this.expandedAfterDelay.set(this.expanded()), 150);
+        }
+        else {
+            this.expandedAfterDelay.set(this.expanded());
+        }
+    }
+    onSelectionChange(uids) {
+        // Avoid infinite loop if you put unexisting uids as select will generate the same entries but with different reference
+        if (JSON.stringify(uids) === JSON.stringify(this.lastSelectedUids())) {
+            return;
+        }
+        this.lastSelectedUids.set(uids);
+        const selectedUids = this.collectSelectedUids(this.entries());
+        const uidToSelect = uids.filter(uid => selectedUids.every(selectedUid => selectedUid !== uid));
+        const uidToUnselect = selectedUids.filter(uid => uids.every(selectedUid => selectedUid !== uid));
+        if (!uidToSelect.length && !uidToUnselect.length) {
+            return;
+        }
+        let entries = this.entries();
+        if (this.multipleModeEnabled()) {
+            for (const uid of [...uidToSelect, ...uidToUnselect]) {
+                entries = NavSelectorMultiSelect.selectInMultipleMode(entries, uid);
+            }
+        }
+        else {
+            entries = NavSelectorSingleSelect.select(entries, uids[0]);
+        }
+        this.entries.set(entries);
+    }
+    registerOnSelectedUidsChange(callback) {
+        this.selectedUidsChangeCallback = callback;
+    }
+    onArrowDown() {
+        this.entries.update(entries => NavSelectorAccessibility.focusNext(entries));
+    }
+    onArrowUp() {
+        this.entries.update(entries => NavSelectorAccessibility.focusPrevious(entries));
+    }
+    collectSelectedUids(entries) {
+        return entries.flatMap(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.details.length) {
+                    return entry.details.flatMap(detail => (detail.selected ? [detail.uid] : []));
+                }
+                return entry.selected ? [entry.uid] : [];
+            }
+            else if (isInternalNavSelectorEntryANode(entry)) {
+                return this.collectSelectedUids(entry.children);
+            }
+            return [];
+        });
+    }
+    updateLeafAction(leafActionProjection) {
+        this.leafActionProjection.set(leafActionProjection);
+    }
+    fold(entry) {
+        this.entries.update(entries => NavSelectorFolding.fold(entries, entry.uid, !this.expanded()));
+    }
+    unfold(entry) {
+        this.entries.update(entries => NavSelectorFolding.unfold(entries, entry.uid, !this.expanded()));
+    }
+    updateDetailsDisplayedLimit(detailsDisplayedLimit) {
+        this.entries.update(entries => NavSelectorViewMore.changeViewMoreDetailsDisplayedLimit(entries, detailsDisplayedLimit));
+    }
+    viewMore(leaf) {
+        this.entries.update(entries => NavSelectorViewMore.viewMore(entries, leaf.uid));
+    }
+    viewLess(leaf) {
+        this.entries.update(entries => NavSelectorViewMore.viewLess(entries, leaf.uid));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorState });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorState, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class NavSelectorLeafDetailPresenter {
+    navSelectorState;
+    constructor(navSelectorState) {
+        this.navSelectorState = navSelectorState;
+    }
+    onLeafDetailClicked(detail) {
+        this.navSelectorState.onLeafDetailClicked(detail);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: NavSelectorState }] });
+
+class NavSelectorLeafDetailComponent {
+    navSelectorLeafDetailPresenter;
+    detail = input.required();
+    embedded = input(false);
+    constructor(navSelectorLeafDetailPresenter) {
+        this.navSelectorLeafDetailPresenter = navSelectorLeafDetailPresenter;
+    }
+    onClick($event) {
+        $event.stopImmediatePropagation();
+        this.navSelectorLeafDetailPresenter.onLeafDetailClicked(this.detail());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, deps: [{ token: NavSelectorLeafDetailPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailComponent, isStandalone: true, selector: "ap-nav-selector-leaf-detail", inputs: { detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class.selected": "detail().selected && !embedded()", "class.embedded": "embedded()" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">\n    {{ detail().alias }}\n</span>\n\n@if (detail().displayCounter) {\n    <ap-counter\n        color=\"orange\"\n        size=\"normal\"\n        [background]=\"false\">\n        {{ detail().counter }}\n    </ap-counter>\n}\n@if (detail().displayError) {\n    <ap-symbol\n        size=\"sm\"\n        symbolId=\"error_fill\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1}:host.embedded{padding:0}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected:focus{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-leaf-detail', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CounterComponent, SymbolComponent], providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], host: {
+                        '(click)': 'onClick($event)',
+                        '[class.selected]': 'detail().selected && !embedded()',
+                        '[class.embedded]': 'embedded()',
+                        '(keydown.enter)': 'onClick($event)',
+                        '(keydown.space)': 'onClick($event)',
+                    }, hostDirectives: [
+                        {
+                            directive: TreeNodeAccessibilityDirective,
+                            // Alias the input of the directive to detail the input detail will be used in the directive and in the component as well
+                            inputs: ['apTreeNodeAccessibility: detail'],
+                        },
+                    ], template: "<span class=\"caption\">\n    {{ detail().alias }}\n</span>\n\n@if (detail().displayCounter) {\n    <ap-counter\n        color=\"orange\"\n        size=\"normal\"\n        [background]=\"false\">\n        {{ detail().counter }}\n    </ap-counter>\n}\n@if (detail().displayError) {\n    <ap-symbol\n        size=\"sm\"\n        symbolId=\"error_fill\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1}:host.embedded{padding:0}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected:focus{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}\n"] }]
+        }], ctorParameters: () => [{ type: NavSelectorLeafDetailPresenter }] });
+
+class NavSelectorLeafDetailsPresenter {
+    navSelectorState;
+    viewMoreText = computed(() => this.navSelectorState.texts().viewMore);
+    viewLessText = computed(() => this.navSelectorState.texts().viewLess);
+    constructor(navSelectorState) {
+        this.navSelectorState = navSelectorState;
+    }
+    toggleViewMore(leaf) {
+        if (leaf.viewMoreDisplayed) {
+            this.viewMore(leaf);
+        }
+        else {
+            this.viewLess(leaf);
+        }
+    }
+    viewMore(leaf) {
+        this.navSelectorState.viewMore(leaf);
+    }
+    viewLess(leaf) {
+        this.navSelectorState.viewLess(leaf);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsPresenter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsPresenter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: NavSelectorState }] });
+
+class NavSelectorLeafDetailsComponent {
+    el;
+    navSelectorLeafDetailsPresenter;
+    leaf = input.required();
+    details = input.required();
+    firstDetails = computed(() => this.details().slice(0, this.leaf().viewMoreDetailsDisplayedLimit));
+    lastDetails = computed(() => this.details().slice(this.leaf().viewMoreDetailsDisplayedLimit));
+    viewMoreDelay = signal(false);
+    animationState = computed(() => (this.leaf().viewMoreDisplayable && this.leaf().viewMoreDisplayed ? 'collapsed' : 'expanded'));
+    /**
+     * The height when details are all displayed
+     */
+    maxHeight = signal('0px');
+    constructor(el, navSelectorLeafDetailsPresenter) {
+        this.el = el;
+        this.navSelectorLeafDetailsPresenter = navSelectorLeafDetailsPresenter;
+        effect(() => {
+            if (this.leaf().viewMoreDisplayed) {
+                setTimeout(() => this.viewMoreDelay.set(false), 150);
+            }
+            else {
+                this.viewMoreDelay.set(true);
+            }
+        }, { allowSignalWrites: true });
+    }
+    ngAfterViewInit() {
+        // scrollHeight = leaf + first details displayed when there is a limit
+        const height = this.el.nativeElement.scrollHeight;
+        // cross multiplication to determine height of remaining details
+        this.maxHeight.set(`${(height * this.lastDetails().length) / this.firstDetails().length}px`);
+    }
+    toggleViewMore() {
+        this.navSelectorLeafDetailsPresenter.toggleViewMore(this.leaf());
+    }
+    onSpaceOrEnter(event) {
+        event.stopImmediatePropagation();
+        this.toggleViewMore();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafDetailsPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailsComponent, isStandalone: true, selector: "ap-nav-selector-leaf-details", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null }, details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-expanded": "!leaf().viewMoreDisplayable || leaf().viewMoreDisplayed" } }, providers: [NavSelectorLeafDetailsPresenter], ngImport: i0, template: "@for (detail of firstDetails(); track detail.uid) {\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n    </div>\n}\n\n@if (leaf().viewMoreDisplayable) {\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (viewMoreDelay()) {\n            @for (detail of lastDetails(); track detail.uid) {\n                <div class=\"detail\">\n                    <div class=\"separator\">\n                        <div class=\"rectangle\"></div>\n                    </div>\n                    <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n                </div>\n            }\n        }\n    </div>\n\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <a\n            tabindex=\"0\"\n            role=\"button\"\n            class=\"standalone view-more\"\n            (keydown.space)=\"onSpaceOrEnter($event)\"\n            (keydown.enter)=\"onSpaceOrEnter($event)\"\n            (click)=\"toggleViewMore()\">\n            @if (leaf().viewMoreDisplayed) {\n                {{ navSelectorLeafDetailsPresenter.viewMoreText() }}\n            } @else {\n                {{ navSelectorLeafDetailsPresenter.viewLessText() }}\n            }\n        </a>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}:host .detail{display:flex;align-self:stretch}:host .separator{display:flex;padding:0 11px 0 20px;align-items:center;align-self:stretch}:host .rectangle{width:1px;align-self:stretch;background:var(--ref-color-grey-10)}:host .view-more{display:flex;padding:8px;align-items:center;align-self:stretch}:host .details-container{display:flex;flex-direction:column;align-self:stretch}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }], animations: [
+            /**
+             * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+             */
+            trigger('accordion', [
+                state('collapsed', style({
+                    maxHeight: '0',
+                    overflow: 'hidden',
+                })),
+                state('expanded', style({
+                    maxHeight: 'initial',
+                })),
+                transition('collapsed => expanded', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' })),
+                ]),
+                transition('expanded => collapsed', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-leaf-details', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafDetailComponent], providers: [NavSelectorLeafDetailsPresenter], host: {
+                        '[attr.aria-expanded]': '!leaf().viewMoreDisplayable || leaf().viewMoreDisplayed',
+                    }, animations: [
+                        /**
+                         * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+                         */
+                        trigger('accordion', [
+                            state('collapsed', style({
+                                maxHeight: '0',
+                                overflow: 'hidden',
+                            })),
+                            state('expanded', style({
+                                maxHeight: 'initial',
+                            })),
+                            transition('collapsed => expanded', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' })),
+                            ]),
+                            transition('expanded => collapsed', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
+                            ]),
+                        ]),
+                    ], template: "@for (detail of firstDetails(); track detail.uid) {\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n    </div>\n}\n\n@if (leaf().viewMoreDisplayable) {\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (viewMoreDelay()) {\n            @for (detail of lastDetails(); track detail.uid) {\n                <div class=\"detail\">\n                    <div class=\"separator\">\n                        <div class=\"rectangle\"></div>\n                    </div>\n                    <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n                </div>\n            }\n        }\n    </div>\n\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <a\n            tabindex=\"0\"\n            role=\"button\"\n            class=\"standalone view-more\"\n            (keydown.space)=\"onSpaceOrEnter($event)\"\n            (keydown.enter)=\"onSpaceOrEnter($event)\"\n            (click)=\"toggleViewMore()\">\n            @if (leaf().viewMoreDisplayed) {\n                {{ navSelectorLeafDetailsPresenter.viewMoreText() }}\n            } @else {\n                {{ navSelectorLeafDetailsPresenter.viewLessText() }}\n            }\n        </a>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}:host .detail{display:flex;align-self:stretch}:host .separator{display:flex;padding:0 11px 0 20px;align-items:center;align-self:stretch}:host .rectangle{width:1px;align-self:stretch;background:var(--ref-color-grey-10)}:host .view-more{display:flex;padding:8px;align-items:center;align-self:stretch}:host .details-container{display:flex;flex-direction:column;align-self:stretch}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafDetailsPresenter }] });
+
+class NavSelectorLeafPresenter {
+    navSelectorState;
+    expanded = computed(() => this.navSelectorState.expanded());
+    texts = computed(() => this.navSelectorState.texts());
+    isMultipleModeEnabled = computed(() => this.navSelectorState.isMultipleModeEnabled());
+    leafActionProjection = computed(() => this.navSelectorState.leafActionProjection());
+    expandedAfterDelay = computed(() => this.navSelectorState.expandedAfterDelay());
+    constructor(navSelectorState) {
+        this.navSelectorState = navSelectorState;
+    }
+    onLeafClicked(leaf) {
+        this.navSelectorState.onLeafClicked(leaf);
+    }
+    onLeafToggleFolding(leaf) {
+        this.navSelectorState.onLeafToggleFolding(leaf);
+    }
+    selectOnlyLeaf(leaf) {
+        this.navSelectorState.selectOnlyLeaf(leaf);
+    }
+    fold(leaf) {
+        this.navSelectorState.fold(leaf);
+    }
+    unfold(leaf) {
+        this.navSelectorState.unfold(leaf);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: NavSelectorState }] });
+
+class NavSelectorLeafComponent {
+    el;
+    navSelectorLeafPresenter;
+    leaf = input.required();
+    initial = computed(() => this.leaf().alias[0].toUpperCase());
+    foldSymbol = computed(() => (this.leaf().folded ? 'chevron-down' : 'chevron-up'));
+    hovering = signal(false);
+    hoveringMenu = signal(false);
+    onlyButtonDisplayed = computed(() => this.navSelectorLeafPresenter.isMultipleModeEnabled() &&
+        (this.hovering() || this.leaf().accessibility.tabIndex === 0) &&
+        this.leaf().selectable);
+    aliasEl = viewChild('alias');
+    aliasBoundedClientRect = signal({
+        offsetWidth: 0,
+        offsetHeight: 0,
+        scrollWidth: 0,
+        scrollHeight: 0,
+    });
+    tooltipContent = computed(() => {
+        const content = [];
+        const el = this.aliasBoundedClientRect();
+        if (!this.navSelectorLeafPresenter.expanded() || el.offsetWidth < el.scrollWidth || el.offsetHeight < el.scrollHeight) {
+            content.push(this.leaf().alias);
+        }
+        const disableReason = this.leaf().disableReason;
+        if (disableReason) {
+            content.push(disableReason);
+        }
+        if (this.leaf().displayFeatureLocked) {
+            content.push(this.navSelectorLeafPresenter.texts().featureLocked);
+        }
+        if (this.leaf().displayTokenInvalid) {
+            content.push(this.navSelectorLeafPresenter.texts().tokenInvalid);
+        }
+        return content.join('<br>');
+    });
+    tooltipDisabled = computed(() => !this.tooltipContent().length || this.leaf().detailsDisplayable);
+    minifiedEl = viewChild('minified');
+    menuEl = viewChild('menuContainer');
+    menuTriggerEl = viewChild('menuTrigger');
+    actionMenuTriggerEl = viewChild('actionMenuTrigger');
+    foldedWithDelay = signal(false);
+    network = computed(() => (this.leaf().network ? this.leaf().network : undefined));
+    constructor(el, navSelectorLeafPresenter) {
+        this.el = el;
+        this.navSelectorLeafPresenter = navSelectorLeafPresenter;
+        afterNextRender(() => {
+            this.maxHeight.set(`${this.el.nativeElement.scrollHeight}px`);
+            const el = this.aliasEl()?.nativeElement;
+            if (el) {
+                this.aliasBoundedClientRect.set({
+                    offsetWidth: el.offsetWidth,
+                    offsetHeight: el.offsetHeight,
+                    scrollWidth: el.scrollWidth,
+                    scrollHeight: el.scrollHeight,
+                });
+            }
+        });
+        effect(() => {
+            if (this.leaf().folded) {
+                setTimeout(() => this.foldedWithDelay.set(true), 150);
+            }
+            else {
+                this.foldedWithDelay.set(false);
+            }
+        }, { allowSignalWrites: true });
+    }
+    animationState = computed(() => (this.leaf().folded ? 'collapsed' : 'expanded'));
+    maxHeight = signal('0px');
+    onClick($event) {
+        $event.stopImmediatePropagation();
+        this.navSelectorLeafPresenter.onLeafClicked(this.leaf());
+    }
+    toggleFolding(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorLeafPresenter.onLeafToggleFolding(this.leaf());
+    }
+    mouseEntered() {
+        this.hovering.set(true);
+        const menuTrigger = this.menuTriggerEl();
+        if (menuTrigger && this.leaf().detailsDisplayable) {
+            menuTrigger.openMenu();
+        }
+    }
+    mouseLeft($event) {
+        this.hovering.set(false);
+        const menuTrigger = this.menuTriggerEl();
+        if (menuTrigger) {
+            setTimeout(() => {
+                this.tryCloseMenu(menuTrigger, $event);
+            }, 100);
+        }
+    }
+    mouseEnteredMenu() {
+        this.hoveringMenu.set(true);
+    }
+    mouseLeftMenu(menuTrigger, $event) {
+        this.hoveringMenu.set(false);
+        this.tryCloseMenu(menuTrigger, $event);
+    }
+    menuOpened() {
+        if (!this.leaf().detailsDisplayable) {
+            this.menuTriggerEl()?.closeMenu();
+        }
+    }
+    onActionButtonClick($event) {
+        $event.stopImmediatePropagation();
+    }
+    onActionButtonKeyDownSpaceOrEnter($event) {
+        $event.stopImmediatePropagation();
+        this.actionMenuTriggerEl()?.openMenu();
+    }
+    selectOnly(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorLeafPresenter.selectOnlyLeaf(this.leaf());
+    }
+    onCheckboxToggle() {
+        this.navSelectorLeafPresenter.onLeafClicked(this.leaf());
+    }
+    onSpaceOrEnterPressed($event) {
+        $event.stopImmediatePropagation();
+        if (document.activeElement === this.el.nativeElement.querySelector('.nav-selector-leaf')) {
+            if (this.leaf().foldable) {
+                this.toggleFolding($event);
+            }
+            else {
+                this.navSelectorLeafPresenter.onLeafClicked(this.leaf());
+            }
+        }
+    }
+    fold(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorLeafPresenter.fold(this.leaf());
+    }
+    unfold(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorLeafPresenter.unfold(this.leaf());
+    }
+    tryCloseMenu(menuTrigger, $event) {
+        if (!this.hoveringMenu()) {
+            const minifiedEl = this.minifiedEl();
+            const minifiedBoundedClientRect = minifiedEl.nativeElement.getBoundingClientRect();
+            const mouseHoveringLeaf = this.mouseIsHovering($event, minifiedBoundedClientRect);
+            const menuEl = this.menuEl();
+            const menuBoundedClientRect = menuEl.nativeElement.getBoundingClientRect();
+            const mouseHoveringMenu = this.mouseIsHovering($event, menuBoundedClientRect);
+            if (!mouseHoveringLeaf && !mouseHoveringMenu) {
+                menuTrigger.closeMenu();
+            }
+        }
+    }
+    mouseIsHovering($event, boundingClientRect) {
+        return (boundingClientRect.left <= $event.clientX &&
+            $event.clientX <= boundingClientRect.right &&
+            boundingClientRect.top <= $event.clientY &&
+            $event.clientY <= boundingClientRect.bottom);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, listeners: { "mouseenter": "mouseEntered()", "mouseleave": "mouseLeft($event)", "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }, { propertyName: "minifiedEl", first: true, predicate: ["minified"], descendants: true, isSignal: true }, { propertyName: "menuEl", first: true, predicate: ["menuContainer"], descendants: true, isSignal: true }, { propertyName: "menuTriggerEl", first: true, predicate: ["menuTrigger"], descendants: true, isSignal: true }, { propertyName: "actionMenuTriggerEl", first: true, predicate: ["actionMenuTrigger"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n    <div\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        role=\"treeitem\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [disabled]=\"!leaf().selectable\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        <ap-avatar\n            size=\"24\"\n            [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n            [network]=\"$any(leaf().network)\"\n            [showInitials]=\"initial()\" />\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ leaf().alias }}\n        </span>\n\n        @if (onlyButtonDisplayed()) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                [attr.aria-label]=\"'Select only ' + leaf().alias\"\n                [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n                (keydown.space)=\"selectOnly($event)\"\n                (keydown.enter)=\"selectOnly($event)\"\n                (click)=\"selectOnly($event)\">\n                {{ navSelectorLeafPresenter.texts().only }}\n            </a>\n        } @else {\n            @if (leaf().displayCounter) {\n                <ap-counter\n                    color=\"orange\"\n                    size=\"normal\"\n                    [background]=\"false\">\n                    {{ leaf().counter }}\n                </ap-counter>\n            }\n            @if (leaf().displayTokenInvalid) {\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"error_fill\" />\n            }\n            @if (leaf().displayFeatureLocked) {\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"feature-lock\" />\n            }\n\n            @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n            @if (actionProjection?.length) {\n                <ap-symbol\n                    #actionMenuTrigger=\"matMenuTrigger\"\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n                    [matMenuTriggerFor]=\"actionMenu\"\n                    (click)=\"onActionButtonClick($event)\"\n                    (keydown.space)=\"onActionButtonKeyDownSpaceOrEnter($event)\"\n                    (keydown.enter)=\"onActionButtonKeyDownSpaceOrEnter($event)\" />\n\n                <mat-menu #actionMenu=\"matMenu\">\n                    @for (action of actionProjection; track action) {\n                        <button mat-menu-item>\n                            <ng-container\n                                [ngTemplateOutlet]=\"action\"\n                                [ngTemplateOutletContext]=\"{\n                                    uid: leaf().uid\n                                }\" />\n                        </button>\n                    }\n                </mat-menu>\n            }\n\n            @if (leaf().foldable) {\n                <ap-symbol\n                    class=\"folding-button\"\n                    size=\"sm\"\n                    role=\"button\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n                    [symbolId]=\"foldSymbol()\"\n                    (click)=\"toggleFolding($event)\"\n                    (keydown.space)=\"toggleFolding($event)\"\n                    (keydown.enter)=\"toggleFolding($event)\" />\n            }\n        }\n    </div>\n\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <ap-nav-selector-leaf-details [details]=\"leaf().details\"  [leaf]=\"leaf()\"/>\n        }\n    </div>\n} @else {\n    <div\n        #menuTrigger=\"matMenuTrigger\"\n        #minified\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [matMenuTriggerFor]=\"menu\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (menuOpened)=\"menuOpened()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [disabled]=\"!leaf().selectable\" />\n        }\n\n        <div class=\"avatar-container\">\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n\n            <div class=\"status\">\n                @if (leaf().displayCounter) {\n                    <ap-counter\n                        color=\"orange\"\n                        size=\"normal\"\n                        [notif]=\"true\"\n                        [background]=\"true\">\n                        {{ leaf().counter }}\n                    </ap-counter>\n                }\n                @if (leaf().displayTokenInvalid) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"error_fill\" />\n                }\n                @if (leaf().displayFeatureLocked) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"feature-lock\" />\n                }\n            </div>\n        </div>\n        <mat-menu\n            #menu=\"matMenu\"\n            class=\"nav-selector-leaf-menu\"\n            xPosition=\"after\"\n            [hasBackdrop]=\"false\">\n            <div\n                #menuContainer\n                [class.not-displayable]=\"!leaf().detailsDisplayable\"\n                (mouseenter)=\"mouseEnteredMenu()\"\n                (mouseleave)=\"mouseLeftMenu(menuTrigger, $event)\">\n                <button mat-menu-item>\n                    <span class=\"caption-bold\">{{ leaf().alias }}</span>\n                </button>\n                @for (detail of leaf().details; track detail.uid) {\n                    <button\n                        mat-menu-item\n                        [class.selected]=\"detail.selected\">\n                        <ap-nav-selector-leaf-detail\n                            [embedded]=\"true\"\n                            [detail]=\"detail\" />\n                    </button>\n                }\n            </div>\n        </mat-menu>\n    </div>\n}\n", styles: [":host{display:flex;gap:2px;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button,:host .actions-menu{display:flex;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .actions-menu:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus,:host .actions-menu:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf:not(.disabled){cursor:pointer}:host .nav-selector-leaf:not(.disabled):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled).selected:focus{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.feature-locked{border-radius:var(--ref-border-radius-sm)}:host .nav-selector-leaf.feature-locked:hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:focus{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked.selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked.selected:focus{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.disabled{opacity:.5}:host .status{position:absolute;right:-4px;top:-6px}:host .avatar-container{position:relative}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu.mat-mdc-menu-panel:not(.pop-menu) .mat-mdc-menu-item.selected{background:var(--ref-color-electric-blue-20)}::ng-deep .nav-selector-leaf-menu.mat-mdc-menu-panel:not(.pop-menu) .mat-mdc-menu-item ap-symbol{padding-right:0}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
+            /**
+             * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+             */
+            trigger('accordion', [
+                state('collapsed', style({
+                    maxHeight: 0,
+                    overflow: 'hidden',
+                })),
+                state('expanded', style({
+                    maxHeight: 'initial',
+                })),
+                transition('collapsed => expanded', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' })),
+                ]),
+                transition('expanded => collapsed', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-leaf', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AvatarComponent,
+                        CounterComponent,
+                        SymbolComponent,
+                        NavSelectorLeafDetailsComponent,
+                        CheckboxComponent,
+                        TooltipDirective,
+                        MatMenu,
+                        MatMenuTrigger,
+                        MatMenuItem,
+                        NavSelectorLeafDetailComponent,
+                        NavSelectorLeafDetailComponent,
+                        NgTemplateOutlet,
+                        TreeNodeAccessibilityDirective,
+                    ], providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], host: {
+                        '[class.minified]': '!navSelectorLeafPresenter.expanded()',
+                        role: 'treeitem',
+                        '(mouseenter)': 'mouseEntered()',
+                        '(mouseleave)': 'mouseLeft($event)',
+                        '(keydown.arrowLeft)': 'fold($event)',
+                        '(keydown.arrowRight)': 'unfold($event)',
+                    }, animations: [
+                        /**
+                         * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+                         */
+                        trigger('accordion', [
+                            state('collapsed', style({
+                                maxHeight: 0,
+                                overflow: 'hidden',
+                            })),
+                            state('expanded', style({
+                                maxHeight: 'initial',
+                            })),
+                            transition('collapsed => expanded', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' })),
+                            ]),
+                            transition('expanded => collapsed', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
+                            ]),
+                        ]),
+                    ], template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n    <div\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        role=\"treeitem\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [disabled]=\"!leaf().selectable\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        <ap-avatar\n            size=\"24\"\n            [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n            [network]=\"$any(leaf().network)\"\n            [showInitials]=\"initial()\" />\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ leaf().alias }}\n        </span>\n\n        @if (onlyButtonDisplayed()) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                [attr.aria-label]=\"'Select only ' + leaf().alias\"\n                [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n                (keydown.space)=\"selectOnly($event)\"\n                (keydown.enter)=\"selectOnly($event)\"\n                (click)=\"selectOnly($event)\">\n                {{ navSelectorLeafPresenter.texts().only }}\n            </a>\n        } @else {\n            @if (leaf().displayCounter) {\n                <ap-counter\n                    color=\"orange\"\n                    size=\"normal\"\n                    [background]=\"false\">\n                    {{ leaf().counter }}\n                </ap-counter>\n            }\n            @if (leaf().displayTokenInvalid) {\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"error_fill\" />\n            }\n            @if (leaf().displayFeatureLocked) {\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"feature-lock\" />\n            }\n\n            @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n            @if (actionProjection?.length) {\n                <ap-symbol\n                    #actionMenuTrigger=\"matMenuTrigger\"\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n                    [matMenuTriggerFor]=\"actionMenu\"\n                    (click)=\"onActionButtonClick($event)\"\n                    (keydown.space)=\"onActionButtonKeyDownSpaceOrEnter($event)\"\n                    (keydown.enter)=\"onActionButtonKeyDownSpaceOrEnter($event)\" />\n\n                <mat-menu #actionMenu=\"matMenu\">\n                    @for (action of actionProjection; track action) {\n                        <button mat-menu-item>\n                            <ng-container\n                                [ngTemplateOutlet]=\"action\"\n                                [ngTemplateOutletContext]=\"{\n                                    uid: leaf().uid\n                                }\" />\n                        </button>\n                    }\n                </mat-menu>\n            }\n\n            @if (leaf().foldable) {\n                <ap-symbol\n                    class=\"folding-button\"\n                    size=\"sm\"\n                    role=\"button\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n                    [symbolId]=\"foldSymbol()\"\n                    (click)=\"toggleFolding($event)\"\n                    (keydown.space)=\"toggleFolding($event)\"\n                    (keydown.enter)=\"toggleFolding($event)\" />\n            }\n        }\n    </div>\n\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <ap-nav-selector-leaf-details [details]=\"leaf().details\"  [leaf]=\"leaf()\"/>\n        }\n    </div>\n} @else {\n    <div\n        #menuTrigger=\"matMenuTrigger\"\n        #minified\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [matMenuTriggerFor]=\"menu\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (menuOpened)=\"menuOpened()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [disabled]=\"!leaf().selectable\" />\n        }\n\n        <div class=\"avatar-container\">\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n\n            <div class=\"status\">\n                @if (leaf().displayCounter) {\n                    <ap-counter\n                        color=\"orange\"\n                        size=\"normal\"\n                        [notif]=\"true\"\n                        [background]=\"true\">\n                        {{ leaf().counter }}\n                    </ap-counter>\n                }\n                @if (leaf().displayTokenInvalid) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"error_fill\" />\n                }\n                @if (leaf().displayFeatureLocked) {\n                    <ap-symbol\n                        size=\"sm\"\n                        symbolId=\"feature-lock\" />\n                }\n            </div>\n        </div>\n        <mat-menu\n            #menu=\"matMenu\"\n            class=\"nav-selector-leaf-menu\"\n            xPosition=\"after\"\n            [hasBackdrop]=\"false\">\n            <div\n                #menuContainer\n                [class.not-displayable]=\"!leaf().detailsDisplayable\"\n                (mouseenter)=\"mouseEnteredMenu()\"\n                (mouseleave)=\"mouseLeftMenu(menuTrigger, $event)\">\n                <button mat-menu-item>\n                    <span class=\"caption-bold\">{{ leaf().alias }}</span>\n                </button>\n                @for (detail of leaf().details; track detail.uid) {\n                    <button\n                        mat-menu-item\n                        [class.selected]=\"detail.selected\">\n                        <ap-nav-selector-leaf-detail\n                            [embedded]=\"true\"\n                            [detail]=\"detail\" />\n                    </button>\n                }\n            </div>\n        </mat-menu>\n    </div>\n}\n", styles: [":host{display:flex;gap:2px;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button,:host .actions-menu{display:flex;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .actions-menu:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus,:host .actions-menu:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf:not(.disabled){cursor:pointer}:host .nav-selector-leaf:not(.disabled):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled).selected:focus{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.feature-locked{border-radius:var(--ref-border-radius-sm)}:host .nav-selector-leaf.feature-locked:hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:focus{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked.selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked.selected:focus{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.disabled{opacity:.5}:host .status{position:absolute;right:-4px;top:-6px}:host .avatar-container{position:relative}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu.mat-mdc-menu-panel:not(.pop-menu) .mat-mdc-menu-item.selected{background:var(--ref-color-electric-blue-20)}::ng-deep .nav-selector-leaf-menu.mat-mdc-menu-panel:not(.pop-menu) .mat-mdc-menu-item ap-symbol{padding-right:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafPresenter }] });
+
+class NavSelectorGroupPresenter {
+    navSelectorState;
+    expanded = computed(() => this.navSelectorState.expanded());
+    texts = computed(() => this.navSelectorState.texts());
+    isMultipleModeEnabled = computed(() => this.navSelectorState.isMultipleModeEnabled());
+    expandedAfterDelay = computed(() => this.navSelectorState.expandedAfterDelay());
+    constructor(navSelectorState) {
+        this.navSelectorState = navSelectorState;
+    }
+    onGroupSelected(group) {
+        this.navSelectorState.onNodeSelect(group);
+    }
+    onGroupToggleFolding(group) {
+        this.navSelectorState.onGroupToggleFolding(group);
+    }
+    fold(group) {
+        this.navSelectorState.fold(group);
+    }
+    unfold(group) {
+        this.navSelectorState.unfold(group);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupPresenter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupPresenter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: NavSelectorState }] });
+
+class NavSelectorGroupComponent {
+    el;
+    navSelectorGroupPresenter;
+    group = input.required();
+    foldSymbol = computed(() => (this.group().folded ? 'chevron-down' : 'chevron-up'));
+    aliasEl = viewChild('alias');
+    aliasBoundedClientRect = signal({
+        offsetWidth: 0,
+        offsetHeight: 0,
+        scrollWidth: 0,
+        scrollHeight: 0,
+    });
+    tooltipContent = computed(() => {
+        const content = [];
+        const el = this.aliasBoundedClientRect();
+        if (!this.navSelectorGroupPresenter.expanded() || el.offsetWidth < el.scrollWidth || el.offsetHeight < el.scrollHeight) {
+            content.push(this.group().alias);
+        }
+        if (this.group().displayTokenInvalid) {
+            content.push(this.navSelectorGroupPresenter.texts().tokenInvalid);
+        }
+        return content.join('<br>');
+    });
+    tooltipDisabled = computed(() => !this.tooltipContent().length);
+    foldedWithDelay = signal(false);
+    animationState = computed(() => (this.group().folded ? 'collapsed' : 'expanded'));
+    constructor(el, navSelectorGroupPresenter) {
+        this.el = el;
+        this.navSelectorGroupPresenter = navSelectorGroupPresenter;
+        afterNextRender(() => {
+            this.maxHeight.set(`${this.el.nativeElement.scrollHeight}px`);
+            const el = this.aliasEl()?.nativeElement;
+            if (el) {
+                this.aliasBoundedClientRect.set({
+                    offsetWidth: el.offsetWidth,
+                    offsetHeight: el.offsetHeight,
+                    scrollWidth: el.scrollWidth,
+                    scrollHeight: el.scrollHeight,
+                });
+            }
+        });
+        effect(() => {
+            if (this.group().folded) {
+                setTimeout(() => this.foldedWithDelay.set(true), 150);
+            }
+            else {
+                this.foldedWithDelay.set(false);
+            }
+        }, { allowSignalWrites: true });
+    }
+    maxHeight = signal('0px');
+    onKeydownSpaceOrEnter($event) {
+        // Prevent to toggle folding when focus is on the checkbox
+        if (document.activeElement === this.el.nativeElement.querySelector('.content')) {
+            this.toggleFolding($event);
+        }
+        else {
+            this.navSelectorGroupPresenter.onGroupSelected(this.group());
+        }
+    }
+    toggleFolding(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorGroupPresenter.onGroupToggleFolding(this.group());
+    }
+    fold(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorGroupPresenter.fold(this.group());
+    }
+    unfold(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorGroupPresenter.unfold(this.group());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorGroupPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorGroupPresenter.expanded()" } }, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"group()\"\n        (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n        (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n        @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"group().uid\"\n                [checked]=\"group().selected\"\n                [disabled]=\"!group().selectable\"\n                [indeterminate]=\"group().undeterminedSelection\"\n                (change)=\"navSelectorGroupPresenter.onGroupSelected(group())\" />\n        }\n\n        <ap-symbol\n            symbolId=\"folder\"\n            size=\"sm\" />\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ group().alias }}\n        </span>\n\n        @if (group().displayTokenInvalid) {\n            <ap-symbol\n                symbolId=\"error_fill\"\n                size=\"sm\" />\n        }\n\n        @if (group().displayCounter) {\n            <ap-counter\n                color=\"orange\"\n                size=\"normal\"\n                [background]=\"false\">\n                {{ group().counter }}\n            </ap-counter>\n        }\n\n        <ap-symbol\n            size=\"sm\"\n            class=\"folding-button\"\n            [tabindex]=\"group().accessibility.tabIndex\"\n            [attr.aria-label]=\"'Toggle ' + group().alias\"\n            [symbolId]=\"foldSymbol()\"\n            (keydown.space)=\"toggleFolding($event)\"\n            (keydown.enter)=\"toggleFolding($event)\"\n            (click)=\"toggleFolding($event)\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of group().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <ap-nav-selector-leaf [leaf]=\"child\" />\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"group()\"\n        (click)=\"toggleFolding($event)\"\n        (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n        (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n        @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"group().uid\"\n                [checked]=\"group().selected\"\n                [disabled]=\"!group().selectable\"\n                [indeterminate]=\"group().undeterminedSelection\"\n                (change)=\"navSelectorGroupPresenter.onGroupSelected(group())\" />\n        }\n\n        <div class=\"picture-url-sample-container\">\n            <div class=\"picture-url-sample\">\n                @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n                    <ap-avatar\n                        [size]=\"$any(12)\"\n                        [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                        [showInitials]=\"pictureUrlSample.initial\" />\n                }\n\n                <div class=\"status\">\n                    @if (group().displayCounter) {\n                        <ap-counter\n                            color=\"orange\"\n                            size=\"normal\"\n                            [notif]=\"true\"\n                            [background]=\"true\">\n                            {{ group().counter }}\n                        </ap-counter>\n                    }\n                </div>\n            </div>\n\n            <div class=\"toggle\">\n                <ap-symbol\n                    size=\"sm\"\n                    [symbolId]=\"foldSymbol()\" />\n            </div>\n        </div>\n    </div>\n\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of group().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <ap-nav-selector-leaf [leaf]=\"child\" />\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .content:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down],:host:not(.minified) ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:hover,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:active,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:focus,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host.minified .content{gap:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-4px;top:-6px}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
+            /**
+             * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+             */
+            trigger('accordion', [
+                state('collapsed', style({
+                    maxHeight: 0,
+                    overflow: 'hidden',
+                })),
+                state('expanded', style({
+                    maxHeight: 'initial',
+                })),
+                transition('collapsed => expanded', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ maxHeight: '{{maxHeight}}', overflow: 'hidden' })),
+                ]),
+                transition('expanded => collapsed', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}', overflow: 'hidden' }), style({ maxHeight: 0, overflow: 'hidden' })])),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], imports: [
+                        SymbolComponent,
+                        CounterComponent,
+                        NavSelectorLeafComponent,
+                        CheckboxComponent,
+                        AvatarComponent,
+                        TooltipDirective,
+                        TreeNodeAccessibilityDirective,
+                    ], host: {
+                        '[class.minified]': '!navSelectorGroupPresenter.expanded()',
+                        '(keydown.arrowLeft)': 'fold($event)',
+                        '(keydown.arrowRight)': 'unfold($event)',
+                    }, animations: [
+                        /**
+                         * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+                         */
+                        trigger('accordion', [
+                            state('collapsed', style({
+                                maxHeight: 0,
+                                overflow: 'hidden',
+                            })),
+                            state('expanded', style({
+                                maxHeight: 'initial',
+                            })),
+                            transition('collapsed => expanded', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ maxHeight: '{{maxHeight}}', overflow: 'hidden' })),
+                            ]),
+                            transition('expanded => collapsed', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}', overflow: 'hidden' }), style({ maxHeight: 0, overflow: 'hidden' })])),
+                            ]),
+                        ]),
+                    ], template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"group()\"\n        (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n        (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n        @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"group().uid\"\n                [checked]=\"group().selected\"\n                [disabled]=\"!group().selectable\"\n                [indeterminate]=\"group().undeterminedSelection\"\n                (change)=\"navSelectorGroupPresenter.onGroupSelected(group())\" />\n        }\n\n        <ap-symbol\n            symbolId=\"folder\"\n            size=\"sm\" />\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ group().alias }}\n        </span>\n\n        @if (group().displayTokenInvalid) {\n            <ap-symbol\n                symbolId=\"error_fill\"\n                size=\"sm\" />\n        }\n\n        @if (group().displayCounter) {\n            <ap-counter\n                color=\"orange\"\n                size=\"normal\"\n                [background]=\"false\">\n                {{ group().counter }}\n            </ap-counter>\n        }\n\n        <ap-symbol\n            size=\"sm\"\n            class=\"folding-button\"\n            [tabindex]=\"group().accessibility.tabIndex\"\n            [attr.aria-label]=\"'Toggle ' + group().alias\"\n            [symbolId]=\"foldSymbol()\"\n            (keydown.space)=\"toggleFolding($event)\"\n            (keydown.enter)=\"toggleFolding($event)\"\n            (click)=\"toggleFolding($event)\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of group().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <ap-nav-selector-leaf [leaf]=\"child\" />\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"group()\"\n        (click)=\"toggleFolding($event)\"\n        (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n        (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n        @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"group().uid\"\n                [checked]=\"group().selected\"\n                [disabled]=\"!group().selectable\"\n                [indeterminate]=\"group().undeterminedSelection\"\n                (change)=\"navSelectorGroupPresenter.onGroupSelected(group())\" />\n        }\n\n        <div class=\"picture-url-sample-container\">\n            <div class=\"picture-url-sample\">\n                @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n                    <ap-avatar\n                        [size]=\"$any(12)\"\n                        [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                        [showInitials]=\"pictureUrlSample.initial\" />\n                }\n\n                <div class=\"status\">\n                    @if (group().displayCounter) {\n                        <ap-counter\n                            color=\"orange\"\n                            size=\"normal\"\n                            [notif]=\"true\"\n                            [background]=\"true\">\n                            {{ group().counter }}\n                        </ap-counter>\n                    }\n                </div>\n            </div>\n\n            <div class=\"toggle\">\n                <ap-symbol\n                    size=\"sm\"\n                    [symbolId]=\"foldSymbol()\" />\n            </div>\n        </div>\n    </div>\n\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of group().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <ap-nav-selector-leaf [leaf]=\"child\" />\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .content:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down],:host:not(.minified) ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:hover,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:active,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:focus,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host.minified .content{gap:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-4px;top:-6px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorGroupPresenter }] });
+
+class NavSelectorCategoryPresenter {
+    navSelectorState;
+    expanded = computed(() => this.navSelectorState.expanded());
+    expandedAfterDelay = computed(() => this.navSelectorState.expandedAfterDelay());
+    constructor(navSelectorState) {
+        this.navSelectorState = navSelectorState;
+    }
+    toggleFolding(event, category) {
+        event.stopImmediatePropagation();
+        this.navSelectorState.onGroupToggleFolding(category);
+    }
+    fold(event, category) {
+        event.stopImmediatePropagation();
+        this.navSelectorState.fold(category);
+    }
+    unfold(event, category) {
+        event.stopImmediatePropagation();
+        this.navSelectorState.unfold(category);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryPresenter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryPresenter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: NavSelectorState }] });
+
+class NavSelectorCategoryComponent {
+    el;
+    navSelectorCategoryPresenter;
+    category = input.required();
+    foldSymbol = computed(() => (this.category().folded ? 'chevron-down' : 'chevron-up'));
+    foldedWithDelay = signal(false);
+    animationState = computed(() => (this.category().folded ? 'collapsed' : 'expanded'));
+    constructor(el, navSelectorCategoryPresenter) {
+        this.el = el;
+        this.navSelectorCategoryPresenter = navSelectorCategoryPresenter;
+        afterNextRender(() => this.maxHeight.set(`${this.el.nativeElement.scrollHeight}px`));
+        effect(() => {
+            if (this.category().folded) {
+                setTimeout(() => this.foldedWithDelay.set(true), 150);
+            }
+            else {
+                this.foldedWithDelay.set(false);
+            }
+        }, { allowSignalWrites: true });
+    }
+    maxHeight = signal('0px');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorCategoryPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "navSelectorCategoryPresenter.fold($event, this.category())", "keydown.arrowRight": "navSelectorCategoryPresenter.unfold($event, this.category())" }, properties: { "class.minified": "!navSelectorCategoryPresenter.expanded()" } }, providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], ngImport: i0, template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n    <div\n        class=\"content\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (keydown.space.stop)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <span class=\"caption\">{{ category().alias }}</span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [attr.aria-label]=\"'Toggle ' + category().alias\"\n            [symbolId]=\"foldSymbol()\"\n            (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n            (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n            (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        @if (child.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"child\" />\n                        } @else if (child.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"child\" />\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <div class=\"name-container\">\n            <span class=\"caption\">{{ category().alias }}</span>\n            <span>.</span>\n        </div>\n\n        <div class=\"toggle\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"foldSymbol()\" />\n        </div>\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        @if (child.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"child\" />\n                        } @else if (child.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"child\" />\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .folding-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .content:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down],:host:not(.minified) ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:hover,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:active,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:focus,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus .name-container{display:none}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "ngmodule", type: EventPluginsModule }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
+            /**
+             * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+             */
+            trigger('accordion', [
+                state('collapsed', style({
+                    maxHeight: 0,
+                    overflow: 'hidden',
+                })),
+                state('expanded', style({
+                    maxHeight: 'initial',
+                })),
+                transition('collapsed => expanded', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' })),
+                ]),
+                transition('expanded => collapsed', [
+                    animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}' }), style({ overflow: 'hidden', maxHeight: 0 })])),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-category', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, EventPluginsModule, TreeNodeAccessibilityDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
+                        '[class.minified]': '!navSelectorCategoryPresenter.expanded()',
+                        '(keydown.arrowLeft)': 'navSelectorCategoryPresenter.fold($event, this.category())',
+                        '(keydown.arrowRight)': 'navSelectorCategoryPresenter.unfold($event, this.category())',
+                    }, animations: [
+                        /**
+                         * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
+                         */
+                        trigger('accordion', [
+                            state('collapsed', style({
+                                maxHeight: 0,
+                                overflow: 'hidden',
+                            })),
+                            state('expanded', style({
+                                maxHeight: 'initial',
+                            })),
+                            transition('collapsed => expanded', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' })),
+                            ]),
+                            transition('expanded => collapsed', [
+                                animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}' }), style({ overflow: 'hidden', maxHeight: 0 })])),
+                            ]),
+                        ]),
+                    ], template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n    <div\n        class=\"content\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (keydown.space.stop)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <span class=\"caption\">{{ category().alias }}</span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [attr.aria-label]=\"'Toggle ' + category().alias\"\n            [symbolId]=\"foldSymbol()\"\n            (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n            (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n            (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        @if (child.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"child\" />\n                        } @else if (child.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"child\" />\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <div class=\"name-container\">\n            <span class=\"caption\">{{ category().alias }}</span>\n            <span>.</span>\n        </div>\n\n        <div class=\"toggle\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"foldSymbol()\" />\n        </div>\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        @if (child.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"child\" />\n                        } @else if (child.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"child\" />\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .folding-button{display:flex;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .content:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down],:host:not(.minified) ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:hover,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:active,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host:not(.minified) ap-symbol[symbol-id=chevron-down]:focus,:host:not(.minified) ap-symbol[symbol-id=chevron-up]:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus .name-container{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
+
+let nextUniqueId = 0;
+class NavSelectorComponent {
+    navSelectorState;
+    el;
+    navSelectorEntries = input.required();
+    translatedTexts = input.required();
+    multipleModeEnabled = input(false);
+    detailsDisplayedLimit = input(Number.MAX_SAFE_INTEGER);
+    /**
+     * If true, the nav selector will be expanded by default. Even if the width of the screen is smaller than 1280px.
+     */
+    forceExpanded = input(false);
+    selectedEntryUids = model.required();
+    headerProjection = contentChild('header');
+    footerProjection = contentChild('footer');
+    displayFooter = computed(() => this.footerProjection() !== undefined);
+    leafActionProjection = contentChildren('leafAction');
+    expansionState = computed(() => (this.navSelectorState.expanded() ? 'expanded' : 'minified'));
+    componentUid = `nav-selector-${nextUniqueId++}`;
+    constructor(navSelectorState, el) {
+        this.navSelectorState = navSelectorState;
+        this.el = el;
+        navSelectorState.registerOnSelectedUidsChange(selectedUids => {
+            this.selectedEntryUids.set(selectedUids);
+        });
+        afterNextRender(() => {
+            if (!this.forceExpanded() && document.body.clientWidth < 1200) {
+                this.navSelectorState.toggleExpanded();
+            }
+        });
+        effect(() => {
+            this.navSelectorState.updateMultiModeEnabled(this.multipleModeEnabled());
+            if (!this.navSelectorState.filteredEntries().length) {
+                this.navSelectorState.updateEntries(this.navSelectorEntries(), this.selectedEntryUids(), this.detailsDisplayedLimit());
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            this.navSelectorState.updateDetailsDisplayedLimit(this.detailsDisplayedLimit());
+        }, { allowSignalWrites: true });
+        const leafActionProjectionEffect = effect(() => {
+            if (this.leafActionProjection()) {
+                this.navSelectorState.updateLeafAction(this.leafActionProjection());
+                leafActionProjectionEffect.destroy();
+            }
+        }, { manualCleanup: true, allowSignalWrites: true });
+        effect(() => {
+            this.navSelectorState.onSelectionChange(this.selectedEntryUids());
+        }, { allowSignalWrites: true });
+        effect(() => {
+            this.navSelectorState.updateTexts(this.translatedTexts());
+        }, { allowSignalWrites: true });
+    }
+    onArrowDown($event) {
+        if (this.el.nativeElement.querySelector('.nav-selector__content').contains(document.activeElement)) {
+            $event.stopImmediatePropagation();
+            this.navSelectorState.onArrowDown();
+            setTimeout(() => this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus());
+        }
+    }
+    onArrowUp($event) {
+        if (this.el.nativeElement.querySelector('.nav-selector__content').contains(document.activeElement)) {
+            $event.stopImmediatePropagation();
+            this.navSelectorState.onArrowUp();
+            setTimeout(() => this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus());
+        }
+    }
+    TemplateRef = TemplateRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorComponent, deps: [{ token: NavSelectorState }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)" }, properties: { "class.minified": "!navSelectorState.expanded()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "leafActionProjection", predicate: ["leafAction"], isSignal: true }], ngImport: i0, template: "<nav [@expand]=\"expansionState()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    @if (navSelectorState.expandedAfterDelay()) {\n        <div class=\"nav-selector__header\">\n            <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n            <button\n                type=\"button\"\n                class=\"expand-button expanded\"\n                (click)=\"navSelectorState.toggleExpanded()\">\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"arrow-reduce\" />\n            </button>\n\n\n            @if (headerProjectionNotNull) {\n                <ng-container\n                    [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            }\n\n            <ap-input-search\n                [id]=\"componentUid + '_search'\"\n                class=\"nav-selector-search\"\n                [placeholder]=\"translatedTexts().searchPlaceholder\"\n                [ngModel]=\"navSelectorState.search()\"\n                (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n        </div>\n\n        <div\n            class=\"nav-selector__content\"\n            role=\"tree\">\n            @for (entry of navSelectorState.filteredEntries(); track entry.uid) {\n                @if (!entry.hidden) {\n                    <div class=\"entry\">\n                        @if (entry.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"entry\" />\n                        } @else if (entry.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"entry\" />\n                        } @else if (entry.type === 'CATEGORY') {\n                            <ap-nav-selector-category [category]=\"$any(entry)\" />\n                        }\n                    </div>\n                }\n            }\n            @if (navSelectorState.noResults()) {\n                <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n            }\n        </div>\n\n        @if (displayFooter() && footerProjectionNotNull) {\n            <div class=\"nav-selector__footer\">\n                <ng-container\n                    [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            </div>\n        }\n    } @else {\n        <div class=\"nav-selector__header\">\n            <button\n                type=\"button\"\n                class=\"expand-button\"\n                (click)=\"navSelectorState.toggleExpanded()\">\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"arrow-expand\" />\n            </button>\n            @if (headerProjectionNotNull) {\n                <ng-container\n                    [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            }\n\n            <ap-icon-button (onClick)=\"navSelectorState.toggleExpanded()\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        </div>\n\n        <div class=\"nav-selector__content\">\n            @for (entry of navSelectorState.filteredEntries(); track entry.uid) {\n                @if (!entry.hidden) {\n                    <div class=\"entry\">\n                        @if (entry.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"entry\" />\n                        } @else if (entry.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"entry\" />\n                        } @else if (entry.type === 'CATEGORY') {\n                            <ap-nav-selector-category [category]=\"entry\" />\n                        }\n                    </div>\n                }\n            }\n        </div>\n\n        @if (displayFooter() && footerProjectionNotNull) {\n            <div class=\"nav-selector__footer\">\n                <ng-container\n                    [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            </div>\n        }\n    }\n</nav>\n", styles: [":host{display:flex;height:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;width:224px;max-width:224px}@media only screen and (min-device-width: 1400px){:host{width:100%;max-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;border-right:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:none;border:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto}:host .nav-selector__content .entry{padding:var(--ref-spacing-xxs);align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry+.entry{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EventPluginsModule }], animations: [
+            trigger('expand', [
+                state('expanded', style({ width: '100%' })),
+                state('minified', style({ with: '64px' })),
+                transition('expanded => minified', animate('250ms cubic-bezier(.4, 0, .3, 1)')),
+                transition('minified => expanded', animate('250ms cubic-bezier(.4, 0, .3, 1)', 
+                // Force animation to do not be with 100% instantly
+                keyframes([style({ width: '64px' }), style({ width: '50%' }), style({ width: '100%' })]))),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NavSelectorLeafComponent,
+                        NavSelectorGroupComponent,
+                        NavSelectorCategoryComponent,
+                        InputSearchComponent,
+                        FormsModule,
+                        SymbolComponent,
+                        IconButtonComponent,
+                        NgTemplateOutlet,
+                        EventPluginsModule,
+                    ], providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], host: {
+                        '[class.minified]': '!navSelectorState.expanded()',
+                        role: 'tree',
+                        '(keydown.arrowDown)': 'onArrowDown($event)',
+                        '(keydown.arrowUp)': 'onArrowUp($event)',
+                    }, animations: [
+                        trigger('expand', [
+                            state('expanded', style({ width: '100%' })),
+                            state('minified', style({ with: '64px' })),
+                            transition('expanded => minified', animate('250ms cubic-bezier(.4, 0, .3, 1)')),
+                            transition('minified => expanded', animate('250ms cubic-bezier(.4, 0, .3, 1)', 
+                            // Force animation to do not be with 100% instantly
+                            keyframes([style({ width: '64px' }), style({ width: '50%' }), style({ width: '100%' })]))),
+                        ]),
+                    ], template: "<nav [@expand]=\"expansionState()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    @if (navSelectorState.expandedAfterDelay()) {\n        <div class=\"nav-selector__header\">\n            <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n            <button\n                type=\"button\"\n                class=\"expand-button expanded\"\n                (click)=\"navSelectorState.toggleExpanded()\">\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"arrow-reduce\" />\n            </button>\n\n\n            @if (headerProjectionNotNull) {\n                <ng-container\n                    [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            }\n\n            <ap-input-search\n                [id]=\"componentUid + '_search'\"\n                class=\"nav-selector-search\"\n                [placeholder]=\"translatedTexts().searchPlaceholder\"\n                [ngModel]=\"navSelectorState.search()\"\n                (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n        </div>\n\n        <div\n            class=\"nav-selector__content\"\n            role=\"tree\">\n            @for (entry of navSelectorState.filteredEntries(); track entry.uid) {\n                @if (!entry.hidden) {\n                    <div class=\"entry\">\n                        @if (entry.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"entry\" />\n                        } @else if (entry.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"entry\" />\n                        } @else if (entry.type === 'CATEGORY') {\n                            <ap-nav-selector-category [category]=\"$any(entry)\" />\n                        }\n                    </div>\n                }\n            }\n            @if (navSelectorState.noResults()) {\n                <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n            }\n        </div>\n\n        @if (displayFooter() && footerProjectionNotNull) {\n            <div class=\"nav-selector__footer\">\n                <ng-container\n                    [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            </div>\n        }\n    } @else {\n        <div class=\"nav-selector__header\">\n            <button\n                type=\"button\"\n                class=\"expand-button\"\n                (click)=\"navSelectorState.toggleExpanded()\">\n                <ap-symbol\n                    size=\"sm\"\n                    symbolId=\"arrow-expand\" />\n            </button>\n            @if (headerProjectionNotNull) {\n                <ng-container\n                    [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            }\n\n            <ap-icon-button (onClick)=\"navSelectorState.toggleExpanded()\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        </div>\n\n        <div class=\"nav-selector__content\">\n            @for (entry of navSelectorState.filteredEntries(); track entry.uid) {\n                @if (!entry.hidden) {\n                    <div class=\"entry\">\n                        @if (entry.type === 'LEAF') {\n                            <ap-nav-selector-leaf [leaf]=\"entry\" />\n                        } @else if (entry.type === 'GROUP') {\n                            <ap-nav-selector-group [group]=\"entry\" />\n                        } @else if (entry.type === 'CATEGORY') {\n                            <ap-nav-selector-category [category]=\"entry\" />\n                        }\n                    </div>\n                }\n            }\n        </div>\n\n        @if (displayFooter() && footerProjectionNotNull) {\n            <div class=\"nav-selector__footer\">\n                <ng-container\n                    [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                    [ngTemplateOutletContext]=\"{\n                        expanded: navSelectorState.expanded()\n                    }\" />\n            </div>\n        }\n    }\n</nav>\n", styles: [":host{display:flex;height:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;width:224px;max-width:224px}@media only screen and (min-device-width: 1400px){:host{width:100%;max-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;border-right:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:none;border:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto}:host .nav-selector__content .entry{padding:var(--ref-spacing-xxs);align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry+.entry{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
+        }], ctorParameters: () => [{ type: NavSelectorState }, { type: i0.ElementRef }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NavSelectorComponent };
+//# sourceMappingURL=agorapulse-ui-components-nav-selector.mjs.map