@agorapulse/ui-components 18.0.12-beta.1 → 18.0.14

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

@@ -4,7 +4,7 @@ import { SymbolComponent, withSymbols, apErrorFill, apFeatureLock, apChevronDown
 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 { input, afterRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, Component, contentChildren, viewChild, afterNextRender, model, contentChild } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { EventPluginsModule } from '@tinkoff/ng-event-plugins';
@@ -13,7 +13,6 @@ 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();
@@ -43,6 +42,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
+class NavSelectorPopoverTriggerDirective {
+    el;
+    renderer;
+    apNavSelectorPopoverTrigger = input.required();
+    apNavSelectorPopoverTriggerMode = input({
+        click: true,
+        keyboard: [],
+        hover: false,
+        focus: false,
+    });
+    apNavSelectorPopoverDisabled = input(false);
+    ACTIVE_CLASS = 'nav-selector-popover-trigger--active';
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        effect(() => {
+            const displayed = this.apNavSelectorPopoverTrigger().navSelectorPopoverDisplayed();
+            untracked(() => {
+                if (displayed) {
+                    this.renderer.addClass(this.el.nativeElement, this.ACTIVE_CLASS);
+                }
+                else {
+                    this.renderer.removeClass(this.el.nativeElement, this.ACTIVE_CLASS);
+                }
+            });
+        });
+    }
+    onClick(event) {
+        if (!this.apNavSelectorPopoverTriggerMode().click || this.apNavSelectorPopoverDisabled()) {
+            return;
+        }
+        event.stopImmediatePropagation();
+        this.toggleDisplay();
+    }
+    onKeydown(event) {
+        if (this.apNavSelectorPopoverTriggerMode().keyboard?.includes(event.code) && !this.apNavSelectorPopoverDisabled()) {
+            this.toggleDisplay();
+        }
+    }
+    onMouseEnter() {
+        if (this.apNavSelectorPopoverTriggerMode().hover && !this.apNavSelectorPopoverDisabled()) {
+            this.apNavSelectorPopoverTrigger().display(this.el);
+        }
+    }
+    onMouseLeave() {
+        if (this.apNavSelectorPopoverTriggerMode().hover) {
+            this.apNavSelectorPopoverTrigger().hide();
+        }
+    }
+    toggleDisplay() {
+        this.apNavSelectorPopoverTrigger().toggle(this.el);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.9", type: NavSelectorPopoverTriggerDirective, isStandalone: true, selector: "[apNavSelectorPopoverTrigger]", inputs: { apNavSelectorPopoverTrigger: { classPropertyName: "apNavSelectorPopoverTrigger", publicName: "apNavSelectorPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, apNavSelectorPopoverTriggerMode: { classPropertyName: "apNavSelectorPopoverTriggerMode", publicName: "apNavSelectorPopoverTriggerMode", isSignal: true, isRequired: false, transformFunction: null }, apNavSelectorPopoverDisabled: { classPropertyName: "apNavSelectorPopoverDisabled", publicName: "apNavSelectorPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[apNavSelectorPopoverTrigger]',
+                    standalone: true,
+                    host: {
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                    },
+                }]
+        }], 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';
@@ -61,15 +129,21 @@ class NavSelectorAccessibility {
      * @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 } }];
+        const flattenEntries = this.flatten(entries);
+        let alreadyFocused = false;
+        for (const entry of flattenEntries) {
+            if (alreadyFocused) {
+                entry.accessibility.tabIndex = -1;
             }
-            if (acc.every(({ focusable }) => !focusable)) {
-                return [...acc, { ...entry, accessibility: { ...entry.accessibility, tabIndex: entry.focusable ? 0 : -1 } }];
+            else if (entry.focusable) {
+                alreadyFocused = true;
+                entry.accessibility.tabIndex = 0;
             }
-            return [...acc, entry];
-        }, []);
+            else {
+                entry.accessibility.tabIndex = -1;
+            }
+        }
+        return this.unflatten(flattenEntries);
     }
     /**
      * Focus the given entry and set tabIndex to 0 for the given uid and -1 for all other entries
@@ -125,7 +199,7 @@ class NavSelectorAccessibility {
     static focusPrevious(entries) {
         const flattenEntries = this.flatten(entries);
         const idxFocusedId = flattenEntries.findIndex(({ accessibility }) => accessibility.tabIndex === 0);
-        if (idxFocusedId === 0 || this.previousEntryIsFirstAndNotFocusable(flattenEntries, idxFocusedId)) {
+        if (idxFocusedId === 0 || this.noPreviousEntryFocusable(flattenEntries, idxFocusedId)) {
             return entries;
         }
         const focusedEntry = flattenEntries[idxFocusedId];
@@ -157,12 +231,14 @@ class NavSelectorAccessibility {
         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;
+    static noPreviousEntryFocusable(flattenEntries, idxFocusedId) {
+        for (let i = idxFocusedId - 1; i >= 0; i--) {
+            const entry = flattenEntries[i];
+            if (entry.focusable) {
+                return false;
+            }
         }
-        return false;
+        return true;
     }
     static focusAnEntry(entry, uid) {
         return { ...entry, accessibility: { ...entry.accessibility, tabIndex: entry.uid === uid ? 0 : -1 } };
@@ -370,7 +446,7 @@ class NavSelectorMultiSelect {
     static selectLeafs(leafs) {
         return leafs.map(leaf => ({
             ...leaf,
-            selected: true,
+            selected: leaf.selectable,
         }));
     }
     static unselectLeafs(leafs) {
@@ -460,28 +536,10 @@ class NavSelectorSingleSelect {
     }
     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;
-                }, []),
-            };
+            if (!leaf.detailsDisplayable) {
+                return this.selectALeafWitDetailsNotDisplayable(leaf);
+            }
+            return this.selectALeafWithDisplayableDetails(leaf);
         }
         const details = leaf.details.map(detail => {
             const detailSelected = detail.uid === entryUid && !detail.displayError;
@@ -505,6 +563,47 @@ class NavSelectorSingleSelect {
             details,
         };
     }
+    static selectALeafWitDetailsNotDisplayable(leaf) {
+        const selected = leaf.selectable;
+        return {
+            ...leaf,
+            selected,
+            accessibility: {
+                ...leaf.accessibility,
+                tabIndex: selected ? 0 : -1,
+            },
+            folded: !leaf.detailsDisplayable,
+        };
+    }
+    static selectALeafWithDisplayableDetails(leaf) {
+        return {
+            ...leaf,
+            selected: false,
+            accessibility: {
+                ...leaf.accessibility,
+                tabIndex: -1,
+            },
+            counterDisplayable: true,
+            displayCounter: false,
+            folded: !leaf.detailsDisplayable,
+            details: leaf.details.reduce(({ previousDetailSelected, details }, detail, idx) => {
+                const detailSelected = !previousDetailSelected &&
+                    leaf.detailsDisplayable &&
+                    !detail.displayError &&
+                    (idx === 0 || !details[idx - 1].selected);
+                details.push({
+                    ...detail,
+                    selected: detailSelected,
+                    focusable: true,
+                    accessibility: {
+                        ...detail.accessibility,
+                        tabIndex: detailSelected ? 0 : -1,
+                    },
+                });
+                return { previousDetailSelected: previousDetailSelected || detailSelected, details };
+            }, { previousDetailSelected: false, details: [] }).details,
+        };
+    }
     static selectALeafWithoutDetails(leaf, entryUid) {
         const selected = leaf.selectable && leaf.uid === entryUid;
         return {
@@ -721,10 +820,12 @@ class NavSelectorBuilder {
             uid: leaf.uid,
             alias: leaf.alias,
             pictureUrl: leaf.pictureUrl,
+            actionsDisplayable: this.isLeafLogicValid(leaf, LeafLogics.COUNTER),
             disabled,
             disableReason: leaf.disableReason,
             hidden: false,
-            focusable: focusable && !disabled,
+            focusable: focusable &&
+                ((multipleModeEnabled && this.isLeafLogicValid(leaf, LeafLogics.COUNTER)) || (!multipleModeEnabled && !disabled)),
             accessibility: {
                 tabIndex: -1,
                 ariaPosinset: idx + 1,
@@ -778,11 +879,20 @@ class NavSelectorBuilder {
     }
 }
 
-const isInternalNavSelectorEntryALeafFocusable = (leaf, { parentFolded, minified }) => {
+/**
+ * Create a Record of key/value pairs from an array of objects
+ * @param array
+ * @param key attribute of the object to use as key
+ */
+const associateBy = (array, key) => array.reduce((previousValue, currentValue) => {
+    previousValue[`${currentValue[key]}`] = currentValue;
+    return previousValue;
+}, {});
+const isInternalNavSelectorEntryALeafFocusable = (leaf, { parentFolded, multipleMode }) => {
     if (parentFolded) {
         return false;
     }
-    if (minified) {
+    if (multipleMode) {
         return !leaf.disabled && !leaf.displayTokenInvalid && !leaf.displayFeatureLocked;
     }
     return !leaf.disabled;
@@ -809,38 +919,52 @@ class NavSelectorFilter {
      *
      * @param entries The entries to filter.
      * @param search The search string.
+     * @param multipleMode to update the focusable state of leaves correctly.
      * @returns The filtered entries.
      */
-    static filter(entries, search) {
+    static filter(entries, search, multipleMode) {
         const formattedSearch = this.cleanValue(search);
         if (!formattedSearch) {
-            return entries;
+            return this.resetState(entries);
         }
-        return this.filterEntries(entries, formattedSearch);
+        return this.filterEntries(entries, formattedSearch, multipleMode);
     }
-    static filterEntries(entries, formattedSearch) {
+    static filterEntries(entries, formattedSearch, multipleMode) {
         const newEntries = entries.map(entry => {
             if (this.matches(entry.alias, formattedSearch)) {
-                return this.recursivelyUnfoldEntry(entry);
+                return this.recursivelyUnfoldEntry(entry, multipleMode);
             }
             if (isInternalNavSelectorEntryANode(entry)) {
-                const children = this.filterEntries(entry.children, formattedSearch);
+                const children = this.filterEntries(entry.children, formattedSearch, multipleMode);
                 if (children.every(({ hidden }) => hidden)) {
                     return {
                         ...entry,
                         children,
+                        focusable: false,
                         hidden: true,
                     };
                 }
                 return {
                     ...entry,
                     hidden: false,
+                    focusable: true,
                     displayCounter: false,
                     displayTokenInvalid: false,
                     folded: false,
                     children,
                 };
             }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return {
+                    ...entry,
+                    focusable: false,
+                    hidden: true,
+                    details: entry.details.map(detail => ({
+                        ...detail,
+                        focusable: false,
+                    })),
+                };
+            }
             return {
                 ...entry,
                 focusable: false,
@@ -849,29 +973,36 @@ class NavSelectorFilter {
         });
         return NavSelectorAccessibility.resetFocus(newEntries);
     }
-    static recursivelyUnfoldEntry(entry) {
+    static recursivelyUnfoldEntry(entry, multipleMode) {
         if (isInternalNavSelectorEntryAGroup(entry)) {
-            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child));
+            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child, multipleMode));
             return {
                 ...entry,
                 folded: false,
+                focusable: true,
                 children,
                 displayCounter: false,
                 displayTokenInvalid: false,
             };
         }
         else if (isInternalNavSelectorEntryALeaf(entry)) {
+            const leafFocusable = isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded: false, multipleMode });
             return {
                 ...entry,
                 hidden: false,
-                focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded: false, minified: false }),
+                focusable: leafFocusable,
                 displayCounter: entry.counterDisplayable,
+                details: entry.details.map(detail => ({
+                    ...detail,
+                    focusable: !entry.folded,
+                })),
             };
         }
         else if (isInternalNavSelectorEntryACategory(entry)) {
-            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child));
+            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child, multipleMode));
             return {
                 ...entry,
+                focusable: true,
                 folded: false,
                 hidden: false,
                 children,
@@ -885,6 +1016,23 @@ class NavSelectorFilter {
     static cleanValue(value) {
         return value.trim().normalize('NFKC').toLowerCase();
     }
+    static resetState(entries, parentFolded = false) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryANode(entry)) {
+                return {
+                    ...entry,
+                    hidden: false,
+                    focusable: !parentFolded,
+                    children: this.resetState(entry.children, entry.folded),
+                };
+            }
+            return {
+                ...entry,
+                focusable: !parentFolded,
+                hidden: false,
+            };
+        });
+    }
 }
 
 /**
@@ -898,10 +1046,11 @@ class NavSelectorFolding {
      *
      * @param entries nav selector entries
      * @param entryUid the entry uid to toggle
+     * @param multipleMode to update the focusable state of leaves and details correctly.
      * @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);
+    static toggleFolding(entries, entryUid, multipleMode, minified) {
+        return this.toggleEntryFolding(entries, entryUid, multipleMode, minified);
     }
     /**
      * Fold an entry.
@@ -911,10 +1060,11 @@ class NavSelectorFolding {
      *
      * @param entries nav selector entries
      * @param entryUid the entry uid to fold
+     * @param multipleMode to update the focusable state of leaves and details correctly.
      * @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);
+    static fold(entries, entryUid, multipleMode, minified) {
+        return this.foldEntry(entries, entryUid, multipleMode, minified);
     }
     /**
      * Unfold an entry.
@@ -924,12 +1074,13 @@ class NavSelectorFolding {
      *
      * @param entries nav selector entries
      * @param entryUid the entry uid to unfold
+     * @param multipleMode to update the focusable state of leaves and details correctly.
      * @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 unfold(entries, entryUid, multipleMode, minified) {
+        return this.unfoldEntry(entries, entryUid, multipleMode, minified);
     }
-    static toggleEntryFolding(entries, entryUid, minified, parentFolded = false) {
+    static toggleEntryFolding(entries, entryUid, multipleMode, minified, parentFolded = false) {
         return entries.map(entry => {
             if (isInternalNavSelectorEntryACategory(entry)) {
                 if (entry.uid === entryUid) {
@@ -950,10 +1101,10 @@ class NavSelectorFolding {
                 if (entry.uid === entryUid) {
                     const folded = !entry.folded;
                     if (folded) {
-                        return this.foldGroup(entry, minified);
+                        return this.foldGroup(entry, multipleMode, minified);
                     }
                     else {
-                        return this.unfoldGroup(entry, minified);
+                        return this.unfoldGroup(entry, multipleMode, minified);
                     }
                 }
                 return {
@@ -973,13 +1124,13 @@ class NavSelectorFolding {
                 }
                 return {
                     ...entry,
-                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { minified, parentFolded }),
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode }),
                 };
             }
             return { ...entry, focusable: !parentFolded };
         });
     }
-    static foldEntry(entries, entryUid, minified, parentFolded = false) {
+    static foldEntry(entries, entryUid, multipleMode, minified, parentFolded = false) {
         return entries.map(entry => {
             if (isInternalNavSelectorEntryACategory(entry)) {
                 if (entry.uid === entryUid) {
@@ -992,7 +1143,7 @@ class NavSelectorFolding {
             }
             if (isInternalNavSelectorEntryAGroup(entry)) {
                 if (entry.uid === entryUid) {
-                    return this.foldGroup(entry, minified);
+                    return this.foldGroup(entry, multipleMode, minified);
                 }
                 return {
                     ...entry,
@@ -1006,13 +1157,13 @@ class NavSelectorFolding {
                 }
                 return {
                     ...entry,
-                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { minified, parentFolded }),
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode }),
                 };
             }
             return { ...entry, focusable: !parentFolded };
         });
     }
-    static unfoldEntry(entries, entryUid, minified, parentFolded = false) {
+    static unfoldEntry(entries, entryUid, multipleMode, minified, parentFolded = false) {
         return entries.map(entry => {
             if (isInternalNavSelectorEntryACategory(entry)) {
                 if (entry.uid === entryUid) {
@@ -1020,16 +1171,16 @@ class NavSelectorFolding {
                 }
                 return {
                     ...entry,
-                    children: this.unfoldEntry(entry.children, entryUid, minified, entry.folded),
+                    children: this.unfoldEntry(entry.children, entryUid, multipleMode, minified, entry.folded),
                 };
             }
             if (isInternalNavSelectorEntryAGroup(entry)) {
                 if (entry.uid === entryUid) {
-                    return this.unfoldGroup(entry, minified);
+                    return this.unfoldGroup(entry, multipleMode, minified);
                 }
                 return {
                     ...entry,
-                    children: this.unfoldEntry(entry.children, entryUid, minified, parentFolded || entry.folded),
+                    children: this.unfoldEntry(entry.children, entryUid, multipleMode, minified, parentFolded || entry.folded),
                     focusable: !parentFolded,
                 };
             }
@@ -1039,7 +1190,7 @@ class NavSelectorFolding {
                 }
                 return {
                     ...entry,
-                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { minified, parentFolded }),
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode }),
                 };
             }
             return { ...entry, focusable: !parentFolded };
@@ -1059,20 +1210,20 @@ class NavSelectorFolding {
             children: this.unfoldEntry(category.children, category.uid, minified, false),
         };
     }
-    static foldGroup(group, minified) {
+    static foldGroup(group, multipleMode, minified) {
         return {
             ...group,
             folded: true,
-            children: this.foldEntry(group.children, group.uid, minified, true),
+            children: this.foldEntry(group.children, group.uid, multipleMode, minified, true),
             displayCounter: !!group.counter,
             displayTokenInvalid: group.children.some(({ displayTokenInvalid }) => displayTokenInvalid),
         };
     }
-    static unfoldGroup(group, minified) {
+    static unfoldGroup(group, multipleMode, minified) {
         return {
             ...group,
             folded: false,
-            children: this.unfoldEntry(group.children, group.uid, minified, false),
+            children: this.unfoldEntry(group.children, group.uid, multipleMode, minified, false),
             displayCounter: false,
             displayTokenInvalid: false,
         };
@@ -1104,6 +1255,80 @@ class NavSelectorFolding {
     }
 }
 
+/**
+ * NavSelectorMerger is a utility class that merges old entries into new entries.
+ * It is used to keep some previous properties of the previous state. Ex: folded, selected, focused, etc.
+ */
+class NavSelectorMerger {
+    /**
+     * Merges the old entries into the new entries.
+     *
+     * Modify directly the new entries as new entries are generated from scratch so no need to destructure them to have a new reference.
+     *
+     * @param newEntries
+     * @param oldEntries
+     *
+     * @returns the new entries with the old entries merged into them
+     */
+    static mergeInternalNavSelectorEntries(newEntries, oldEntries) {
+        const oldEntryByUid = associateBy(oldEntries, 'uid');
+        for (const newEntry of newEntries) {
+            if (!oldEntryByUid[newEntry.uid]) {
+                continue;
+            }
+            this.merge(newEntry, oldEntryByUid[newEntry.uid]);
+        }
+        return newEntries;
+    }
+    static merge(newEntry, oldEntry) {
+        if (isInternalNavSelectorEntryALeaf(newEntry) && isInternalNavSelectorEntryALeaf(oldEntry)) {
+            this.mergeLeaf(newEntry, oldEntry);
+        }
+        else if (isInternalNavSelectorEntryANode(newEntry) && isInternalNavSelectorEntryANode(oldEntry)) {
+            this.mergeInternalNavSelectorEntries(newEntry.children, oldEntry.children);
+            this.mergeNode(newEntry, oldEntry);
+        }
+    }
+    static mergeNode(newNode, oldNode) {
+        newNode.folded = oldNode.folded;
+        newNode.accessibility.tabIndex = oldNode.accessibility.tabIndex;
+        if (isInternalNavSelectorEntryAGroup(newNode) && isInternalNavSelectorEntryAGroup(oldNode)) {
+            this.mergeGroup(newNode, oldNode);
+        }
+    }
+    static mergeGroup(newGroup, oldGroup) {
+        newGroup.displayCounter = oldGroup.displayCounter;
+        newGroup.displayTokenInvalid = oldGroup.displayTokenInvalid;
+    }
+    static mergeLeaf(newLeaf, oldLeaf) {
+        if (this.isInternalLeafLogicValid(newLeaf)) {
+            newLeaf.viewMoreDisplayable = oldLeaf.viewMoreDisplayable;
+            newLeaf.viewMoreDisplayed = oldLeaf.viewMoreDisplayed;
+            newLeaf.displayCounter = oldLeaf.displayCounter;
+            newLeaf.folded = oldLeaf.folded;
+            newLeaf.selected = oldLeaf.selected;
+            newLeaf.accessibility.tabIndex = oldLeaf.accessibility.tabIndex;
+            const oldDetailByUId = associateBy(oldLeaf.details, 'uid');
+            newLeaf.details.forEach(newDetail => {
+                if (!oldDetailByUId[newDetail.uid] || newDetail.errorReason) {
+                    return;
+                }
+                newDetail.selected = oldDetailByUId[newDetail.uid].selected;
+                newDetail.accessibility.tabIndex = oldDetailByUId[newDetail.uid].accessibility.tabIndex;
+            });
+        }
+        else {
+            const oldDetailHasFocused = oldLeaf.details.some(oldDetail => oldDetail.accessibility.tabIndex === 0);
+            if (oldDetailHasFocused) {
+                newLeaf.accessibility.tabIndex = 0;
+            }
+        }
+    }
+    static isInternalLeafLogicValid(leaf) {
+        return !leaf.disabled && !leaf.displayTokenInvalid && !leaf.displayFeatureLocked;
+    }
+}
+
 /**
  * NavSelectorMinifying is a utility class that provides methods to apply rules on entries when minifying or expanded nav selector.
  */
@@ -1115,10 +1340,11 @@ class NavSelectorMinifying {
      * Detail are not focusable when minified.
      *
      * @param entries The entries to minify.
+     * @param multipleMode to update the focusable state of leaves correctly.
      * @returns The modified entries.
      */
-    static minify(entries) {
-        return this.compute(entries, true);
+    static minify(entries, multipleMode) {
+        return this.compute(entries, multipleMode, true);
     }
     /**
      * When expanding the nav selector, compute the focusable state of the entries.
@@ -1127,12 +1353,13 @@ class NavSelectorMinifying {
      * Detail are focusable when expanded.
      *
      * @param entries The entries to minify.
+     * @param multipleMode to update the focusable state of leaves and details correctly.
      * @returns The modified entries.
      */
-    static expand(entries) {
-        return this.compute(entries, false);
+    static expand(entries, multipleMode) {
+        return this.compute(entries, multipleMode, false);
     }
-    static compute(entries, minified, parent = null) {
+    static compute(entries, multipleMode, minified, parent = null) {
         return entries.map(entry => {
             if (isInternalNavSelectorEntryALeafDetails(entry)) {
                 return { ...entry, focusable: !minified };
@@ -1140,13 +1367,16 @@ class NavSelectorMinifying {
             if (isInternalNavSelectorEntryANode(entry)) {
                 return {
                     ...entry,
-                    children: this.compute(entry.children, minified, entry),
+                    children: this.compute(entry.children, multipleMode, minified, entry),
                 };
             }
             return {
                 ...entry,
-                focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded: parent?.folded === true, minified: minified }),
-                details: this.compute(entry.details, minified),
+                focusable: isInternalNavSelectorEntryALeafFocusable(entry, {
+                    parentFolded: parent?.folded === true,
+                    multipleMode,
+                }),
+                details: this.compute(entry.details, multipleMode, minified),
             };
         });
     }
@@ -1270,8 +1500,7 @@ class NavSelectorState {
     lastSelectedUids = signal([]);
     isMultipleModeEnabled = this.multipleModeEnabled;
     search = signal('');
-    filteredEntries = computed(() => NavSelectorFilter.filter(this.entries(), this.search()));
-    noResults = computed(() => this.filteredEntries().every(({ hidden }) => hidden));
+    noResults = computed(() => this.entries().every(({ hidden }) => hidden));
     texts = this._texts.asReadonly();
     leafActionProjection = signal(undefined);
     expanded = signal(true);
@@ -1280,15 +1509,23 @@ class NavSelectorState {
     constructor() {
         effect(() => {
             const newSelectedUids = this.collectSelectedUids(this.entries());
-            if (this.selectedUidsChangeCallback) {
-                this.selectedUidsChangeCallback(newSelectedUids);
-            }
-        }, { allowSignalWrites: true });
+            untracked(() => {
+                if (this.selectedUidsChangeCallback) {
+                    this.selectedUidsChangeCallback(newSelectedUids);
+                }
+            });
+        });
+        effect(() => {
+            const search = this.search();
+            untracked(() => {
+                this.entries.update(entries => NavSelectorFilter.filter(entries, search, this.multipleModeEnabled()));
+            });
+        });
     }
     updateMultiModeEnabled(enabled) {
         this.multipleModeEnabled.set(enabled);
     }
-    updateEntries(entries, initialSelectedEntryUids, detailsDisplayedLimit) {
+    initEntries(entries, initialSelectedEntryUids, detailsDisplayedLimit) {
         if (this.multipleModeEnabled()) {
             this.entries.set(NavSelectorBuilder.buildInMultipleMode(entries, initialSelectedEntryUids, detailsDisplayedLimit));
         }
@@ -1296,8 +1533,21 @@ class NavSelectorState {
             this.entries.set(NavSelectorBuilder.build(entries, initialSelectedEntryUids?.[0] ?? null, detailsDisplayedLimit));
         }
     }
+    updateEntries(entries, initialSelectedEntryUids, detailsDisplayedLimit) {
+        let newEntries;
+        if (this.multipleModeEnabled()) {
+            newEntries = NavSelectorBuilder.buildInMultipleMode(entries, initialSelectedEntryUids, detailsDisplayedLimit);
+        }
+        else {
+            newEntries = NavSelectorBuilder.build(entries, initialSelectedEntryUids?.[0] ?? null, detailsDisplayedLimit);
+        }
+        this.entries.update(oldEntries => {
+            const mergeEntries = NavSelectorMerger.mergeInternalNavSelectorEntries(newEntries, oldEntries);
+            return NavSelectorFilter.filter(mergeEntries, this.search(), this.multipleModeEnabled());
+        });
+    }
     onGroupToggleFolding(group) {
-        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, group.uid, !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, group.uid, this.multipleModeEnabled(), !this.expanded()));
     }
     onNodeSelect(node) {
         this.entries.update(entries => NavSelectorMultiSelect.selectInMultipleMode(entries, node.uid));
@@ -1314,7 +1564,7 @@ class NavSelectorState {
         }
     }
     onLeafToggleFolding(leaf) {
-        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, leaf.uid, !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, leaf.uid, this.multipleModeEnabled(), !this.expanded()));
     }
     onLeafDetailClicked(leafDetail) {
         this.entries.update(entries => NavSelectorSingleSelect.select(entries, leafDetail.uid));
@@ -1329,9 +1579,9 @@ class NavSelectorState {
         this.expanded.update(expanded => !expanded);
         this.entries.update(entries => {
             if (this.expanded()) {
-                return NavSelectorMinifying.expand(entries);
+                return NavSelectorMinifying.expand(entries, this.multipleModeEnabled());
             }
-            return NavSelectorMinifying.minify(entries);
+            return NavSelectorMinifying.minify(entries, this.multipleModeEnabled());
         });
         if (!this.expanded()) {
             setTimeout(() => this.expandedAfterDelay.set(this.expanded()), 150);
@@ -1340,6 +1590,11 @@ class NavSelectorState {
             this.expandedAfterDelay.set(this.expanded());
         }
     }
+    minify() {
+        if (this.expanded()) {
+            this.toggleExpanded();
+        }
+    }
     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())) {
@@ -1375,7 +1630,7 @@ class NavSelectorState {
     collectSelectedUids(entries) {
         return entries.flatMap(entry => {
             if (isInternalNavSelectorEntryALeaf(entry)) {
-                if (entry.details.length) {
+                if (entry.detailsDisplayable) {
                     return entry.details.flatMap(detail => (detail.selected ? [detail.uid] : []));
                 }
                 return entry.selected ? [entry.uid] : [];
@@ -1390,10 +1645,10 @@ class NavSelectorState {
         this.leafActionProjection.set(leafActionProjection);
     }
     fold(entry) {
-        this.entries.update(entries => NavSelectorFolding.fold(entries, entry.uid, !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.fold(entries, entry.uid, this.multipleModeEnabled(), !this.expanded()));
     }
     unfold(entry) {
-        this.entries.update(entries => NavSelectorFolding.unfold(entries, entry.uid, !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.unfold(entries, entry.uid, this.multipleModeEnabled(), !this.expanded()));
     }
     updateDetailsDisplayedLimit(detailsDisplayedLimit) {
         this.entries.update(entries => NavSelectorViewMore.changeViewMoreDetailsDisplayedLimit(entries, detailsDisplayedLimit));
@@ -1433,18 +1688,18 @@ class NavSelectorLeafDetailComponent {
     constructor(navSelectorLeafDetailPresenter) {
         this.navSelectorLeafDetailPresenter = navSelectorLeafDetailPresenter;
     }
-    onClick($event) {
-        $event.stopImmediatePropagation();
+    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 });
+    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", "class.embedded": "embedded()" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">{{ detail().alias }}</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 .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)}: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-visible{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 .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;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:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\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.selected]': 'detail().selected',
                         '[class.embedded]': 'embedded()',
                         '(keydown.enter)': 'onClick($event)',
                         '(keydown.space)': 'onClick($event)',
@@ -1454,7 +1709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             // 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"] }]
+                    ], template: "<span class=\"caption\">{{ detail().alias }}</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 .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)}: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-visible{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 .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;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:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"] }]
         }], ctorParameters: () => [{ type: NavSelectorLeafDetailPresenter }] });
 
 class NavSelectorLeafDetailsPresenter {
@@ -1502,13 +1757,16 @@ class NavSelectorLeafDetailsComponent {
         this.el = el;
         this.navSelectorLeafDetailsPresenter = navSelectorLeafDetailsPresenter;
         effect(() => {
-            if (this.leaf().viewMoreDisplayed) {
-                setTimeout(() => this.viewMoreDelay.set(false), 150);
-            }
-            else {
-                this.viewMoreDelay.set(true);
-            }
-        }, { allowSignalWrites: true });
+            const viewMoreDisplayed = this.leaf().viewMoreDisplayed;
+            untracked(() => {
+                if (viewMoreDisplayed) {
+                    setTimeout(() => this.viewMoreDelay.set(false), 150);
+                }
+                else {
+                    this.viewMoreDelay.set(true);
+                }
+            });
+        });
     }
     ngAfterViewInit() {
         // scrollHeight = leaf + first details displayed when there is a limit
@@ -1571,6 +1829,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                     ], 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 NavSelectorPopoverItemComponent {
+    selected = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.9", type: NavSelectorPopoverItemComponent, isStandalone: true, selector: "ap-nav-selector-popover-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);background:none;border:none;cursor:pointer;color:var(--ref-color-grey-100)}:host:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:hover{background-color:var(--ref-color-electric-blue-10)}:host:active{background-color:var(--ref-color-electric-blue-20)}:host.nav-selector-popover__item--active{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}:host.selected{background:var(--ref-color-electric-blue-10)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-popover-item', standalone: true, template: '<ng-content/>', host: {
+                        '[class.selected]': 'selected()',
+                    }, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);background:none;border:none;cursor:pointer;color:var(--ref-color-grey-100)}:host:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:hover{background-color:var(--ref-color-electric-blue-10)}:host:active{background-color:var(--ref-color-electric-blue-20)}:host.nav-selector-popover__item--active{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}:host.selected{background:var(--ref-color-electric-blue-10)}\n"] }]
+        }] });
+
+const NavSelectorPopoverPlacement = {
+    RIGHT: 'right',
+    BOTTOM_START: 'bottom_start',
+};
+class NavSelectorPopoverComponent {
+    elementRef;
+    placement = input(NavSelectorPopoverPlacement.RIGHT);
+    popoverTitle = input();
+    offset = input({ mainAxis: 0, crossAxis: 0 });
+    items = contentChildren('item');
+    displayed = signal(false);
+    navSelectorPopoverDisplayed = this.displayed.asReadonly();
+    position = signal({
+        top: 0,
+        left: 0,
+    });
+    parentEl = signal(null);
+    mainAxisOffset = computed(() => this.offset().mainAxis ?? 0);
+    crossAxisOffset = computed(() => this.offset().crossAxis ?? 0);
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    display(parentEl) {
+        this.parentEl.set(parentEl);
+        this.displayed.set(true);
+        this.computePosition(parentEl);
+    }
+    hide() {
+        this.displayed.set(false);
+    }
+    toggle(parentEl) {
+        this.parentEl.set(parentEl);
+        this.displayed.update(value => !value);
+        if (this.displayed()) {
+            this.computePosition(parentEl);
+        }
+    }
+    onClick(event) {
+        // Prevent click to be caught from element behind the popover (real bug)
+        event.stopImmediatePropagation();
+        this.displayed.set(false);
+    }
+    computePosition(parentEl) {
+        // Needed to wait first render and have the total height of the popover
+        setTimeout(() => {
+            const parentRect = parentEl.nativeElement.getBoundingClientRect();
+            if (!parentRect.top && !parentRect.left) {
+                this.displayed.set(false);
+            }
+            else if (this.placement().startsWith('right')) {
+                this.computeRightPosition(parentEl);
+            }
+            else if (this.placement().startsWith('bottom')) {
+                this.computeBottomPosition(parentEl);
+            }
+        });
+    }
+    computeRightPosition(parentEl) {
+        const nativeEl = parentEl.nativeElement;
+        const rect = nativeEl.getBoundingClientRect();
+        let top = rect.top + (rect.height - nativeEl.offsetHeight) / 2 + this.crossAxisOffset();
+        const left = rect.left + rect.width + this.mainAxisOffset();
+        const elementEl = this.elementRef.nativeElement;
+        const popoverRect = elementEl.getBoundingClientRect();
+        if (top + elementEl.clientHeight > window.innerHeight) {
+            const popoverEl = document.querySelector('.nav-selector-popover');
+            const paddingBottom = parseInt(getComputedStyle(popoverEl).paddingBottom);
+            top = rect.top + rect.height - popoverRect.height + paddingBottom;
+        }
+        this.position.set({
+            top: top,
+            left: left,
+        });
+    }
+    computeBottomPosition(parentEl) {
+        const nativeEl = parentEl.nativeElement;
+        const rect = nativeEl.getBoundingClientRect();
+        let top = rect.top + rect.height + this.mainAxisOffset();
+        let left = rect.left + (rect.width - nativeEl.offsetWidth) / 2 + this.crossAxisOffset();
+        if (this.placement() === NavSelectorPopoverPlacement.BOTTOM_START) {
+            left = rect.left;
+        }
+        const elementEl = this.elementRef.nativeElement;
+        const popoverRect = elementEl.getBoundingClientRect();
+        if (top + elementEl.clientHeight > window.innerHeight) {
+            top -= popoverRect.height + rect.height;
+        }
+        this.position.set({
+            top: top,
+            left: left,
+        });
+    }
+    onAnyScroll() {
+        const parent = this.parentEl();
+        if (parent) {
+            this.computePosition(parent);
+        }
+    }
+    onFocusChanged(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.displayed.set(false);
+        }
+    }
+    onAnyClick(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.displayed.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorPopoverComponent, isStandalone: true, selector: "ap-nav-selector-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, popoverTitle: { classPropertyName: "popoverTitle", publicName: "popoverTitle", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "window:wheel": "onAnyScroll()", "window:focusin": "onFocusChanged($event)", "window:click": "onAnyClick($event)" }, properties: { "style.top.px": "position().top", "style.left.px": "position().left" } }, queries: [{ propertyName: "items", predicate: ["item"], isSignal: true }], ngImport: i0, template: "@if (displayed()) {\n    <div class=\"nav-selector-popover\">\n        @if (popoverTitle()) {\n            <div class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n        }\n\n        @let itemsNotNull = items();\n\n        @if (itemsNotNull?.length) {\n            @for (item of itemsNotNull; track item) {\n                <ap-nav-selector-popover-item>\n                    <ng-container [ngTemplateOutlet]=\"item\"/>\n                </ap-nav-selector-popover-item>\n            }\n        } @else {\n            <ng-content select=\"[item]\"/>\n        }\n    </div>\n}\n", styles: [":host{position:fixed;z-index:10}:host .nav-selector-popover{padding:var(--ref-spacing-xxs) 0;background:var(--ref-color-white);border-radius:var(--ref-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326}:host .nav-selector-popover__title{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm) var(--ref-spacing-xxxs);text-align:left;color:var(--ref-color-grey-100);font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.top.px]': 'position().top',
+                        '[style.left.px]': 'position().left',
+                        '(click)': 'onClick($event)',
+                        '(window:wheel)': 'onAnyScroll()',
+                        '(window:focusin)': 'onFocusChanged($event)',
+                        '(window:click)': 'onAnyClick($event)',
+                    }, imports: [NgTemplateOutlet, NavSelectorPopoverItemComponent], template: "@if (displayed()) {\n    <div class=\"nav-selector-popover\">\n        @if (popoverTitle()) {\n            <div class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n        }\n\n        @let itemsNotNull = items();\n\n        @if (itemsNotNull?.length) {\n            @for (item of itemsNotNull; track item) {\n                <ap-nav-selector-popover-item>\n                    <ng-container [ngTemplateOutlet]=\"item\"/>\n                </ap-nav-selector-popover-item>\n            }\n        } @else {\n            <ng-content select=\"[item]\"/>\n        }\n    </div>\n}\n", styles: [":host{position:fixed;z-index:10}:host .nav-selector-popover{padding:var(--ref-spacing-xxs) 0;background:var(--ref-color-white);border-radius:var(--ref-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326}:host .nav-selector-popover__title{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm) var(--ref-spacing-xxxs);text-align:left;color:var(--ref-color-grey-100);font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-bold)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
 class NavSelectorLeafPresenter {
     navSelectorState;
     expanded = computed(() => this.navSelectorState.expanded());
@@ -1581,7 +1974,7 @@ class NavSelectorLeafPresenter {
     constructor(navSelectorState) {
         this.navSelectorState = navSelectorState;
     }
-    onLeafClicked(leaf) {
+    selectLeaf(leaf) {
         this.navSelectorState.onLeafClicked(leaf);
     }
     onLeafToggleFolding(leaf) {
@@ -1609,11 +2002,8 @@ class NavSelectorLeafComponent {
     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);
+    focused = signal(false);
+    detailSelected = computed(() => this.leaf().details.some(({ selected }) => selected));
     aliasEl = viewChild('alias');
     aliasBoundedClientRect = signal({
         offsetWidth: 0,
@@ -1631,26 +2021,24 @@ class NavSelectorLeafComponent {
         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);
+        if (this.navSelectorLeafPresenter.isMultipleModeEnabled()) {
+            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`);
+            this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.leaf().details.length}px`);
             const el = this.aliasEl()?.nativeElement;
             if (el) {
                 this.aliasBoundedClientRect.set({
@@ -1662,74 +2050,42 @@ class NavSelectorLeafComponent {
             }
         });
         effect(() => {
-            if (this.leaf().folded) {
-                setTimeout(() => this.foldedWithDelay.set(true), 150);
-            }
-            else {
-                this.foldedWithDelay.set(false);
-            }
-        }, { allowSignalWrites: true });
+            const folded = this.leaf().folded;
+            untracked(() => {
+                if (folded) {
+                    setTimeout(() => this.foldedWithDelay.set(true), 150);
+                }
+                else {
+                    this.foldedWithDelay.set(false);
+                }
+            });
+        });
     }
     animationState = computed(() => (this.leaf().folded ? 'collapsed' : 'expanded'));
     maxHeight = signal('0px');
-    onClick($event) {
-        $event.stopImmediatePropagation();
-        this.navSelectorLeafPresenter.onLeafClicked(this.leaf());
+    onClick(event) {
+        event.stopImmediatePropagation();
+        this.navSelectorLeafPresenter.selectLeaf(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());
+        this.navSelectorLeafPresenter.selectLeaf(this.leaf());
     }
-    onSpaceOrEnterPressed($event) {
-        $event.stopImmediatePropagation();
+    onSpaceOrEnterPressed(event) {
+        event.stopImmediatePropagation();
         if (document.activeElement === this.el.nativeElement.querySelector('.nav-selector-leaf')) {
             if (this.leaf().foldable) {
-                this.toggleFolding($event);
+                this.toggleFolding(event);
             }
             else {
-                this.navSelectorLeafPresenter.onLeafClicked(this.leaf());
+                this.navSelectorLeafPresenter.selectLeaf(this.leaf());
             }
         }
     }
@@ -1741,27 +2097,8 @@ class NavSelectorLeafComponent {
         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: [
+    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: { "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 }], ngImport: i0, template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n    <div\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [attr.aria-selected]=\"leaf().selected\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\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        <a\n            class=\"standalone only-button\"\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\n        @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n        @if (actionProjection?.length) {\n            <ap-symbol\n                class=\"actions-menu\"\n                size=\"sm\"\n                symbolId=\"more\"\n                [tabindex]=\"leaf().accessibility.tabIndex\"\n                [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n                [apNavSelectorPopoverTrigger]=\"popover\"\n                [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n            <ap-nav-selector-popover\n                #popover\n                placement=\"bottom_start\">\n                @for (action of actionProjection; track action) {\n                    <ng-template #item>\n                        <ng-container\n                            [ngTemplateOutlet]=\"action\"\n                            [ngTemplateOutletContext]=\"{\n                                uid: leaf().uid\n                            }\" />\n                    </ng-template>\n                }\n            </ap-nav-selector-popover>\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        @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    </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\n                [details]=\"leaf().details\"\n                [leaf]=\"leaf()\" />\n        }\n    </div>\n} @else {\n    <div\n        #minified\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n        [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n        [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected || detailSelected()\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\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        }\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                        class=\"counter-override\"\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\n        <ap-nav-selector-popover\n            #minifiedPopover\n            [popoverTitle]=\"leaf().alias\"\n            [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\"\n            placement=\"right\">\n            @for (detail of leaf().details; track detail.uid) {\n                <ap-nav-selector-popover-item item [selected]=\"detail.selected\">\n                    <ap-nav-selector-leaf-detail\n                        [embedded]=\"true\"\n                        [detail]=\"detail\" />\n                </ap-nav-selector-popover-item>\n            }\n        </ap-nav-selector-popover>\n    </div>\n}\n", styles: [":host{display:flex;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 .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}: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:none;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 .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{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):not(.feature-locked):not(.multiple-mode.token-error){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):focus-visible{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):not(.feature-locked):not(.multiple-mode.token-error):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected .caption{overflow:hidden;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 .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:focus-visible{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):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{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:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-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 .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;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{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)}\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: 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"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected"] }], 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)
              */
@@ -1791,18 +2128,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         NavSelectorLeafDetailsComponent,
                         CheckboxComponent,
                         TooltipDirective,
-                        MatMenu,
-                        MatMenuTrigger,
-                        MatMenuItem,
                         NavSelectorLeafDetailComponent,
                         NavSelectorLeafDetailComponent,
                         NgTemplateOutlet,
                         TreeNodeAccessibilityDirective,
+                        NavSelectorPopoverComponent,
+                        NavSelectorPopoverTriggerDirective,
+                        NavSelectorPopoverItemComponent,
                     ], 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: [
@@ -1824,7 +2159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                                 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"] }]
+                    ], template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n    <div\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [attr.aria-selected]=\"leaf().selected\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\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        <a\n            class=\"standalone only-button\"\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\n        @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n        @if (actionProjection?.length) {\n            <ap-symbol\n                class=\"actions-menu\"\n                size=\"sm\"\n                symbolId=\"more\"\n                [tabindex]=\"leaf().accessibility.tabIndex\"\n                [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n                [apNavSelectorPopoverTrigger]=\"popover\"\n                [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n            <ap-nav-selector-popover\n                #popover\n                placement=\"bottom_start\">\n                @for (action of actionProjection; track action) {\n                    <ng-template #item>\n                        <ng-container\n                            [ngTemplateOutlet]=\"action\"\n                            [ngTemplateOutletContext]=\"{\n                                uid: leaf().uid\n                            }\" />\n                    </ng-template>\n                }\n            </ap-nav-selector-popover>\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        @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    </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\n                [details]=\"leaf().details\"\n                [leaf]=\"leaf()\" />\n        }\n    </div>\n} @else {\n    <div\n        #minified\n        class=\"nav-selector-leaf\"\n        apTooltipPosition=\"right\"\n        [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n        [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n        [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n        [class.feature-locked]=\"leaf().displayFeatureLocked\"\n        [class.selected]=\"leaf().selected || detailSelected()\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.disabled]=\"leaf().disabled\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\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        }\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                        class=\"counter-override\"\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\n        <ap-nav-selector-popover\n            #minifiedPopover\n            [popoverTitle]=\"leaf().alias\"\n            [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\"\n            placement=\"right\">\n            @for (detail of leaf().details; track detail.uid) {\n                <ap-nav-selector-popover-item item [selected]=\"detail.selected\">\n                    <ap-nav-selector-leaf-detail\n                        [embedded]=\"true\"\n                        [detail]=\"detail\" />\n                </ap-nav-selector-popover-item>\n            }\n        </ap-nav-selector-popover>\n    </div>\n}\n", styles: [":host{display:flex;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 .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}: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:none;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 .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{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):not(.feature-locked):not(.multiple-mode.token-error){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):focus-visible{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):not(.feature-locked):not(.multiple-mode.token-error):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected .caption{overflow:hidden;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 .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:focus-visible{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):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{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:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-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 .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;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{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)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafPresenter }] });
 
 class NavSelectorGroupPresenter {
@@ -1885,7 +2220,7 @@ class NavSelectorGroupComponent {
         this.el = el;
         this.navSelectorGroupPresenter = navSelectorGroupPresenter;
         afterNextRender(() => {
-            this.maxHeight.set(`${this.el.nativeElement.scrollHeight}px`);
+            this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.group().children.length}px`);
             const el = this.aliasEl()?.nativeElement;
             if (el) {
                 this.aliasBoundedClientRect.set({
@@ -1897,19 +2232,22 @@ class NavSelectorGroupComponent {
             }
         });
         effect(() => {
-            if (this.group().folded) {
-                setTimeout(() => this.foldedWithDelay.set(true), 150);
-            }
-            else {
-                this.foldedWithDelay.set(false);
-            }
-        }, { allowSignalWrites: true });
+            const folded = this.group().folded;
+            untracked(() => {
+                if (folded) {
+                    setTimeout(() => this.foldedWithDelay.set(true), 150);
+                }
+                else {
+                    this.foldedWithDelay.set(false);
+                }
+            });
+        });
     }
     maxHeight = signal('0px');
-    onKeydownSpaceOrEnter($event) {
+    onKeydownSpaceOrEnter(event) {
         // Prevent to toggle folding when focus is on the checkbox
         if (document.activeElement === this.el.nativeElement.querySelector('.content')) {
-            this.toggleFolding($event);
+            this.toggleFolding(event);
         }
         else {
             this.navSelectorGroupPresenter.onGroupSelected(this.group());
@@ -1928,7 +2266,7 @@ class NavSelectorGroupComponent {
         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: [
+    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        (click)=\"toggleFolding($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            [symbolId]=\"foldSymbol()\" />\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        [class.token-invalid]=\"group().displayTokenInvalid\"\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                        class=\"avatar-sample\"\n                        [size]=\"16\"\n                        [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                        [showInitials]=\"pictureUrlSample.initial\" />\n                }\n\n                <div class=\"status\">\n                    @if (group().displayCounter) {\n                        <ap-counter\n                            class=\"counter-override\"\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 ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}: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-visible{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 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:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}: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 .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px}\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)
              */
@@ -1982,7 +2320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                                 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"] }]
+                    ], 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        (click)=\"toggleFolding($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            [symbolId]=\"foldSymbol()\" />\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        [class.token-invalid]=\"group().displayTokenInvalid\"\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                        class=\"avatar-sample\"\n                        [size]=\"16\"\n                        [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                        [showInitials]=\"pictureUrlSample.initial\" />\n                }\n\n                <div class=\"status\">\n                    @if (group().displayCounter) {\n                        <ap-counter\n                            class=\"counter-override\"\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 ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}: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-visible{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 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:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}: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 .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorGroupPresenter }] });
 
 class NavSelectorCategoryPresenter {
@@ -2021,19 +2359,22 @@ class NavSelectorCategoryComponent {
     constructor(el, navSelectorCategoryPresenter) {
         this.el = el;
         this.navSelectorCategoryPresenter = navSelectorCategoryPresenter;
-        afterNextRender(() => this.maxHeight.set(`${this.el.nativeElement.scrollHeight}px`));
+        afterNextRender(() => this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.category().children.length}px`));
         effect(() => {
-            if (this.category().folded) {
-                setTimeout(() => this.foldedWithDelay.set(true), 150);
-            }
-            else {
-                this.foldedWithDelay.set(false);
-            }
-        }, { allowSignalWrites: true });
+            const folded = this.category().folded;
+            untracked(() => {
+                if (folded) {
+                    setTimeout(() => this.foldedWithDelay.set(true), 150);
+                }
+                else {
+                    this.foldedWithDelay.set(false);
+                }
+            });
+        });
     }
     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: [
+    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)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <span class=\"caption\">{{ category().alias }}</span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [symbolId]=\"foldSymbol()\" />\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:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}: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 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)
              */
@@ -2079,7 +2420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                                 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"] }]
+                    ], template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n    <div\n        class=\"content\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <span class=\"caption\">{{ category().alias }}</span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [symbolId]=\"foldSymbol()\" />\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:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}: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 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;
@@ -2090,6 +2431,7 @@ class NavSelectorComponent {
     translatedTexts = input.required();
     multipleModeEnabled = input(false);
     detailsDisplayedLimit = input(Number.MAX_SAFE_INTEGER);
+    embedded = input(false);
     /**
      * If true, the nav selector will be expanded by default. Even if the width of the screen is smaller than 1280px.
      */
@@ -2105,55 +2447,80 @@ class NavSelectorComponent {
         this.navSelectorState = navSelectorState;
         this.el = el;
         navSelectorState.registerOnSelectedUidsChange(selectedUids => {
-            this.selectedEntryUids.set(selectedUids);
+            const isInit = !!this.navSelectorState.entries().length;
+            if (isInit) {
+                this.selectedEntryUids.set(selectedUids);
+            }
         });
         afterNextRender(() => {
-            if (!this.forceExpanded() && document.body.clientWidth < 1200) {
+            if (!this.embedded() && !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 });
+            const multipleModeEnabled = this.multipleModeEnabled();
+            const newEntries = this.navSelectorEntries();
+            untracked(() => {
+                this.navSelectorState.updateMultiModeEnabled(multipleModeEnabled);
+                if (!this.navSelectorState.entries().length) {
+                    this.navSelectorState.initEntries(newEntries, this.selectedEntryUids(), this.detailsDisplayedLimit());
+                }
+                else {
+                    this.navSelectorState.updateEntries(newEntries, this.selectedEntryUids(), this.detailsDisplayedLimit());
+                }
+            });
+        });
         effect(() => {
-            this.navSelectorState.updateDetailsDisplayedLimit(this.detailsDisplayedLimit());
-        }, { allowSignalWrites: true });
+            const detailsDisplayedLimit = this.detailsDisplayedLimit();
+            untracked(() => this.navSelectorState.updateDetailsDisplayedLimit(detailsDisplayedLimit));
+        });
         const leafActionProjectionEffect = effect(() => {
-            if (this.leafActionProjection()) {
-                this.navSelectorState.updateLeafAction(this.leafActionProjection());
-                leafActionProjectionEffect.destroy();
-            }
-        }, { manualCleanup: true, allowSignalWrites: true });
+            const leafActionProjection = this.leafActionProjection();
+            untracked(() => {
+                if (leafActionProjection) {
+                    this.navSelectorState.updateLeafAction(this.leafActionProjection());
+                    leafActionProjectionEffect.destroy();
+                }
+            });
+        }, { manualCleanup: true });
         effect(() => {
-            this.navSelectorState.onSelectionChange(this.selectedEntryUids());
-        }, { allowSignalWrites: true });
+            const selectedEntryUids = this.selectedEntryUids();
+            const isInit = !!this.navSelectorState.entries().length;
+            untracked(() => isInit && this.navSelectorState.onSelectionChange(selectedEntryUids));
+        });
         effect(() => {
-            this.navSelectorState.updateTexts(this.translatedTexts());
-        }, { allowSignalWrites: true });
+            const translatedTexts = this.translatedTexts();
+            untracked(() => this.navSelectorState.updateTexts(translatedTexts));
+        });
     }
-    onArrowDown($event) {
+    onMinifiedSearchClicked() {
+        this.navSelectorState.toggleExpanded();
+        setTimeout(() => this.el.nativeElement.querySelector('input').focus());
+    }
+    onArrowDown(event) {
         if (this.el.nativeElement.querySelector('.nav-selector__content').contains(document.activeElement)) {
-            $event.stopImmediatePropagation();
+            event.stopImmediatePropagation();
             this.navSelectorState.onArrowDown();
             setTimeout(() => this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus());
         }
     }
-    onArrowUp($event) {
+    onArrowUp(event) {
         if (this.el.nativeElement.querySelector('.nav-selector__content').contains(document.activeElement)) {
-            $event.stopImmediatePropagation();
+            event.stopImmediatePropagation();
             this.navSelectorState.onArrowUp();
             setTimeout(() => this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus());
         }
     }
-    TemplateRef = TemplateRef;
+    onWindowResize() {
+        if (window.innerWidth < 1280) {
+            this.navSelectorState.minify();
+        }
+    }
     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: [
+    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 }, embedded: { classPropertyName: "embedded", publicName: "embedded", 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)", "window:resize": "onWindowResize()" }, 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()\" [class.embedded]=\"embedded()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    @if (navSelectorState.expandedAfterDelay()) {\n        <div class=\"nav-selector__header\">\n            @if (!embedded()) {\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\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            [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n            role=\"tree\">\n            @for (entry of navSelectorState.entries(); 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)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        </div>\n\n        <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n            @for (entry of navSelectorState.entries(); 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:100%;max-width:224px;min-width:224px}@media only screen and (min-device-width: 1400px){:host{max-width:250px;min-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;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}: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;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left: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 translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@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__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}: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' })),
+                state('minified', style({ width: '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
@@ -2178,16 +2545,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         role: 'tree',
                         '(keydown.arrowDown)': 'onArrowDown($event)',
                         '(keydown.arrowUp)': 'onArrowUp($event)',
+                        '(window:resize)': 'onWindowResize()',
                     }, animations: [
                         trigger('expand', [
                             state('expanded', style({ width: '100%' })),
-                            state('minified', style({ with: '64px' })),
+                            state('minified', style({ width: '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"] }]
+                    ], template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    @if (navSelectorState.expandedAfterDelay()) {\n        <div class=\"nav-selector__header\">\n            @if (!embedded()) {\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\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            [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n            role=\"tree\">\n            @for (entry of navSelectorState.entries(); 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)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        </div>\n\n        <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n            @for (entry of navSelectorState.entries(); 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:100%;max-width:224px;min-width:224px}@media only screen and (min-device-width: 1400px){:host{max-width:250px;min-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;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}: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;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left: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 translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@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__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}: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 }] });
 
 /**