@agorapulse/ui-components 18.0.23 → 18.0.24

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

@@ -1,18 +1,63 @@
+import * as i1 from '@agorapulse/ui-components/directives';
+import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
+import * as i0 from '@angular/core';
+import { input, inject, Component, afterRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, contentChildren, viewChild, afterNextRender, model, contentChild, output } from '@angular/core';
 import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
 import { SymbolComponent, withSymbols, apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apFolder, apArrowExpand, apArrowReduce, apSearch } from '@agorapulse/ui-symbol';
 import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
 import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, afterRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, Component, HostBinding, contentChildren, viewChild, afterNextRender, model, contentChild, output } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
 import { AvatarComponent } from '@agorapulse/ui-components/avatar';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
 import { CounterComponent } from '@agorapulse/ui-components/counter';
-import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
 import { apMore } from '@agorapulse/ui-symbol/icons';
 
+class NavSelectorPopoverItemComponent {
+    selected = input(false);
+    disabled = input(false);
+    name = input.required();
+    ariaLabel = input(undefined);
+    baseButtonDirective = inject(BaseButtonDirective, { self: true });
+    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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()", "class.disabled": "disabled()" } }, hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `
+        <button
+            #buttonElement
+            type="button"
+            role="button"
+            [disabled]="disabled()"
+            [name]="name()"
+            [attr.data-test]="baseButtonDirective.hostDataTest ?? name()"
+            [attr.id]="baseButtonDirective.hostId"
+            [attr.aria-label]="ariaLabel() || null"
+            [attr.aria-disabled]="disabled()?.toString()">
+            <ng-content />
+        </button>
+    `, isInline: true, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);background:none;border:none;color:var(--ref-color-grey-100);overflow:hidden;text-overflow:ellipsis;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}:host button{all:unset;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);flex-grow:1}:host button:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).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:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled{cursor:auto}\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, hostDirectives: [BaseButtonDirective], template: `
+        <button
+            #buttonElement
+            type="button"
+            role="button"
+            [disabled]="disabled()"
+            [name]="name()"
+            [attr.data-test]="baseButtonDirective.hostDataTest ?? name()"
+            [attr.id]="baseButtonDirective.hostId"
+            [attr.aria-label]="ariaLabel() || null"
+            [attr.aria-disabled]="disabled()?.toString()">
+            <ng-content />
+        </button>
+    `, host: {
+                        '[class.selected]': 'selected()',
+                        '[class.disabled]': 'disabled()',
+                    }, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);background:none;border:none;color:var(--ref-color-grey-100);overflow:hidden;text-overflow:ellipsis;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}:host button{all:unset;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);flex-grow:1}:host button:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).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:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled{cursor:auto}\n"] }]
+        }] });
+
 class TreeNodeAccessibilityDirective {
     apTreeNodeAccessibility = input.required();
     constructor(el, renderer) {
@@ -297,6 +342,305 @@ class NavSelectorAccessibility {
     }
 }
 
+/**
+ * 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 (multipleMode) {
+        return !leaf.disabled && !leaf.displayTokenInvalid && !leaf.displayFeatureLocked;
+    }
+    return !leaf.disabled;
+};
+
+/**
+ * Class to handle the folding and unfolding of nav selector entries.
+ */
+class NavSelectorFolding {
+    /**
+     * Unfolds all parents of the entry with the given uid until the root.
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to unfold parents for
+     * @param options options for folding operations
+     */
+    static unfoldParents(entries, entryUid, options) {
+        return this.unfoldParentsOfEntry(entries, entryUid, options).entries;
+    }
+    /**
+     * Toggle the folding state of an entry.
+     *
+     * @see {@link NavSelectorFolding.fold} and {@link NavSelectorFolding.unfold} for more information on folding and unfolding.
+     *
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to toggle
+     * @param options options for folding operations
+     */
+    static toggleFolding(entries, entryUid, options) {
+        return this.toggleEntryFolding(entries, entryUid, options);
+    }
+    /**
+     * Fold an entry.
+     *
+     * Set unfocusable on all children of the folded entry.
+     * Compute whenever the counter and token invalid should be displayed on groups and leaves.
+     *
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to fold
+     * @param options options for folding operations
+     */
+    static fold(entries, entryUid, options) {
+        return this.foldEntry(entries, entryUid, options);
+    }
+    /**
+     * Unfold an entry.
+     *
+     * Set focusable on all children of the folded entry.
+     * Compute whenever the counter and token invalid should be displayed on groups and leaves.
+     *
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to unfold
+     * @param options options for folding operations
+     */
+    static unfold(entries, entryUid, options) {
+        return this.unfoldEntry(entries, entryUid, options);
+    }
+    static toggleEntryFolding(entries, entryUid, options, parentFolded = false) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryACategory(entry)) {
+                if (entry.uid === entryUid) {
+                    const folded = !entry.folded;
+                    if (folded) {
+                        return this.foldCategory(entry, options);
+                    }
+                    else {
+                        return this.unfoldCategory(entry, options);
+                    }
+                }
+                return {
+                    ...entry,
+                    children: this.toggleEntryFolding(entry.children, entryUid, options, entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryAGroup(entry)) {
+                if (entry.uid === entryUid) {
+                    const folded = !entry.folded;
+                    if (folded) {
+                        return this.foldGroup(entry, options);
+                    }
+                    else {
+                        return this.unfoldGroup(entry, options);
+                    }
+                }
+                return {
+                    ...entry,
+                    children: this.toggleEntryFolding(entry.children, entryUid, options, parentFolded || entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === entryUid) {
+                    const folded = !entry.folded;
+                    if (folded) {
+                        return this.foldLeaf(entry, options.minified);
+                    }
+                    else {
+                        return this.unfoldLeaf(entry, options.minified);
+                    }
+                }
+                return {
+                    ...entry,
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode: options.multipleMode }),
+                };
+            }
+            return { ...entry, focusable: !parentFolded };
+        });
+    }
+    static foldEntry(entries, entryUid, options, parentFolded = false) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryACategory(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.foldCategory(entry, options);
+                }
+                return {
+                    ...entry,
+                    children: this.foldEntry(entry.children, entryUid, options, entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryAGroup(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.foldGroup(entry, options);
+                }
+                return {
+                    ...entry,
+                    focusable: !parentFolded,
+                    children: this.foldEntry(entry.children, entryUid, options, parentFolded || entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.foldLeaf(entry, options.minified);
+                }
+                return {
+                    ...entry,
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode: options.multipleMode }),
+                };
+            }
+            return { ...entry, focusable: !parentFolded };
+        });
+    }
+    static unfoldEntry(entries, entryUid, options, parentFolded = false) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryACategory(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.unfoldCategory(entry, options);
+                }
+                return {
+                    ...entry,
+                    children: this.unfoldEntry(entry.children, entryUid, options, entry.folded),
+                };
+            }
+            if (isInternalNavSelectorEntryAGroup(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.unfoldGroup(entry, options);
+                }
+                return {
+                    ...entry,
+                    children: this.unfoldEntry(entry.children, entryUid, options, parentFolded || entry.folded),
+                    focusable: !parentFolded,
+                };
+            }
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (entry.uid === entryUid) {
+                    return this.unfoldLeaf(entry, options.minified);
+                }
+                return {
+                    ...entry,
+                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode: options.multipleMode }),
+                };
+            }
+            return { ...entry, focusable: !parentFolded };
+        });
+    }
+    static foldCategory(category, options) {
+        return {
+            ...category,
+            folded: true,
+            children: this.foldEntry(category.children, category.uid, options, true),
+        };
+    }
+    static unfoldCategory(category, options) {
+        return {
+            ...category,
+            folded: false,
+            children: this.unfoldEntry(category.children, category.uid, options, false),
+        };
+    }
+    static foldGroup(group, options) {
+        return {
+            ...group,
+            folded: true,
+            children: this.foldEntry(group.children, group.uid, options, true),
+            displayCounter: !!group.counter,
+            displayTokenInvalid: group.children.some(({ displayTokenInvalid }) => displayTokenInvalid),
+        };
+    }
+    static unfoldGroup(group, options) {
+        return {
+            ...group,
+            folded: false,
+            children: this.unfoldEntry(group.children, group.uid, options, false),
+            displayCounter: false,
+            displayTokenInvalid: false,
+        };
+    }
+    static foldLeaf(leaf, minified) {
+        if (!leaf.foldable || minified) {
+            return leaf;
+        }
+        return {
+            ...leaf,
+            displayCounter: leaf.counterDisplayable,
+            folded: true,
+            details: leaf.details.map(detail => ({ ...detail, focusable: false })),
+        };
+    }
+    static unfoldLeaf(leaf, minified) {
+        if (!leaf.foldable || minified) {
+            return leaf;
+        }
+        return {
+            ...leaf,
+            displayCounter: false,
+            folded: false,
+            details: leaf.details.map((detail, idx) => ({
+                ...detail,
+                focusable: idx < leaf.viewMoreDetailsDisplayedLimit && !detail.displayError,
+            })),
+        };
+    }
+    /**
+     * Unfolds all parents of the entry with the given uid until the root.
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to unfold parents for
+     * @param options options for folding operations
+     */
+    static unfoldParentsOfEntry(entries, entryUid, options) {
+        let found = false;
+        const newEntries = entries.map(entry => {
+            if (isInternalNavSelectorEntryACategory(entry)) {
+                const entryFound = entry.children.some(({ uid }) => uid === entryUid);
+                if (entryFound) {
+                    found = true;
+                    return this.unfoldCategory(entry, options);
+                }
+                const result = this.unfoldParentsOfEntry(entry.children, entryUid, options);
+                found ||= result.found;
+                if (found) {
+                    return {
+                        ...entry,
+                        children: result.entries,
+                        folded: false,
+                        focusable: true,
+                    };
+                }
+            }
+            else if (isInternalNavSelectorEntryAGroup(entry)) {
+                const entryFound = entry.children.some(({ uid }) => uid === entryUid);
+                if (entryFound) {
+                    found = true;
+                    return { ...this.unfoldGroup(entry, options), focusable: true };
+                }
+                const result = this.unfoldParentsOfEntry(entry.children, entryUid, options);
+                found ||= result.found;
+                if (found) {
+                    return {
+                        ...entry,
+                        children: result.entries,
+                        folded: false,
+                        focusable: true,
+                    };
+                }
+            }
+            else if (isInternalNavSelectorEntryALeaf(entry)) {
+                const entryFound = entry.details.some(({ uid }) => uid === entryUid);
+                if (entryFound) {
+                    found = true;
+                    return { ...this.unfoldLeaf(entry, options.minified), focusable: true };
+                }
+            }
+            return entry;
+        });
+        return { found, entries: newEntries };
+    }
+}
+
 /**
  * NavSelectorMultiSelect is a utility class that provides methods to select an entry in multiple mode.
  */
@@ -642,9 +986,10 @@ class NavSelectorBuilder {
      */
     static build(entries, selectedEntryUid, detailsDisplayedLimit) {
         this.structureChecker(entries);
-        const builtEntries = this.buildEntries(entries, false, 1, detailsDisplayedLimit);
+        let builtEntries = this.buildEntries(entries, false, 1, detailsDisplayedLimit);
         if (selectedEntryUid) {
-            return NavSelectorSingleSelect.select(builtEntries, selectedEntryUid);
+            builtEntries = NavSelectorSingleSelect.select(builtEntries, selectedEntryUid);
+            builtEntries = NavSelectorFolding.unfoldParents(builtEntries, selectedEntryUid, { multipleMode: false, minified: false });
         }
         return builtEntries;
     }
@@ -660,6 +1005,7 @@ class NavSelectorBuilder {
         if (selectedEntryUids) {
             for (const selectedEntryUid of selectedEntryUids) {
                 builtEntries = NavSelectorMultiSelect.selectInMultipleMode(builtEntries, selectedEntryUid);
+                builtEntries = NavSelectorFolding.unfoldParents(builtEntries, selectedEntryUid, { multipleMode: false, minified: false });
             }
         }
         return builtEntries;
@@ -878,25 +1224,6 @@ class NavSelectorBuilder {
     }
 }
 
-/**
- * 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 (multipleMode) {
-        return !leaf.disabled && !leaf.displayTokenInvalid && !leaf.displayFeatureLocked;
-    }
-    return !leaf.disabled;
-};
-
 /**
  * NavSelectorFilter is a utility class that provides methods to filter entries
  */
@@ -1034,226 +1361,6 @@ class NavSelectorFilter {
     }
 }
 
-/**
- * Class to handle the folding and unfolding of nav selector entries.
- */
-class NavSelectorFolding {
-    /**
-     * Toggle the folding state of an entry.
-     *
-     * @see {@link NavSelectorFolding.fold} and {@link NavSelectorFolding.unfold} for more information on folding and unfolding.
-     *
-     * @param entries nav selector entries
-     * @param entryUid the entry uid to toggle
-     * @param 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, multipleMode, minified) {
-        return this.toggleEntryFolding(entries, entryUid, multipleMode, minified);
-    }
-    /**
-     * Fold an entry.
-     *
-     * Set unfocusable on all children of the folded entry.
-     * Compute whenever the counter and token invalid should be displayed on groups and leaves.
-     *
-     * @param entries nav selector entries
-     * @param entryUid the entry uid to fold
-     * @param 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, multipleMode, minified) {
-        return this.foldEntry(entries, entryUid, multipleMode, minified);
-    }
-    /**
-     * Unfold an entry.
-     *
-     * Set focusable on all children of the folded entry.
-     * Compute whenever the counter and token invalid should be displayed on groups and leaves.
-     *
-     * @param entries nav selector entries
-     * @param entryUid the entry uid to unfold
-     * @param 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, multipleMode, minified) {
-        return this.unfoldEntry(entries, entryUid, multipleMode, minified);
-    }
-    static toggleEntryFolding(entries, entryUid, multipleMode, minified, parentFolded = false) {
-        return entries.map(entry => {
-            if (isInternalNavSelectorEntryACategory(entry)) {
-                if (entry.uid === entryUid) {
-                    const folded = !entry.folded;
-                    if (folded) {
-                        return this.foldCategory(entry, minified);
-                    }
-                    else {
-                        return this.unfoldCategory(entry, minified);
-                    }
-                }
-                return {
-                    ...entry,
-                    children: this.toggleEntryFolding(entry.children, entryUid, minified, entry.folded),
-                };
-            }
-            if (isInternalNavSelectorEntryAGroup(entry)) {
-                if (entry.uid === entryUid) {
-                    const folded = !entry.folded;
-                    if (folded) {
-                        return this.foldGroup(entry, multipleMode, minified);
-                    }
-                    else {
-                        return this.unfoldGroup(entry, multipleMode, minified);
-                    }
-                }
-                return {
-                    ...entry,
-                    children: this.toggleEntryFolding(entry.children, entryUid, multipleMode, minified, parentFolded || entry.folded),
-                };
-            }
-            if (isInternalNavSelectorEntryALeaf(entry)) {
-                if (entry.uid === entryUid) {
-                    const folded = !entry.folded;
-                    if (folded) {
-                        return this.foldLeaf(entry, minified);
-                    }
-                    else {
-                        return this.unfoldLeaf(entry, minified);
-                    }
-                }
-                return {
-                    ...entry,
-                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode }),
-                };
-            }
-            return { ...entry, focusable: !parentFolded };
-        });
-    }
-    static foldEntry(entries, entryUid, multipleMode, minified, parentFolded = false) {
-        return entries.map(entry => {
-            if (isInternalNavSelectorEntryACategory(entry)) {
-                if (entry.uid === entryUid) {
-                    return this.foldCategory(entry, minified);
-                }
-                return {
-                    ...entry,
-                    children: this.foldEntry(entry.children, entryUid, minified, entry.folded),
-                };
-            }
-            if (isInternalNavSelectorEntryAGroup(entry)) {
-                if (entry.uid === entryUid) {
-                    return this.foldGroup(entry, multipleMode, minified);
-                }
-                return {
-                    ...entry,
-                    focusable: !parentFolded,
-                    children: this.foldEntry(entry.children, entryUid, minified, parentFolded || entry.folded),
-                };
-            }
-            if (isInternalNavSelectorEntryALeaf(entry)) {
-                if (entry.uid === entryUid) {
-                    return this.foldLeaf(entry, minified);
-                }
-                return {
-                    ...entry,
-                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode }),
-                };
-            }
-            return { ...entry, focusable: !parentFolded };
-        });
-    }
-    static unfoldEntry(entries, entryUid, multipleMode, minified, parentFolded = false) {
-        return entries.map(entry => {
-            if (isInternalNavSelectorEntryACategory(entry)) {
-                if (entry.uid === entryUid) {
-                    return this.unfoldCategory(entry, minified);
-                }
-                return {
-                    ...entry,
-                    children: this.unfoldEntry(entry.children, entryUid, multipleMode, minified, entry.folded),
-                };
-            }
-            if (isInternalNavSelectorEntryAGroup(entry)) {
-                if (entry.uid === entryUid) {
-                    return this.unfoldGroup(entry, multipleMode, minified);
-                }
-                return {
-                    ...entry,
-                    children: this.unfoldEntry(entry.children, entryUid, multipleMode, minified, parentFolded || entry.folded),
-                    focusable: !parentFolded,
-                };
-            }
-            if (isInternalNavSelectorEntryALeaf(entry)) {
-                if (entry.uid === entryUid) {
-                    return this.unfoldLeaf(entry, minified);
-                }
-                return {
-                    ...entry,
-                    focusable: isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded, multipleMode }),
-                };
-            }
-            return { ...entry, focusable: !parentFolded };
-        });
-    }
-    static foldCategory(category, minified) {
-        return {
-            ...category,
-            folded: true,
-            children: this.foldEntry(category.children, category.uid, minified, true),
-        };
-    }
-    static unfoldCategory(category, minified) {
-        return {
-            ...category,
-            folded: false,
-            children: this.unfoldEntry(category.children, category.uid, minified, false),
-        };
-    }
-    static foldGroup(group, multipleMode, minified) {
-        return {
-            ...group,
-            folded: true,
-            children: this.foldEntry(group.children, group.uid, multipleMode, minified, true),
-            displayCounter: !!group.counter,
-            displayTokenInvalid: group.children.some(({ displayTokenInvalid }) => displayTokenInvalid),
-        };
-    }
-    static unfoldGroup(group, multipleMode, minified) {
-        return {
-            ...group,
-            folded: false,
-            children: this.unfoldEntry(group.children, group.uid, multipleMode, minified, false),
-            displayCounter: false,
-            displayTokenInvalid: false,
-        };
-    }
-    static foldLeaf(leaf, minified) {
-        if (!leaf.foldable || minified) {
-            return leaf;
-        }
-        return {
-            ...leaf,
-            displayCounter: leaf.counterDisplayable,
-            folded: true,
-            details: leaf.details.map(detail => ({ ...detail, focusable: false })),
-        };
-    }
-    static unfoldLeaf(leaf, minified) {
-        if (!leaf.foldable || minified) {
-            return leaf;
-        }
-        return {
-            ...leaf,
-            displayCounter: false,
-            folded: false,
-            details: leaf.details.map((detail, idx) => ({
-                ...detail,
-                focusable: idx < leaf.viewMoreDetailsDisplayedLimit,
-            })),
-        };
-    }
-}
-
 /**
  * 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.
@@ -1361,7 +1468,11 @@ class NavSelectorMinifying {
     static compute(entries, multipleMode, minified, parent = null) {
         return entries.map(entry => {
             if (isInternalNavSelectorEntryALeafDetails(entry)) {
-                return { ...entry, focusable: !minified };
+                return {
+                    ...entry,
+                    focusable: !minified,
+                    accessibility: { ...entry.accessibility, tabIndex: minified ? -1 : entry.accessibility.tabIndex },
+                };
             }
             if (isInternalNavSelectorEntryANode(entry)) {
                 return {
@@ -1490,6 +1601,7 @@ class NavSelectorState {
         title: '',
         only: '',
         tokenInvalid: '',
+        groupTokenInvalid: '',
         featureLocked: '',
         searchPlaceholder: '',
         noResults: '',
@@ -1546,7 +1658,7 @@ class NavSelectorState {
         });
     }
     onGroupToggleFolding(group) {
-        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, group.uid, this.multipleModeEnabled(), !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, group.uid, this.getFoldingOptions()));
     }
     onNodeSelect(node) {
         this.entries.update(entries => NavSelectorMultiSelect.selectInMultipleMode(entries, node.uid));
@@ -1563,7 +1675,7 @@ class NavSelectorState {
         }
     }
     onLeafToggleFolding(leaf) {
-        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, leaf.uid, this.multipleModeEnabled(), !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.toggleFolding(entries, leaf.uid, this.getFoldingOptions()));
     }
     onLeafDetailClicked(leafDetail) {
         this.entries.update(entries => NavSelectorSingleSelect.select(entries, leafDetail.uid));
@@ -1594,6 +1706,11 @@ class NavSelectorState {
             this.toggleExpanded();
         }
     }
+    forceMinify() {
+        this.expanded.set(false);
+        this.expandedAfterDelay.set(this.expanded());
+        this.entries.update(entries => NavSelectorAccessibility.resetFocus(NavSelectorMinifying.minify(entries, this.multipleModeEnabled())));
+    }
     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())) {
@@ -1640,14 +1757,20 @@ class NavSelectorState {
             return [];
         });
     }
+    getFoldingOptions() {
+        return {
+            multipleMode: this.multipleModeEnabled(),
+            minified: !this.expanded(),
+        };
+    }
     updateLeafAction(leafActionProjection) {
         this.leafActionProjection.set(leafActionProjection);
     }
     fold(entry) {
-        this.entries.update(entries => NavSelectorFolding.fold(entries, entry.uid, this.multipleModeEnabled(), !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.fold(entries, entry.uid, this.getFoldingOptions()));
     }
     unfold(entry) {
-        this.entries.update(entries => NavSelectorFolding.unfold(entries, entry.uid, this.multipleModeEnabled(), !this.expanded()));
+        this.entries.update(entries => NavSelectorFolding.unfold(entries, entry.uid, this.getFoldingOptions()));
     }
     updateDetailsDisplayedLimit(detailsDisplayedLimit) {
         this.entries.update(entries => NavSelectorViewMore.changeViewMoreDetailsDisplayedLimit(entries, detailsDisplayedLimit));
@@ -1671,7 +1794,9 @@ class NavSelectorLeafDetailPresenter {
         this.navSelectorState = navSelectorState;
     }
     onLeafDetailClicked(detail) {
-        this.navSelectorState.onLeafDetailClicked(detail);
+        if (!detail.displayError) {
+            this.navSelectorState.onLeafDetailClicked(detail);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter });
@@ -1688,8 +1813,10 @@ class NavSelectorLeafDetailComponent {
         this.navSelectorLeafDetailPresenter = navSelectorLeafDetailPresenter;
     }
     onClick(event) {
-        event.stopImmediatePropagation();
-        this.navSelectorLeafDetailPresenter.onLeafDetailClicked(this.detail());
+        if (!this.embedded()) {
+            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", "class.embedded": "embedded()", "class.disabled": "detail().displayError" } }, 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        apTooltipPosition=\"right\"\n        [apTooltip]=\"detail().errorReason\" />\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.embedded .caption{font-size:var(--ref-font-size-sm)}: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.disabled .caption{opacity:.5}: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"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1829,22 +1956,6 @@ 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);
-    classes = '';
-    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()", "class": "this.classes" } }, 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;color:var(--ref-color-grey-100)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).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:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled{cursor:auto}\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;color:var(--ref-color-grey-100)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).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:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled{cursor:auto}\n"] }]
-        }], propDecorators: { classes: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 const NavSelectorPopoverPlacement = {
     RIGHT: 'right',
     BOTTOM_START: 'bottom_start',
@@ -1960,7 +2071,7 @@ class NavSelectorPopoverComponent {
         }
     }
     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 (click)=\"onTitleCLicked($event)\" 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:1000}:host .nav-selector-popover{min-width:225px;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{cursor:auto;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 });
+    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 (click)=\"onTitleCLicked($event)\" 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                <ng-container [ngTemplateOutlet]=\"item\"/>\n            }\n        } @else {\n            <ng-content select=\"[item]\"/>\n        }\n    </div>\n}\n", styles: [":host{position:fixed;z-index:1000}:host .nav-selector-popover{min-width:225px;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{cursor:auto;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverComponent, decorators: [{
             type: Component,
@@ -1971,7 +2082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         '(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 (click)=\"onTitleCLicked($event)\" 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:1000}:host .nav-selector-popover{min-width:225px;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{cursor:auto;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"] }]
+                    }, imports: [NgTemplateOutlet], template: "@if (displayed()) {\n    <div class=\"nav-selector-popover\">\n        @if (popoverTitle()) {\n            <div (click)=\"onTitleCLicked($event)\" 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                <ng-container [ngTemplateOutlet]=\"item\"/>\n            }\n        } @else {\n            <ng-content select=\"[item]\"/>\n        }\n    </div>\n}\n", styles: [":host{position:fixed;z-index:1000}:host .nav-selector-popover{min-width:225px;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{cursor:auto;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 {
@@ -1999,6 +2110,9 @@ class NavSelectorLeafPresenter {
     unfold(leaf) {
         this.navSelectorState.unfold(leaf);
     }
+    onLeafDetailClicked(detail) {
+        this.navSelectorState.onLeafDetailClicked(detail);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter });
 }
@@ -2030,13 +2144,11 @@ class NavSelectorLeafComponent {
         if (disableReason) {
             content.push(disableReason);
         }
-        if (this.navSelectorLeafPresenter.isMultipleModeEnabled() || !this.navSelectorLeafPresenter.expanded()) {
-            if (this.leaf().displayFeatureLocked) {
-                content.push(this.navSelectorLeafPresenter.texts().featureLocked);
-            }
-            if (this.leaf().displayTokenInvalid) {
-                content.push(this.navSelectorLeafPresenter.texts().tokenInvalid);
-            }
+        if (this.leaf().displayFeatureLocked) {
+            content.push(this.navSelectorLeafPresenter.texts().featureLocked);
+        }
+        if (this.leaf().displayTokenInvalid) {
+            content.push(this.navSelectorLeafPresenter.texts().tokenInvalid);
         }
         return content.join('<br>');
     });
@@ -2048,16 +2160,9 @@ class NavSelectorLeafComponent {
         this.navSelectorLeafPresenter = navSelectorLeafPresenter;
         afterNextRender(() => {
             this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.leaf().details.length}px`);
-            const el = this.aliasEl()?.nativeElement;
-            if (el) {
-                this.aliasBoundedClientRect.set({
-                    offsetWidth: el.offsetWidth,
-                    offsetHeight: el.offsetHeight,
-                    scrollWidth: el.scrollWidth,
-                    scrollHeight: el.scrollHeight,
-                });
-            }
+            this.updateAliasBoundedClientRect();
         });
+        afterRender(() => untracked(() => this.updateAliasBoundedClientRect()));
         effect(() => {
             const folded = this.leaf().folded;
             untracked(() => {
@@ -2080,8 +2185,25 @@ class NavSelectorLeafComponent {
         event.stopImmediatePropagation();
         this.navSelectorLeafPresenter.onLeafToggleFolding(this.leaf());
     }
+    clickOnToggleFolding(event) {
+        event.stopImmediatePropagation();
+        // Remove the focus from the toggle folding so we do not have the :focus-within style on the leaf
+        if (event.currentTarget && 'blur' in event.currentTarget && typeof event.currentTarget.blur === 'function') {
+            event.currentTarget.blur();
+        }
+        this.navSelectorLeafPresenter.onLeafToggleFolding(this.leaf());
+    }
     selectOnly(event) {
         event.stopImmediatePropagation();
+        // (event.target as Element).blur();
+        this.navSelectorLeafPresenter.selectOnlyLeaf(this.leaf());
+    }
+    clickOnSelectOnly(event) {
+        event.stopImmediatePropagation();
+        // Remove the focus from the select only so we do not have the :focus-within style on the leaf
+        if (event.currentTarget && 'blur' in event.currentTarget && typeof event.currentTarget.blur === 'function') {
+            event.currentTarget.blur();
+        }
         this.navSelectorLeafPresenter.selectOnlyLeaf(this.leaf());
     }
     /**
@@ -2112,8 +2234,26 @@ class NavSelectorLeafComponent {
         event.stopImmediatePropagation();
         this.navSelectorLeafPresenter.unfold(this.leaf());
     }
+    onDetailClicked(event, detail) {
+        event.stopImmediatePropagation();
+        this.navSelectorLeafPresenter.onLeafDetailClicked(detail);
+    }
+    updateAliasBoundedClientRect() {
+        const el = this.aliasEl()?.nativeElement;
+        if (el) {
+            const boundedClientRect = {
+                offsetWidth: el.offsetWidth,
+                offsetHeight: el.offsetHeight,
+                scrollWidth: el.scrollWidth,
+                scrollHeight: el.scrollHeight,
+            };
+            if (JSON.stringify(this.aliasBoundedClientRect()) !== JSON.stringify(boundedClientRect)) {
+                this.aliasBoundedClientRect.set(boundedClientRect);
+            }
+        }
+    }
     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: { "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.detail-selected]=\"leaf().detailSelected\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"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                (click)=\"eventStopper($event)\"\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 || leaf().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\" [class.disabled]=\"detail.displayError\">\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.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{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);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable: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.details-displayable: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):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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;background-color:var(--ref-color-white);border-radius:100%}: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: [
+    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.detail-selected]=\"leaf().detailSelected\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"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                (click)=\"eventStopper($event)\"\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)=\"clickOnSelectOnly($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)=\"clickOnToggleFolding($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 || leaf().detailSelected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\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            placement=\"right\"\n            [popoverTitle]=\"leaf().alias\"\n            [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n            @for (detail of leaf().details; track detail.uid) {\n                <ap-nav-selector-popover-item\n                    item\n                    [selected]=\"detail.selected\"\n                    [disabled]=\"detail.displayError\"\n                    [name]=\"detail.alias\"\n                    (click)=\"onDetailClicked($event, detail)\">\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.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{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);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable: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.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){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):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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;cursor:pointer}: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;background-color:var(--ref-color-white);border-radius:100%}: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)}:host.minified .nav-selector-leaf:not(.multiple-mode){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", "disabled", "name", "ariaLabel"] }], 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)
              */
@@ -2174,7 +2314,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        [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.detail-selected]=\"leaf().detailSelected\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"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                (click)=\"eventStopper($event)\"\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 || leaf().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\" [class.disabled]=\"detail.displayError\">\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.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{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);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable: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.details-displayable: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):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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;background-color:var(--ref-color-white);border-radius:100%}: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"] }]
+                    ], 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.detail-selected]=\"leaf().detailSelected\"\n        [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"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                (click)=\"eventStopper($event)\"\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)=\"clickOnSelectOnly($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)=\"clickOnToggleFolding($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 || leaf().detailSelected\"\n        [class.token-error]=\"leaf().displayTokenInvalid\"\n        [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\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            placement=\"right\"\n            [popoverTitle]=\"leaf().alias\"\n            [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n            @for (detail of leaf().details; track detail.uid) {\n                <ap-nav-selector-popover-item\n                    item\n                    [selected]=\"detail.selected\"\n                    [disabled]=\"detail.displayError\"\n                    [name]=\"detail.alias\"\n                    (click)=\"onDetailClicked($event, detail)\">\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.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{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);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable: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.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){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):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable):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):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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):not(.details-displayable).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):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).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;cursor:pointer}: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;background-color:var(--ref-color-white);border-radius:100%}: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)}:host.minified .nav-selector-leaf:not(.multiple-mode){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 {
@@ -2224,7 +2364,7 @@ class NavSelectorGroupComponent {
             content.push(this.group().alias);
         }
         if (this.group().displayTokenInvalid) {
-            content.push(this.navSelectorGroupPresenter.texts().tokenInvalid);
+            content.push(this.navSelectorGroupPresenter.texts().groupTokenInvalid);
         }
         return content.join('<br>');
     });
@@ -2236,16 +2376,9 @@ class NavSelectorGroupComponent {
         this.navSelectorGroupPresenter = navSelectorGroupPresenter;
         afterNextRender(() => {
             this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.group().children.length}px`);
-            const el = this.aliasEl()?.nativeElement;
-            if (el) {
-                this.aliasBoundedClientRect.set({
-                    offsetWidth: el.offsetWidth,
-                    offsetHeight: el.offsetHeight,
-                    scrollWidth: el.scrollWidth,
-                    scrollHeight: el.scrollHeight,
-                });
-            }
+            this.updateAliasBoundedClientRect();
         });
+        afterRender(() => untracked(() => this.updateAliasBoundedClientRect()));
         effect(() => {
             const folded = this.group().folded;
             untracked(() => {
@@ -2290,8 +2423,22 @@ class NavSelectorGroupComponent {
         event.stopImmediatePropagation();
         this.navSelectorGroupPresenter.unfold(this.group());
     }
+    updateAliasBoundedClientRect() {
+        const el = this.aliasEl()?.nativeElement;
+        if (el) {
+            const boundedClientRect = {
+                offsetWidth: el.offsetWidth,
+                offsetHeight: el.offsetHeight,
+                scrollWidth: el.scrollWidth,
+                scrollHeight: el.scrollHeight,
+            };
+            if (JSON.stringify(this.aliasBoundedClientRect()) !== JSON.stringify(boundedClientRect)) {
+                this.aliasBoundedClientRect.set(boundedClientRect);
+            }
+        }
+    }
     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        (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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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=\"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}\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;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width: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;background-color:var(--ref-color-white);border-radius:100%}\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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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        [class.multiple-mode]=\"navSelectorGroupPresenter.isMultipleModeEnabled()\"\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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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=\"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}\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;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative}:host.minified .content:not(.multiple-mode){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;background-color:var(--ref-color-white);border-radius:100%}\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)
              */
@@ -2345,7 +2492,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        (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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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=\"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}\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;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width: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;background-color:var(--ref-color-white);border-radius:100%}\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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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        [class.multiple-mode]=\"navSelectorGroupPresenter.isMultipleModeEnabled()\"\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                (click)=\"eventStopper($event)\"\n                (change)=\"onGroupSelected()\" />\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=\"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}\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;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative}:host.minified .content:not(.multiple-mode){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;background-color:var(--ref-color-white);border-radius:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorGroupPresenter }] });
 
 class NavSelectorCategoryPresenter {
@@ -2381,10 +2528,29 @@ class NavSelectorCategoryComponent {
     foldSymbol = computed(() => (this.category().folded ? 'chevron-down' : 'chevron-up'));
     foldedWithDelay = signal(false);
     animationState = computed(() => (this.category().folded ? 'collapsed' : 'expanded'));
+    aliasEl = viewChild('alias');
+    aliasBoundedClientRect = signal({
+        offsetWidth: 0,
+        offsetHeight: 0,
+        scrollWidth: 0,
+        scrollHeight: 0,
+    });
+    tooltipContent = computed(() => {
+        const el = this.aliasBoundedClientRect();
+        if (!this.navSelectorCategoryPresenter.expanded() || el.offsetWidth < el.scrollWidth || el.offsetHeight < el.scrollHeight) {
+            return this.category().alias;
+        }
+        return '';
+    });
+    tooltipDisabled = computed(() => !this.tooltipContent().length);
     constructor(el, navSelectorCategoryPresenter) {
         this.el = el;
         this.navSelectorCategoryPresenter = navSelectorCategoryPresenter;
-        afterNextRender(() => this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.category().children.length}px`));
+        afterNextRender(() => {
+            this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.category().children.length}px`);
+            this.updateAliasBoundedClientRect();
+        });
+        afterRender(() => untracked(() => this.updateAliasBoundedClientRect()));
         effect(() => {
             const folded = this.category().folded;
             untracked(() => {
@@ -2398,8 +2564,22 @@ class NavSelectorCategoryComponent {
         });
     }
     maxHeight = signal('0px');
+    updateAliasBoundedClientRect() {
+        const el = this.aliasEl()?.nativeElement;
+        if (el) {
+            const boundedClientRect = {
+                offsetWidth: el.offsetWidth,
+                offsetHeight: el.offsetHeight,
+                scrollWidth: el.scrollWidth,
+                scrollHeight: el.scrollHeight,
+            };
+            if (JSON.stringify(this.aliasBoundedClientRect()) !== JSON.stringify(boundedClientRect)) {
+                this.aliasBoundedClientRect.set(boundedClientRect);
+            }
+        }
+    }
     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)=\"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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\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-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=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 .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}: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-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .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: "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], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\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\n            #alias\n            class=\"caption\">\n            {{ category().alias }}\n        </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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTreeNodeAccessibility]=\"category()\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\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        </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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\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-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=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 .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .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: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], 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)
              */
@@ -2422,7 +2602,7 @@ class NavSelectorCategoryComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-category', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, TreeNodeAccessibilityDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
+            args: [{ selector: 'ap-nav-selector-category', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, TreeNodeAccessibilityDirective, TooltipDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
                         '[class.minified]': '!navSelectorCategoryPresenter.expanded()',
                         '(keydown.arrowLeft)': 'navSelectorCategoryPresenter.fold($event, this.category())',
                         '(keydown.arrowRight)': 'navSelectorCategoryPresenter.unfold($event, this.category())',
@@ -2445,7 +2625,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)=\"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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\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-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=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 .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}: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-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"] }]
+                    ], template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\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\n            #alias\n            class=\"caption\">\n            {{ category().alias }}\n        </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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTreeNodeAccessibility]=\"category()\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\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        </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                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\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                        </div>\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-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=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 .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
 
 let nextUniqueId = 0;
@@ -2469,6 +2649,7 @@ class NavSelectorComponent {
     expansionState = computed(() => (this.navSelectorState.expanded() ? 'expanded' : 'minified'));
     onExpansionStateChange = output();
     componentUid = `nav-selector-${nextUniqueId++}`;
+    ready = signal(false);
     constructor(navSelectorState, el) {
         this.navSelectorState = navSelectorState;
         this.el = el;
@@ -2479,13 +2660,25 @@ class NavSelectorComponent {
             }
         });
         afterNextRender(() => {
-            if (!this.embedded() && !this.forceExpanded() && document.body.clientWidth < 1200) {
-                this.navSelectorState.toggleExpanded();
-            }
+            this.ready.set(true);
         });
         effect(() => {
             this.onExpansionStateChange.emit({ expanded: this.navSelectorState.expanded() });
         });
+        const minifyOnStartEffect = effect(() => {
+            const ready = this.ready();
+            const embedded = this.embedded();
+            const forceExpanded = this.forceExpanded();
+            const entries = this.navSelectorState.entries();
+            untracked(() => {
+                if (ready && entries.length) {
+                    if (!embedded && !forceExpanded && document.body.clientWidth < 1200) {
+                        this.navSelectorState.forceMinify();
+                    }
+                    minifyOnStartEffect.destroy();
+                }
+            });
+        }, { manualCleanup: true });
         effect(() => {
             const multipleModeEnabled = this.multipleModeEnabled();
             const newEntries = this.navSelectorEntries();
@@ -2568,7 +2761,7 @@ class NavSelectorComponent {
         }
     }
     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 }, 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", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, 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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;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-style-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{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{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", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, 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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;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-style-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;scrollbar-gutter:stable both-edges}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{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", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('expand', [
                 state('expanded', style({ width: '100%' })),
                 state('minified', style({ width: '64px' })),
@@ -2606,12 +2799,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             // Force animation to do not be with 100% instantly
                             keyframes([style({ width: '64px' }), style({ width: '50%' }), style({ width: '100%' })]))),
                         ]),
-                    ], 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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;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-style-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{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{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"] }]
+                    ], 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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\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;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;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-style-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;scrollbar-gutter:stable both-edges}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{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 }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NavSelectorComponent };
+export { NavSelectorComponent, NavSelectorPopoverItemComponent };
 //# sourceMappingURL=agorapulse-ui-components-nav-selector.mjs.map