@agorapulse/ui-components 20.3.25 → 20.3.26-beta.1

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

@@ -414,7 +414,8 @@ const computeSelectableUids = (entries) => {
     return entries.flatMap(entry => computeSelectableUidsByEntry(entry));
 };
 const computeSelectableUidsByEntry = (entry) => {
-    if (isInternalNavSelectorEntryALeaf(entry) && !entry.disabled) {
+    if (isInternalNavSelectorEntryALeaf(entry)) {
+        // Disabled leafs can now be selected programmatically
         return [entry.uid, ...entry.details.filter(detail => !detail.hidden).map(detail => detail.uid)];
     }
     if (isInternalNavSelectorEntryANode(entry)) {
@@ -721,213 +722,6 @@ class NavSelectorFolding {
     }
 }
 
-/**
- * NavSelectorMultiSelect is a utility class that provides methods to select an entry in multiple mode.
- */
-class NavSelectorMultiSelect {
-    /**
-     * Select an entry in multiple mode.
-     *
-     * Categories are not selectable.
-     *
-     * Groups and leaves are selectable.
-     *
-     * Groups may be in undetermined state if some of their children are selected and some are not.
-     * @param entries nav selector entries
-     * @param entryUid the entry uid to select
-     */
-    static selectInMultipleMode(entries, entryUid) {
-        return entries.map(entry => {
-            if (isInternalNavSelectorEntryALeaf(entry)) {
-                return this.selectALeafInMultipleMode(entry, entryUid);
-            }
-            else if (isInternalNavSelectorEntryAGroup(entry)) {
-                return this.selectAGroupInMultipleMode(entry, entryUid);
-            }
-            else if (isInternalNavSelectorEntryACategory(entry)) {
-                return this.selectACategoryInMultipleMode(entry, entryUid);
-            }
-            return entry;
-        });
-    }
-    /**
-     * Select only a leaf in multiple mode.
-     *
-     * Categories are not selectable.
-     *
-     * Groups may be in undetermined state if some of their children are selected and some are not.
-     * @param entries nav selector entries
-     * @param entryUid the entry uid to select
-     */
-    static selectOnlyALeafInMultipleMode(entries, entryUid) {
-        return entries.map(entry => {
-            if (isInternalNavSelectorEntryALeaf(entry)) {
-                return {
-                    ...entry,
-                    selected: entry.uid === entryUid,
-                };
-            }
-            else if (isInternalNavSelectorEntryACategory(entry)) {
-                return {
-                    ...entry,
-                    children: this.selectOnlyALeafInMultipleMode(entry.children, entryUid),
-                };
-            }
-            else if (isInternalNavSelectorEntryAGroup(entry)) {
-                const children = entry.children.flatMap(child => this.selectOnlyALeafInMultipleMode([child], entryUid));
-                const selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && !child.selectable));
-                return {
-                    ...entry,
-                    children,
-                    selected,
-                    undeterminedSelection: !selected && children.some(child => child.selected),
-                };
-            }
-            return entry;
-        });
-    }
-    /**
-     * Select all entries in multiple mode.
-     *
-     * Categories are not selectable.
-     *
-     * Groups and leaves are selectable.
-     * @param entries nav selector entries
-     */
-    static selectAll(entries) {
-        return this.selectChildren(entries);
-    }
-    /**
-     * Unselect all entries in multiple mode.
-     *
-     * Categories are not selectable.
-     *
-     * Groups and leaves are selectable.
-     * @param entries nav selector entries
-     */
-    static unselectAll(entries) {
-        return this.unselectChildren(entries);
-    }
-    static selectALeafInMultipleMode(leaf, entryUid) {
-        let selected = false;
-        if (leaf.selectable) {
-            selected = leaf.uid === entryUid ? !leaf.selected : leaf.selected;
-        }
-        return {
-            ...leaf,
-            selected,
-        };
-    }
-    static selectACategoryInMultipleMode(entry, entryUid) {
-        return {
-            ...entry,
-            children: entry.children.map(child => {
-                if (isInternalNavSelectorEntryALeaf(child)) {
-                    return this.selectALeafInMultipleMode(child, entryUid);
-                }
-                return this.selectAGroupInMultipleMode(child, entryUid);
-            }),
-        };
-    }
-    static selectAGroupInMultipleMode(entry, entryUid) {
-        if (!entry.selectable) {
-            return entry;
-        }
-        let selected;
-        let children;
-        let undeterminedSelection = false;
-        if (entry.uid === entryUid) {
-            selected = !entry.selected;
-            if (selected) {
-                children = this.selectLeafs(entry.children);
-            }
-            else {
-                children = this.unselectLeafs(entry.children);
-            }
-        }
-        else {
-            children = entry.children.map(child => this.toggleSelectLeaf(child, entryUid));
-            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && !child.selectable));
-            undeterminedSelection = !selected && children.some(child => child.selected);
-        }
-        return {
-            ...entry,
-            children,
-            selected,
-            undeterminedSelection,
-        };
-    }
-    static toggleSelectLeaf(leaf, uid) {
-        if (leaf.uid === uid) {
-            return {
-                ...leaf,
-                selected: !leaf.selected,
-            };
-        }
-        return leaf;
-    }
-    static selectLeafs(leafs) {
-        return leafs.map(leaf => ({
-            ...leaf,
-            selected: leaf.selectable,
-        }));
-    }
-    static unselectLeafs(leafs) {
-        return leafs.map(leaf => ({
-            ...leaf,
-            selected: false,
-        }));
-    }
-    static unselectChildren(entry) {
-        return entry.map(child => {
-            if (isInternalNavSelectorEntryALeaf(child)) {
-                return {
-                    ...child,
-                    selected: false,
-                };
-            }
-            else if (isInternalNavSelectorEntryACategory(child)) {
-                return {
-                    ...child,
-                    children: this.unselectChildren(child.children),
-                };
-            }
-            else if (isInternalNavSelectorEntryANode(child)) {
-                return {
-                    ...child,
-                    children: this.unselectChildren(child.children),
-                    selected: false,
-                };
-            }
-            return child;
-        });
-    }
-    static selectChildren(entry) {
-        return entry.map(child => {
-            if (isInternalNavSelectorEntryALeaf(child)) {
-                return {
-                    ...child,
-                    selected: child.selectable,
-                };
-            }
-            else if (isInternalNavSelectorEntryACategory(child)) {
-                return {
-                    ...child,
-                    children: this.selectChildren(child.children),
-                };
-            }
-            else if (isInternalNavSelectorEntryAGroup(child)) {
-                return {
-                    ...child,
-                    children: this.selectChildren(child.children),
-                    selected: true,
-                };
-            }
-            return child;
-        });
-    }
-}
-
 /**
  * NavSelectorSingleSelect is a utility class that provides methods to select a single entry in a nav selector.
  */
@@ -1083,8 +877,13 @@ class NavSelectorBuilder {
         this.structureChecker(entries, true);
         let builtEntries = this.buildEntries(entries, true, 1, detailsDisplayedLimit);
         if (selectedEntryUids) {
-            for (const selectedEntryUid of selectedEntryUids) {
-                builtEntries = NavSelectorMultiSelect.selectInMultipleMode(builtEntries, selectedEntryUid);
+            // Filter out group/category uids - only leafs and leaf details should be selectable
+            const selectableUids = computeSelectableUids(builtEntries);
+            const validSelectedUids = selectedEntryUids.filter(uid => selectableUids.includes(uid));
+            // Building entries with allowed selection of disabled items
+            builtEntries = this.setInitialSelection(builtEntries, validSelectedUids);
+            // Unfold parents for all selected items
+            for (const selectedEntryUid of validSelectedUids) {
                 builtEntries = NavSelectorFolding.unfoldParents(builtEntries, selectedEntryUid, { multipleMode: false, minified: false });
             }
         }
@@ -1256,7 +1055,7 @@ class NavSelectorBuilder {
             counter: children.reduce((acc, { counter }) => acc + counter, 0),
             displayTokenInvalid,
             selected: false,
-            selectable: multipleModeEnabled && children.some(({ selectable }) => selectable),
+            selectable: multipleModeEnabled && children.some(child => child.selectable && !child.disabled),
             undeterminedSelection: selectedChildrenCount !== children.length && selectedChildrenCount > 0,
             folded: node.folded,
             type: node.type,
@@ -1303,8 +1102,10 @@ class NavSelectorBuilder {
             startSymbolId: leaf.startSymbolId,
             startDotColor: leaf.startDotColor,
             selected: false,
+            // In multiple mode, a disabled item can still be selectable (programmatically)
+            // We exclude DISABLED from validation to allow selected + disabled state
             selectable: multipleModeEnabled
-                ? this.isLeafLogicValid(leaf, LeafLogics.COUNTER)
+                ? this.isLeafLogicValid(leaf, LeafLogics.DISABLED, LeafLogics.COUNTER)
                 : this.isLeafLogicValid(leaf, LeafLogics.FEATURE_LOCKED, LeafLogics.TOKEN_INVALID, LeafLogics.COUNTER),
             detailsDisplayable,
             details: leaf.details.map(detail => this.buildLeafDetail(detail, level + 1, focusable && !folded)),
@@ -1335,6 +1136,41 @@ class NavSelectorBuilder {
             type: 'LEAF_DETAILS',
         };
     }
+    /**
+     * Sets initial selection state for entries based on selectedEntryUids.
+     * This allows disabled items to be selected programmatically during initialization.
+     */
+    static setInitialSelection(entries, selectedEntryUids) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return {
+                    ...entry,
+                    selected: selectedEntryUids.includes(entry.uid),
+                };
+            }
+            else if (isInternalNavSelectorEntryACategory(entry)) {
+                return {
+                    ...entry,
+                    children: this.setInitialSelection(entry.children, selectedEntryUids),
+                };
+            }
+            else if (isInternalNavSelectorEntryAGroup(entry)) {
+                const children = this.setInitialSelection(entry.children, selectedEntryUids);
+                // A group is selected if all its selectable non-disabled children are selected
+                const selectableChildren = children.filter(child => child.selectable && !child.disabled);
+                const selectedChildren = children.filter(child => child.selected);
+                const selected = selectableChildren.length > 0 && selectableChildren.every(child => child.selected);
+                const undeterminedSelection = !selected && selectedChildren.length > 0;
+                return {
+                    ...entry,
+                    children,
+                    selected,
+                    undeterminedSelection,
+                };
+            }
+            return entry;
+        });
+    }
     static isLeafLogicValid(leaf, ...excludes) {
         return Object.entries(this.LEAF_LOGICS_PRIORITY)
             .filter(([key]) => !excludes.includes(key))
@@ -1611,6 +1447,223 @@ class NavSelectorMinifying {
     }
 }
 
+/**
+ * NavSelectorMultiSelect is a utility class that provides methods to select an entry in multiple mode.
+ */
+class NavSelectorMultiSelect {
+    /**
+     * Select an entry in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups and leaves are selectable.
+     *
+     * Groups may be in undetermined state if some of their children are selected and some are not.
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to select
+     */
+    static selectInMultipleMode(entries, entryUid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return this.selectALeafInMultipleMode(entry, entryUid);
+            }
+            else if (isInternalNavSelectorEntryAGroup(entry)) {
+                return this.selectAGroupInMultipleMode(entry, entryUid);
+            }
+            else if (isInternalNavSelectorEntryACategory(entry)) {
+                return this.selectACategoryInMultipleMode(entry, entryUid);
+            }
+            return entry;
+        });
+    }
+    /**
+     * Select only a leaf in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups may be in undetermined state if some of their children are selected and some are not.
+     * @param entries nav selector entries
+     * @param entryUid the entry uid to select
+     */
+    static selectOnlyALeafInMultipleMode(entries, entryUid) {
+        return entries.map(entry => {
+            if (isInternalNavSelectorEntryALeaf(entry)) {
+                return {
+                    ...entry,
+                    selected: entry.uid === entryUid,
+                };
+            }
+            else if (isInternalNavSelectorEntryACategory(entry)) {
+                return {
+                    ...entry,
+                    children: this.selectOnlyALeafInMultipleMode(entry.children, entryUid),
+                };
+            }
+            else if (isInternalNavSelectorEntryAGroup(entry)) {
+                const children = entry.children.flatMap(child => this.selectOnlyALeafInMultipleMode([child], entryUid));
+                const selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && !child.selectable));
+                return {
+                    ...entry,
+                    children,
+                    selected,
+                    undeterminedSelection: !selected && children.some(child => child.selected),
+                };
+            }
+            return entry;
+        });
+    }
+    /**
+     * Select all entries in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups and leaves are selectable.
+     * @param entries nav selector entries
+     */
+    static selectAll(entries) {
+        return this.selectChildren(entries);
+    }
+    /**
+     * Unselect all entries in multiple mode.
+     *
+     * Categories are not selectable.
+     *
+     * Groups and leaves are selectable.
+     * @param entries nav selector entries
+     */
+    static unselectAll(entries) {
+        return this.unselectChildren(entries);
+    }
+    static selectALeafInMultipleMode(leaf, entryUid) {
+        let selected = leaf.selected;
+        // Only allow toggle if item is selectable AND not disabled
+        // This blocks user interaction on disabled items
+        if (leaf.uid === entryUid && leaf.selectable && !leaf.disabled) {
+            selected = !leaf.selected;
+        }
+        return {
+            ...leaf,
+            selected,
+        };
+    }
+    static selectACategoryInMultipleMode(entry, entryUid) {
+        return {
+            ...entry,
+            children: entry.children.map(child => {
+                if (isInternalNavSelectorEntryALeaf(child)) {
+                    return this.selectALeafInMultipleMode(child, entryUid);
+                }
+                return this.selectAGroupInMultipleMode(child, entryUid);
+            }),
+        };
+    }
+    static selectAGroupInMultipleMode(entry, entryUid) {
+        if (!entry.selectable) {
+            return entry;
+        }
+        let selected;
+        let children;
+        let undeterminedSelection = false;
+        if (entry.uid === entryUid) {
+            selected = !entry.selected;
+            if (selected) {
+                children = this.selectLeafs(entry.children);
+            }
+            else {
+                children = this.unselectLeafs(entry.children);
+            }
+            // Recalculate selected and undeterminedSelection based on children
+            // because disabled items may have retained their selected state.
+            // A group is selected if all children are either: selected, not selectable, or disabled
+            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && (!child.selectable || child.disabled)));
+            undeterminedSelection = !selected && children.some(child => child.selected);
+        }
+        else {
+            children = entry.children.map(child => this.toggleSelectLeaf(child, entryUid));
+            // A group is selected if all children are either: selected, not selectable, or disabled
+            selected = children.every(child => child.selected || (isInternalNavSelectorEntryALeaf(child) && (!child.selectable || child.disabled)));
+            undeterminedSelection = !selected && children.some(child => child.selected);
+        }
+        return {
+            ...entry,
+            children,
+            selected,
+            undeterminedSelection,
+        };
+    }
+    static toggleSelectLeaf(leaf, uid) {
+        if (leaf.uid === uid) {
+            return {
+                ...leaf,
+                selected: !leaf.selected,
+            };
+        }
+        return leaf;
+    }
+    static selectLeafs(leafs) {
+        return leafs.map(leaf => ({
+            ...leaf,
+            // Disabled or non-selectable leafs retain their current selected state
+            selected: leaf.disabled || !leaf.selectable ? leaf.selected : leaf.selectable,
+        }));
+    }
+    static unselectLeafs(leafs) {
+        return leafs.map(leaf => ({
+            ...leaf,
+            // Disabled or non-selectable leafs retain their current selected state
+            selected: leaf.disabled || !leaf.selectable ? leaf.selected : false,
+        }));
+    }
+    static unselectChildren(entry) {
+        return entry.map(child => {
+            if (isInternalNavSelectorEntryALeaf(child)) {
+                return {
+                    ...child,
+                    selected: false,
+                };
+            }
+            else if (isInternalNavSelectorEntryACategory(child)) {
+                return {
+                    ...child,
+                    children: this.unselectChildren(child.children),
+                };
+            }
+            else if (isInternalNavSelectorEntryANode(child)) {
+                return {
+                    ...child,
+                    children: this.unselectChildren(child.children),
+                    selected: false,
+                };
+            }
+            return child;
+        });
+    }
+    static selectChildren(entry) {
+        return entry.map(child => {
+            if (isInternalNavSelectorEntryALeaf(child)) {
+                return {
+                    ...child,
+                    selected: child.selectable,
+                };
+            }
+            else if (isInternalNavSelectorEntryACategory(child)) {
+                return {
+                    ...child,
+                    children: this.selectChildren(child.children),
+                };
+            }
+            else if (isInternalNavSelectorEntryAGroup(child)) {
+                return {
+                    ...child,
+                    children: this.selectChildren(child.children),
+                    selected: true,
+                };
+            }
+            return child;
+        });
+    }
+}
+
 /**
  * Utility class to handle the view more functionality on leaves
  */
@@ -1788,6 +1841,11 @@ class NavSelectorState {
         if (!leaf.selectable) {
             return;
         }
+        // In multiple mode, block clicks on disabled leafs
+        // (they can be selected programmatically but not by the user)
+        if (this.multipleModeEnabled() && leaf.disabled) {
+            return;
+        }
         this._entries.update(entries => {
             let updatedEntries = entries;
             if (leaf.foldable) {
@@ -2438,7 +2496,7 @@ class NavSelectorLeafComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, 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: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\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\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [class.style-menu]=\"navSelectorLeafPresenter.styleMenu()\"\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        @if (!navSelectorLeafPresenter.hideAvatar()) {\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n        }\n\n        @if (leaf().startSymbolId || leaf().startDotColor) {\n            <div class=\"start-elements\">\n                @if (leaf().startSymbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        color=\"grey-blue\"\n                        [symbolId]=\"leaf().startSymbolId\" />\n                }\n                @if (leaf().startDotColor) {\n                    <div class=\"start-dot-wrapper\">\n                        <div\n                            class=\"start-dot\"\n                            [style.background-color]=\"leaf().startDotColor\"></div>\n                    </div>\n                }\n            </div>\n        }\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        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    color=\"basic-grey\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    [apActionDropdownTrigger]=\"actionDropdown\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n                <ap-action-dropdown\n                    #actionDropdown\n                    [items]=\"leafActions()\"\n                    (itemClick)=\"onActionClicked($event)\" />\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        </div>\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;--nav-selector-leaf-font-size: var(--ref-font-size-xs);--nav-selector-leaf-line-height: var(--ref-font-line-height-xs)}:host .nav-selector-leaf.style-menu{--nav-selector-leaf-font-size: var(--ref-font-size-sm);--nav-selector-leaf-line-height: var(--ref-font-line-height-sm)}: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 .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot-wrapper{padding:2px;display:flex}:host .start-elements .start-dot-wrapper .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--nav-selector-leaf-line-height)}: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 .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height);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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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 .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}::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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}\n"], dependencies: [{ kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "disabled", "largeModeEnabled", "showBackdrop", "customWidth", "defaultPosition"], outputs: ["itemClick", "opened", "closed"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }, { 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", "notif", "background", "role"] }, { 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", "apTooltipTrigger"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { 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", "locked", "id", "name", "ariaLabel"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, 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: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\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\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [class.style-menu]=\"navSelectorLeafPresenter.styleMenu()\"\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().disabled || !leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        @if (!navSelectorLeafPresenter.hideAvatar()) {\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n        }\n\n        @if (leaf().startSymbolId || leaf().startDotColor) {\n            <div class=\"start-elements\">\n                @if (leaf().startSymbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        color=\"grey-blue\"\n                        [symbolId]=\"leaf().startSymbolId\" />\n                }\n                @if (leaf().startDotColor) {\n                    <div class=\"start-dot-wrapper\">\n                        <div\n                            class=\"start-dot\"\n                            [style.background-color]=\"leaf().startDotColor\"></div>\n                    </div>\n                }\n            </div>\n        }\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        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    color=\"basic-grey\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    [apActionDropdownTrigger]=\"actionDropdown\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n                <ap-action-dropdown\n                    #actionDropdown\n                    [items]=\"leafActions()\"\n                    (itemClick)=\"onActionClicked($event)\" />\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        </div>\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().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;--nav-selector-leaf-font-size: var(--ref-font-size-xs);--nav-selector-leaf-line-height: var(--ref-font-line-height-xs)}:host .nav-selector-leaf.style-menu{--nav-selector-leaf-font-size: var(--ref-font-size-sm);--nav-selector-leaf-line-height: var(--ref-font-line-height-sm)}: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 .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot-wrapper{padding:2px;display:flex}:host .start-elements .start-dot-wrapper .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--nav-selector-leaf-line-height)}: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 .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height);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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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 .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}::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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}\n"], dependencies: [{ kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "disabled", "largeModeEnabled", "showBackdrop", "customWidth", "defaultPosition"], outputs: ["itemClick", "opened", "closed"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }, { 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", "notif", "background", "role"] }, { 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", "apTooltipTrigger"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { 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", "locked", "id", "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)
              */
@@ -2500,7 +2558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                                 animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
                             ]),
                         ]),
-                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\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\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [class.style-menu]=\"navSelectorLeafPresenter.styleMenu()\"\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        @if (!navSelectorLeafPresenter.hideAvatar()) {\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n        }\n\n        @if (leaf().startSymbolId || leaf().startDotColor) {\n            <div class=\"start-elements\">\n                @if (leaf().startSymbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        color=\"grey-blue\"\n                        [symbolId]=\"leaf().startSymbolId\" />\n                }\n                @if (leaf().startDotColor) {\n                    <div class=\"start-dot-wrapper\">\n                        <div\n                            class=\"start-dot\"\n                            [style.background-color]=\"leaf().startDotColor\"></div>\n                    </div>\n                }\n            </div>\n        }\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        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    color=\"basic-grey\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    [apActionDropdownTrigger]=\"actionDropdown\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n                <ap-action-dropdown\n                    #actionDropdown\n                    [items]=\"leafActions()\"\n                    (itemClick)=\"onActionClicked($event)\" />\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        </div>\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;--nav-selector-leaf-font-size: var(--ref-font-size-xs);--nav-selector-leaf-line-height: var(--ref-font-line-height-xs)}:host .nav-selector-leaf.style-menu{--nav-selector-leaf-font-size: var(--ref-font-size-sm);--nav-selector-leaf-line-height: var(--ref-font-line-height-sm)}: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 .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot-wrapper{padding:2px;display:flex}:host .start-elements .start-dot-wrapper .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--nav-selector-leaf-line-height)}: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 .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height);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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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 .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}::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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}\n"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\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\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [class.style-menu]=\"navSelectorLeafPresenter.styleMenu()\"\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().disabled || !leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        @if (!navSelectorLeafPresenter.hideAvatar()) {\n            <ap-avatar\n                size=\"24\"\n                [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n                [network]=\"$any(leaf().network)\"\n                [showInitials]=\"initial()\" />\n        }\n\n        @if (leaf().startSymbolId || leaf().startDotColor) {\n            <div class=\"start-elements\">\n                @if (leaf().startSymbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        color=\"grey-blue\"\n                        [symbolId]=\"leaf().startSymbolId\" />\n                }\n                @if (leaf().startDotColor) {\n                    <div class=\"start-dot-wrapper\">\n                        <div\n                            class=\"start-dot\"\n                            [style.background-color]=\"leaf().startDotColor\"></div>\n                    </div>\n                }\n            </div>\n        }\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        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    size=\"sm\"\n                    symbolId=\"more\"\n                    color=\"basic-grey\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    [apActionDropdownTrigger]=\"actionDropdown\"\n                    [tabindex]=\"leaf().accessibility.tabIndex\"\n                    [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n                <ap-action-dropdown\n                    #actionDropdown\n                    [items]=\"leafActions()\"\n                    (itemClick)=\"onActionClicked($event)\" />\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        </div>\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().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;--nav-selector-leaf-font-size: var(--ref-font-size-xs);--nav-selector-leaf-line-height: var(--ref-font-line-height-xs)}:host .nav-selector-leaf.style-menu{--nav-selector-leaf-font-size: var(--ref-font-size-sm);--nav-selector-leaf-line-height: var(--ref-font-line-height-sm)}: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 .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot-wrapper{padding:2px;display:flex}:host .start-elements .start-dot-wrapper .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--nav-selector-leaf-line-height)}: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 .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height);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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}: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 .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}::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(--nav-selector-leaf-font-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--nav-selector-leaf-line-height)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafPresenter }] });
 
 class NavSelectorGroupPresenter {
@@ -2634,7 +2692,7 @@ class NavSelectorGroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorGroupComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorGroupPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, 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: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorGroupPresenter.expanded()) {\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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                <div class=\"avatars\">\n                    @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n                        <ap-avatar\n                            class=\"avatar-sample\"\n                            [size]=\"24\"\n                            [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                            [showInitials]=\"pictureUrlSample.initial\" />\n                    }\n                </div>\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;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}:host .avatars{display:flex;width:24px;height:24px;transform:scale(.5);gap:var(--ref-spacing-xxxs);align-content:center;justify-content:center}:host .avatars:has(:nth-child(3)){display:grid;grid-template-columns:1fr 1fr}: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", "notif", "background", "role"] }, { kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { 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", "apTooltipTrigger"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, 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: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorGroupPresenter.expanded()) {\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            [title]=\"group().alias\">\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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                <div class=\"avatars\">\n                    @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n                        <ap-avatar\n                            class=\"avatar-sample\"\n                            [size]=\"24\"\n                            [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                            [showInitials]=\"pictureUrlSample.initial\" />\n                    }\n                </div>\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;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}:host .avatars{display:flex;width:24px;height:24px;transform:scale(.5);gap:var(--ref-spacing-xxxs);align-content:center;justify-content:center}:host .avatars:has(:nth-child(3)){display:grid;grid-template-columns:1fr 1fr}: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", "notif", "background", "role"] }, { kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { 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", "apTooltipTrigger"] }, { 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)
              */
@@ -2688,7 +2746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                                 animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}', overflow: 'hidden' }), style({ maxHeight: 0, overflow: 'hidden' })])),
                             ]),
                         ]),
-                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorGroupPresenter.expanded()) {\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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                <div class=\"avatars\">\n                    @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n                        <ap-avatar\n                            class=\"avatar-sample\"\n                            [size]=\"24\"\n                            [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                            [showInitials]=\"pictureUrlSample.initial\" />\n                    }\n                </div>\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;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}:host .avatars{display:flex;width:24px;height:24px;transform:scale(.5);gap:var(--ref-spacing-xxxs);align-content:center;justify-content:center}:host .avatars:has(:nth-child(3)){display:grid;grid-template-columns:1fr 1fr}: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"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorGroupPresenter.expanded()) {\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            [title]=\"group().alias\">\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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                <div class=\"avatars\">\n                    @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n                        <ap-avatar\n                            class=\"avatar-sample\"\n                            [size]=\"24\"\n                            [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n                            [showInitials]=\"pictureUrlSample.initial\" />\n                    }\n                </div>\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\n                            [leaf]=\"child\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\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{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;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}:host .avatars{display:flex;width:24px;height:24px;transform:scale(.5);gap:var(--ref-spacing-xxxs);align-content:center;justify-content:center}:host .avatars:has(:nth-child(3)){display:grid;grid-template-columns:1fr 1fr}: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 {