@agorapulse/ui-components 18.1.13 → 18.2.0

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

@@ -1,8 +1,8 @@
 import * as i1 from '@agorapulse/ui-components/directives';
 import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
-import { SymbolComponent, withSymbols, apFeatureLock, apErrorFill, apChevronDown, apChevronUp, apFolder, apArrowExpand, apArrowReduce, apSearch } from '@agorapulse/ui-symbol';
+import { SymbolComponent, withSymbols, apFeatureLock, apErrorFill, SymbolRegistry, apChevronDown, apChevronUp, apFolder, apArrowExpand, apArrowReduce, apSearch } from '@agorapulse/ui-symbol';
 import * as i0 from '@angular/core';
-import { input, inject, Component, afterRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, contentChildren, output, viewChild, model, contentChild, afterNextRender } from '@angular/core';
+import { input, inject, Component, afterEveryRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, contentChildren, output, viewChild, model, contentChild, afterNextRender } from '@angular/core';
 import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
 import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
@@ -14,18 +14,19 @@ import { AvatarComponent } from '@agorapulse/ui-components/avatar';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
 import { CounterComponent } from '@agorapulse/ui-components/counter';
 import { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
+import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { apMore } from '@agorapulse/ui-symbol/icons';
 
 class NavSelectorPopoverItemComponent {
-    selected = input(false);
-    disabled = input(false);
-    locked = input(false);
-    id = input('');
-    name = input.required();
-    ariaLabel = input(undefined);
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    locked = input(false, ...(ngDevMode ? [{ debugName: "locked" }] : []));
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     baseButtonDirective = inject(BaseButtonDirective, { self: true });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorPopoverItemComponent, isStandalone: true, selector: "ap-nav-selector-popover-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()", "class.disabled": "disabled()", "class.locked": "locked()" } }, providers: [withSymbols(apFeatureLock)], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorPopoverItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorPopoverItemComponent, isStandalone: true, selector: "ap-nav-selector-popover-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()", "class.disabled": "disabled()", "class.locked": "locked()" } }, providers: [withSymbols(apFeatureLock)], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `
         <button
             #buttonElement
             type="button"
@@ -47,9 +48,9 @@ class NavSelectorPopoverItemComponent {
         </button>
     `, isInline: true, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);background:none;border:none;color:var(--ref-color-grey-100);overflow:hidden;text-overflow:ellipsis;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}:host button{all:unset;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);flex-grow:1;display:flex;justify-content:space-between;align-items:center;gap:var(--ref-spacing-xxs)}:host button:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).nav-selector-popover__item--active{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}:host:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled:not(.locked){cursor:auto}:host.locked:hover{background:var(--ref-color-purple-10)}:host.locked:active{background:var(--ref-color-purple-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorPopoverItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-popover-item', standalone: true, hostDirectives: [BaseButtonDirective], template: `
+            args: [{ selector: 'ap-nav-selector-popover-item', hostDirectives: [BaseButtonDirective], template: `
         <button
             #buttonElement
             type="button"
@@ -77,9 +78,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
         }] });
 
 class TreeNodeAccessibilityDirective {
-    apTreeNodeAccessibility = input.required();
+    apTreeNodeAccessibility = input.required(...(ngDevMode ? [{ debugName: "apTreeNodeAccessibility" }] : []));
     constructor(el, renderer) {
-        afterRender(() => {
+        afterEveryRender(() => {
             const nativeEl = el.nativeElement;
             const entry = this.apTreeNodeAccessibility();
             renderer.setAttribute(nativeEl, 'aria-level', `${entry.accessibility.ariaLevel}`);
@@ -93,10 +94,10 @@ class TreeNodeAccessibilityDirective {
             renderer.setAttribute(nativeEl, 'role', 'treeitem');
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TreeNodeAccessibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.9", type: TreeNodeAccessibilityDirective, isStandalone: true, selector: "[apTreeNodeAccessibility]", inputs: { apTreeNodeAccessibility: { classPropertyName: "apTreeNodeAccessibility", publicName: "apTreeNodeAccessibility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TreeNodeAccessibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: TreeNodeAccessibilityDirective, isStandalone: true, selector: "[apTreeNodeAccessibility]", inputs: { apTreeNodeAccessibility: { classPropertyName: "apTreeNodeAccessibility", publicName: "apTreeNodeAccessibility", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TreeNodeAccessibilityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TreeNodeAccessibilityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[apTreeNodeAccessibility]',
@@ -107,14 +108,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 class NavSelectorPopoverTriggerDirective {
     el;
     renderer;
-    apNavSelectorPopoverTrigger = input.required();
+    apNavSelectorPopoverTrigger = input.required(...(ngDevMode ? [{ debugName: "apNavSelectorPopoverTrigger" }] : []));
     apNavSelectorPopoverTriggerMode = input({
         click: true,
         keyboard: [],
         hover: false,
         focus: false,
-    });
-    apNavSelectorPopoverDisabled = input(false);
+    }, ...(ngDevMode ? [{ debugName: "apNavSelectorPopoverTriggerMode" }] : []));
+    apNavSelectorPopoverDisabled = input(false, ...(ngDevMode ? [{ debugName: "apNavSelectorPopoverDisabled" }] : []));
     ACTIVE_CLASS = 'nav-selector-popover-trigger--active';
     constructor(el, renderer) {
         this.el = el;
@@ -156,10 +157,10 @@ class NavSelectorPopoverTriggerDirective {
     toggleDisplay() {
         this.apNavSelectorPopoverTrigger().toggle(this.el);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.9", type: NavSelectorPopoverTriggerDirective, isStandalone: true, selector: "[apNavSelectorPopoverTrigger]", inputs: { apNavSelectorPopoverTrigger: { classPropertyName: "apNavSelectorPopoverTrigger", publicName: "apNavSelectorPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, apNavSelectorPopoverTriggerMode: { classPropertyName: "apNavSelectorPopoverTriggerMode", publicName: "apNavSelectorPopoverTriggerMode", isSignal: true, isRequired: false, transformFunction: null }, apNavSelectorPopoverDisabled: { classPropertyName: "apNavSelectorPopoverDisabled", publicName: "apNavSelectorPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorPopoverTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", type: NavSelectorPopoverTriggerDirective, isStandalone: true, selector: "[apNavSelectorPopoverTrigger]", inputs: { apNavSelectorPopoverTrigger: { classPropertyName: "apNavSelectorPopoverTrigger", publicName: "apNavSelectorPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, apNavSelectorPopoverTriggerMode: { classPropertyName: "apNavSelectorPopoverTriggerMode", publicName: "apNavSelectorPopoverTriggerMode", isSignal: true, isRequired: false, transformFunction: null }, apNavSelectorPopoverDisabled: { classPropertyName: "apNavSelectorPopoverDisabled", publicName: "apNavSelectorPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorPopoverTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[apNavSelectorPopoverTrigger]',
@@ -1201,7 +1202,9 @@ class NavSelectorBuilder {
         const detailsDisplayable = this.isLeafLogicValid(leaf, LeafLogics.COUNTER) && !!leaf.details.length;
         const foldable = !!leaf.details.length && detailsDisplayable;
         const folded = true;
-        const counter = (leaf.details.filter(detail => !detail.excludedCounterSum).reduce((acc, detail) => acc + (detail.counter ?? 0), 0) || leaf.counter) ?? 0;
+        const counter = (leaf.details.filter(detail => !detail.excludedCounterSum).reduce((acc, detail) => acc + (detail.counter ?? 0), 0) ||
+            leaf.counter) ??
+            0;
         const counterDisplayable = counter !== 0 && this.isLeafLogicValid(leaf, LeafLogics.COUNTER);
         const disabled = leaf.disableReason !== null;
         const viewMoreDisplayable = leaf.details.length > detailsDisplayedLimit;
@@ -1230,6 +1233,8 @@ class NavSelectorBuilder {
             network: leaf.network,
             displayTokenInvalid: leaf.tokenInvalid && this.isLeafLogicValid(leaf, LeafLogics.TOKEN_INVALID, LeafLogics.COUNTER),
             displayFeatureLocked: leaf.featureLocked && this.isLeafLogicValid(leaf, LeafLogics.FEATURE_LOCKED, LeafLogics.TOKEN_INVALID, LeafLogics.COUNTER),
+            startSymbolId: leaf.startSymbolId,
+            startDotColor: leaf.startDotColor,
             selected: false,
             selectable: multipleModeEnabled
                 ? this.isLeafLogicValid(leaf, LeafLogics.COUNTER)
@@ -1642,8 +1647,8 @@ class NavSelectorViewMore {
  * It should be provided by the component to ensure that if many nav selectors are used in the same page, they don't share the same state.
  */
 class NavSelectorState {
-    entries = signal([]);
-    multipleModeEnabled = signal(false);
+    entries = signal([], ...(ngDevMode ? [{ debugName: "entries" }] : []));
+    multipleModeEnabled = signal(false, ...(ngDevMode ? [{ debugName: "multipleModeEnabled" }] : []));
     _texts = signal({
         title: '',
         only: '',
@@ -1654,12 +1659,12 @@ class NavSelectorState {
         noResults: '',
         viewMore: '',
         viewLess: '',
-    });
+    }, ...(ngDevMode ? [{ debugName: "_texts" }] : []));
     isMultipleModeEnabled = this.multipleModeEnabled;
-    search = signal('');
-    noResults = computed(() => this.entries().every(({ hidden }) => hidden));
+    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : []));
+    noResults = computed(() => this.entries().every(({ hidden }) => hidden), ...(ngDevMode ? [{ debugName: "noResults" }] : []));
     texts = this._texts.asReadonly();
-    expanded = signal(true);
+    expanded = signal(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     previousSelectedUids = [];
     selectedUidsChangeCallback = null;
     constructor() {
@@ -1824,10 +1829,10 @@ class NavSelectorState {
     viewLess(leaf) {
         this.entries.update(entries => NavSelectorViewMore.viewLess(entries, leaf.uid));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorState });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorState });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorState, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1841,17 +1846,17 @@ class NavSelectorLeafDetailPresenter {
             this.navSelectorState.onLeafDetailClicked(detail);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailPresenter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailPresenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailPresenter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: NavSelectorState }] });
 
 class NavSelectorLeafDetailComponent {
     navSelectorLeafDetailPresenter;
-    detail = input.required();
-    embedded = input(false);
+    detail = input.required(...(ngDevMode ? [{ debugName: "detail" }] : []));
+    embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
     constructor(navSelectorLeafDetailPresenter) {
         this.navSelectorLeafDetailPresenter = navSelectorLeafDetailPresenter;
     }
@@ -1861,12 +1866,12 @@ class NavSelectorLeafDetailComponent {
             this.navSelectorLeafDetailPresenter.onLeafDetailClicked(this.detail());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, deps: [{ token: NavSelectorLeafDetailPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailComponent, isStandalone: true, selector: "ap-nav-selector-leaf-detail", inputs: { detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class.selected": "detail().selected", "class.embedded": "embedded()", "class.disabled": "detail().displayError" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n    <ap-counter\n        color=\"orange\"\n        size=\"normal\"\n        [background]=\"false\">\n        {{ detail().counter }}\n    </ap-counter>\n}\n@if (detail().displayError) {\n    <ap-symbol\n        size=\"sm\"\n        symbolId=\"error_fill\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1;overflow:hidden}:host.embedded{padding:0}:host.embedded .caption{font-size:var(--ref-font-size-sm)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailComponent, deps: [{ token: NavSelectorLeafDetailPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorLeafDetailComponent, isStandalone: true, selector: "ap-nav-selector-leaf-detail", inputs: { detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class.selected": "detail().selected", "class.embedded": "embedded()", "class.disabled": "detail().displayError" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n    <ap-counter\n        color=\"orange\"\n        size=\"normal\"\n        [background]=\"false\">\n        {{ detail().counter }}\n    </ap-counter>\n}\n@if (detail().displayError) {\n    <ap-symbol\n        size=\"sm\"\n        symbolId=\"error_fill\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1;overflow:hidden}:host.embedded{padding:0}:host.embedded .caption{font-size:var(--ref-font-size-sm)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-leaf-detail', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CounterComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], host: {
+            args: [{ selector: 'ap-nav-selector-leaf-detail', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CounterComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], host: {
                         '(click)': 'onClick($event)',
                         '[class.selected]': 'detail().selected',
                         '[class.embedded]': 'embedded()',
@@ -1884,8 +1889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 
 class NavSelectorLeafDetailsPresenter {
     navSelectorState;
-    viewMoreText = computed(() => this.navSelectorState.texts().viewMore);
-    viewLessText = computed(() => this.navSelectorState.texts().viewLess);
+    viewMoreText = computed(() => this.navSelectorState.texts().viewMore, ...(ngDevMode ? [{ debugName: "viewMoreText" }] : []));
+    viewLessText = computed(() => this.navSelectorState.texts().viewLess, ...(ngDevMode ? [{ debugName: "viewLessText" }] : []));
     constructor(navSelectorState) {
         this.navSelectorState = navSelectorState;
     }
@@ -1903,26 +1908,26 @@ class NavSelectorLeafDetailsPresenter {
     viewLess(leaf) {
         this.navSelectorState.viewLess(leaf);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsPresenter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailsPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailsPresenter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsPresenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailsPresenter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: NavSelectorState }] });
 
 class NavSelectorLeafDetailsComponent {
     el;
     navSelectorLeafDetailsPresenter;
-    leaf = input.required();
-    details = input.required();
-    firstDetails = computed(() => this.details().slice(0, this.leaf().viewMoreDetailsDisplayedLimit));
-    lastDetails = computed(() => this.details().slice(this.leaf().viewMoreDetailsDisplayedLimit));
-    viewMoreDelay = signal(false);
-    animationState = computed(() => (this.leaf().viewMoreDisplayable && this.leaf().viewMoreDisplayed ? 'collapsed' : 'expanded'));
+    leaf = input.required(...(ngDevMode ? [{ debugName: "leaf" }] : []));
+    details = input.required(...(ngDevMode ? [{ debugName: "details" }] : []));
+    firstDetails = computed(() => this.details().slice(0, this.leaf().viewMoreDetailsDisplayedLimit), ...(ngDevMode ? [{ debugName: "firstDetails" }] : []));
+    lastDetails = computed(() => this.details().slice(this.leaf().viewMoreDetailsDisplayedLimit), ...(ngDevMode ? [{ debugName: "lastDetails" }] : []));
+    viewMoreDelay = signal(false, ...(ngDevMode ? [{ debugName: "viewMoreDelay" }] : []));
+    animationState = computed(() => (this.leaf().viewMoreDisplayable && this.leaf().viewMoreDisplayed ? 'collapsed' : 'expanded'), ...(ngDevMode ? [{ debugName: "animationState" }] : []));
     /**
      * The height when details are all displayed
      */
-    maxHeight = signal('0px');
+    maxHeight = signal('0px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
     constructor(el, navSelectorLeafDetailsPresenter) {
         this.el = el;
         this.navSelectorLeafDetailsPresenter = navSelectorLeafDetailsPresenter;
@@ -1951,8 +1956,8 @@ class NavSelectorLeafDetailsComponent {
         event.stopImmediatePropagation();
         this.toggleViewMore();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafDetailsPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailsComponent, isStandalone: true, selector: "ap-nav-selector-leaf-details", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null }, details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-expanded": "!leaf().viewMoreDisplayable || leaf().viewMoreDisplayed" } }, providers: [NavSelectorLeafDetailsPresenter], ngImport: i0, template: "@for (detail of firstDetails(); track detail.uid) {\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n    </div>\n}\n\n@if (leaf().viewMoreDisplayable) {\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (viewMoreDelay()) {\n            @for (detail of lastDetails(); track detail.uid) {\n                <div class=\"detail\">\n                    <div class=\"separator\">\n                        <div class=\"rectangle\"></div>\n                    </div>\n                    <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n                </div>\n            }\n        }\n    </div>\n\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <a\n            tabindex=\"0\"\n            role=\"button\"\n            class=\"standalone view-more\"\n            (keydown.space)=\"onSpaceOrEnter($event)\"\n            (keydown.enter)=\"onSpaceOrEnter($event)\"\n            (click)=\"toggleViewMore()\">\n            @if (leaf().viewMoreDisplayed) {\n                {{ navSelectorLeafDetailsPresenter.viewMoreText() }}\n            } @else {\n                {{ navSelectorLeafDetailsPresenter.viewLessText() }}\n            }\n        </a>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}:host .detail{display:flex;align-self:stretch}:host .separator{display:flex;padding:0 11px 0 20px;align-items:center;align-self:stretch}:host .rectangle{width:1px;align-self:stretch;background:var(--ref-color-grey-10)}:host .view-more{display:flex;padding:8px;align-items:center;align-self:stretch;color:var(--ref-color-electric-blue-150);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 .details-container{display:flex;flex-direction:column;align-self:stretch}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailsComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafDetailsPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorLeafDetailsComponent, isStandalone: true, selector: "ap-nav-selector-leaf-details", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null }, details: { classPropertyName: "details", publicName: "details", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-expanded": "!leaf().viewMoreDisplayable || leaf().viewMoreDisplayed" } }, providers: [NavSelectorLeafDetailsPresenter], ngImport: i0, template: "@for (detail of firstDetails(); track detail.uid) {\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n    </div>\n}\n\n@if (leaf().viewMoreDisplayable) {\n    <div\n        class=\"details-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight()\n            }\n        }\">\n        @if (viewMoreDelay()) {\n            @for (detail of lastDetails(); track detail.uid) {\n                <div class=\"detail\">\n                    <div class=\"separator\">\n                        <div class=\"rectangle\"></div>\n                    </div>\n                    <ap-nav-selector-leaf-detail [detail]=\"detail\" />\n                </div>\n            }\n        }\n    </div>\n\n    <div class=\"detail\">\n        <div class=\"separator\">\n            <div class=\"rectangle\"></div>\n        </div>\n        <a\n            tabindex=\"0\"\n            role=\"button\"\n            class=\"standalone view-more\"\n            (keydown.space)=\"onSpaceOrEnter($event)\"\n            (keydown.enter)=\"onSpaceOrEnter($event)\"\n            (click)=\"toggleViewMore()\">\n            @if (leaf().viewMoreDisplayed) {\n                {{ navSelectorLeafDetailsPresenter.viewMoreText() }}\n            } @else {\n                {{ navSelectorLeafDetailsPresenter.viewLessText() }}\n            }\n        </a>\n    </div>\n}\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}:host .detail{display:flex;align-self:stretch}:host .separator{display:flex;padding:0 11px 0 20px;align-items:center;align-self:stretch}:host .rectangle{width:1px;align-self:stretch;background:var(--ref-color-grey-10)}:host .view-more{display:flex;padding:8px;align-items:center;align-self:stretch;color:var(--ref-color-electric-blue-150);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 .details-container{display:flex;flex-direction:column;align-self:stretch}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }], animations: [
             /**
              * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
              */
@@ -1973,9 +1978,9 @@ class NavSelectorLeafDetailsComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-leaf-details', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafDetailComponent], providers: [NavSelectorLeafDetailsPresenter], host: {
+            args: [{ selector: 'ap-nav-selector-leaf-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafDetailComponent], providers: [NavSelectorLeafDetailsPresenter], host: {
                         '[attr.aria-expanded]': '!leaf().viewMoreDisplayable || leaf().viewMoreDisplayed',
                     }, animations: [
                         /**
@@ -2005,19 +2010,19 @@ const NavSelectorPopoverPlacement = {
 };
 class NavSelectorPopoverComponent {
     elementRef;
-    placement = input(NavSelectorPopoverPlacement.RIGHT);
-    popoverTitle = input();
-    offset = input({ mainAxis: 0, crossAxis: 0 });
-    items = contentChildren('item');
-    displayed = signal(false);
+    placement = input(NavSelectorPopoverPlacement.RIGHT, ...(ngDevMode ? [{ debugName: "placement" }] : []));
+    popoverTitle = input(...(ngDevMode ? [undefined, { debugName: "popoverTitle" }] : []));
+    offset = input({ mainAxis: 0, crossAxis: 0 }, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    items = contentChildren('item', ...(ngDevMode ? [{ debugName: "items" }] : []));
+    displayed = signal(false, ...(ngDevMode ? [{ debugName: "displayed" }] : []));
     navSelectorPopoverDisplayed = this.displayed.asReadonly();
     position = signal({
         top: 0,
         left: 0,
-    });
-    parentEl = signal(null);
-    mainAxisOffset = computed(() => this.offset().mainAxis ?? 0);
-    crossAxisOffset = computed(() => this.offset().crossAxis ?? 0);
+    }, ...(ngDevMode ? [{ debugName: "position" }] : []));
+    parentEl = signal(null, ...(ngDevMode ? [{ debugName: "parentEl" }] : []));
+    mainAxisOffset = computed(() => this.offset().mainAxis ?? 0, ...(ngDevMode ? [{ debugName: "mainAxisOffset" }] : []));
+    crossAxisOffset = computed(() => this.offset().crossAxis ?? 0, ...(ngDevMode ? [{ debugName: "crossAxisOffset" }] : []));
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
@@ -2113,12 +2118,12 @@ class NavSelectorPopoverComponent {
             this.displayed.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorPopoverComponent, isStandalone: true, selector: "ap-nav-selector-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, popoverTitle: { classPropertyName: "popoverTitle", publicName: "popoverTitle", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "window:wheel": "onAnyScroll()", "window:focusin": "onFocusChanged($event)", "window:click": "onAnyClick($event)" }, properties: { "style.top.px": "position().top", "style.left.px": "position().left" } }, queries: [{ propertyName: "items", predicate: ["item"], isSignal: true }], ngImport: i0, template: "@if (displayed()) {\n    <div class=\"nav-selector-popover\">\n        @if (popoverTitle()) {\n            <div (click)=\"onTitleCLicked($event)\" class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n        }\n\n        @let itemsNotNull = items();\n\n        @if (itemsNotNull?.length) {\n            @for (item of itemsNotNull; track item) {\n                <ng-container [ngTemplateOutlet]=\"item\"/>\n            }\n        } @else {\n            <ng-content select=\"[item]\"/>\n        }\n    </div>\n}\n", styles: [":host{position:fixed;z-index:1000}:host .nav-selector-popover{min-width:225px;padding:var(--ref-spacing-xxs) 0;background:var(--ref-color-white);border-radius:var(--ref-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326}:host .nav-selector-popover__title{cursor:auto;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm) var(--ref-spacing-xxxs);text-align:left;color:var(--ref-color-grey-100);font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorPopoverComponent, isStandalone: true, selector: "ap-nav-selector-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, popoverTitle: { classPropertyName: "popoverTitle", publicName: "popoverTitle", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "window:wheel": "onAnyScroll()", "window:focusin": "onFocusChanged($event)", "window:click": "onAnyClick($event)" }, properties: { "style.top.px": "position().top", "style.left.px": "position().left" } }, queries: [{ propertyName: "items", predicate: ["item"], isSignal: true }], ngImport: i0, template: "@if (displayed()) {\n    <div class=\"nav-selector-popover\">\n        @if (popoverTitle()) {\n            <div (click)=\"onTitleCLicked($event)\" class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n        }\n\n        @let itemsNotNull = items();\n\n        @if (itemsNotNull?.length) {\n            @for (item of itemsNotNull; track item) {\n                <ng-container [ngTemplateOutlet]=\"item\"/>\n            }\n        } @else {\n            <ng-content select=\"[item]\"/>\n        }\n    </div>\n}\n", styles: [":host{position:fixed;z-index:1000}:host .nav-selector-popover{min-width:225px;padding:var(--ref-spacing-xxs) 0;background:var(--ref-color-white);border-radius:var(--ref-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326}:host .nav-selector-popover__title{cursor:auto;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm) var(--ref-spacing-xxxs);text-align:left;color:var(--ref-color-grey-100);font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ap-nav-selector-popover', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.top.px]': 'position().top',
                         '[style.left.px]': 'position().left',
                         '(click)': 'onClick($event)',
@@ -2129,13 +2134,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class NavSelectorLeafPresenter {
-    navSelectorState;
-    expanded = computed(() => this.navSelectorState.expanded());
-    texts = computed(() => this.navSelectorState.texts());
-    isMultipleModeEnabled = computed(() => this.navSelectorState.isMultipleModeEnabled());
-    constructor(navSelectorState) {
-        this.navSelectorState = navSelectorState;
-    }
+    navSelectorState = inject(NavSelectorState);
+    expanded = computed(() => this.navSelectorState.expanded(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    texts = computed(() => this.navSelectorState.texts(), ...(ngDevMode ? [{ debugName: "texts" }] : []));
+    isMultipleModeEnabled = computed(() => this.navSelectorState.isMultipleModeEnabled(), ...(ngDevMode ? [{ debugName: "isMultipleModeEnabled" }] : []));
     selectLeaf(leaf) {
         this.navSelectorState.onLeafClicked(leaf);
     }
@@ -2154,28 +2156,29 @@ class NavSelectorLeafPresenter {
     onLeafDetailClicked(detail) {
         this.navSelectorState.onLeafDetailClicked(detail);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafPresenter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafPresenter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafPresenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafPresenter, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: NavSelectorState }] });
+        }] });
 
 class NavSelectorLeafComponent {
     el;
     navSelectorLeafPresenter;
-    leaf = input.required();
+    symbolRegistry = inject(SymbolRegistry);
+    leaf = input.required(...(ngDevMode ? [{ debugName: "leaf" }] : []));
     actionClicked = output();
-    initial = computed(() => this.leaf().alias[0].toUpperCase());
-    foldSymbol = computed(() => (this.leaf().folded ? 'chevron-down' : 'chevron-up'));
-    focused = signal(false);
-    aliasEl = viewChild('alias');
+    initial = computed(() => this.leaf().alias[0].toUpperCase(), ...(ngDevMode ? [{ debugName: "initial" }] : []));
+    foldSymbol = computed(() => (this.leaf().folded ? 'chevron-down' : 'chevron-up'), ...(ngDevMode ? [{ debugName: "foldSymbol" }] : []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    aliasEl = viewChild('alias', ...(ngDevMode ? [{ debugName: "aliasEl" }] : []));
     aliasBoundedClientRect = signal({
         offsetWidth: 0,
         offsetHeight: 0,
         scrollWidth: 0,
         scrollHeight: 0,
-    });
+    }, ...(ngDevMode ? [{ debugName: "aliasBoundedClientRect" }] : []));
     tooltipContent = computed(() => {
         const content = [];
         const el = this.aliasBoundedClientRect();
@@ -2193,10 +2196,10 @@ class NavSelectorLeafComponent {
             content.push(this.navSelectorLeafPresenter.texts().tokenInvalid);
         }
         return content.join('<br>');
-    });
-    tooltipDisabled = computed(() => !this.tooltipContent().length || this.leaf().detailsDisplayable);
-    foldedWithDelay = signal(true);
-    network = computed(() => (this.leaf().network ? this.leaf().network : undefined));
+    }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
+    tooltipDisabled = computed(() => !this.tooltipContent().length || this.leaf().detailsDisplayable, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : []));
+    foldedWithDelay = signal(true, ...(ngDevMode ? [{ debugName: "foldedWithDelay" }] : []));
+    network = computed(() => (this.leaf().network ? this.leaf().network : undefined), ...(ngDevMode ? [{ debugName: "network" }] : []));
     leafActions = computed(() => {
         return this.leaf().actions.map(action => ({
             id: action.id ?? undefined,
@@ -2206,11 +2209,12 @@ class NavSelectorLeafComponent {
             disabled: action.status === 'disabled',
             featureLockEnabled: action.status === 'locked',
         }));
-    });
+    }, ...(ngDevMode ? [{ debugName: "leafActions" }] : []));
     constructor(el, navSelectorLeafPresenter) {
         this.el = el;
         this.navSelectorLeafPresenter = navSelectorLeafPresenter;
-        afterRender(() => untracked(() => {
+        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
+        afterEveryRender(() => untracked(() => {
             const newMaxHeight = this.computeMaxHeight();
             if (this.maxHeight() !== newMaxHeight) {
                 this.maxHeight.set(newMaxHeight);
@@ -2229,8 +2233,8 @@ class NavSelectorLeafComponent {
             });
         });
     }
-    animationState = computed(() => (this.leaf().folded ? 'collapsed' : 'expanded'));
-    maxHeight = signal('0px');
+    animationState = computed(() => (this.leaf().folded ? 'collapsed' : 'expanded'), ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    maxHeight = signal('0px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
     onClick(event) {
         event.stopImmediatePropagation();
         this.navSelectorLeafPresenter.selectLeaf(this.leaf());
@@ -2319,8 +2323,8 @@ class NavSelectorLeafComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, 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 && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\n                [disabled]=\"!leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        <ap-avatar\n            size=\"24\"\n            [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n            [network]=\"$any(leaf().network)\"\n            [showInitials]=\"initial()\" />\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ leaf().alias }}\n        </span>\n\n        <a\n            class=\"standalone only-button\"\n            role=\"button\"\n            [attr.aria-label]=\"'Select only ' + leaf().alias\"\n            [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n            (keydown.space)=\"selectOnly($event)\"\n            (keydown.enter)=\"selectOnly($event)\"\n            (click)=\"clickOnSelectOnly($event)\">\n            {{ navSelectorLeafPresenter.texts().only }}\n        </a>\n\n        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    size=\"sm\"\n                    symbolId=\"more\"\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}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{-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-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: 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"] }, { 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 ɵ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 && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\n                [disabled]=\"!leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        <ap-avatar\n            size=\"24\"\n            [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n            [network]=\"$any(leaf().network)\"\n            [showInitials]=\"initial()\" />\n\n        @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\n                        class=\"start-dot\"\n                        [style.background-color]=\"leaf().startDotColor\"></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                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    size=\"sm\"\n                    symbolId=\"more\"\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}: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{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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: 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"] }, { 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)
              */
@@ -2341,9 +2345,9 @@ class NavSelectorLeafComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-leaf', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'ap-nav-selector-leaf', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ActionDropdownComponent,
                         ActionDropdownTriggerDirective,
                         AvatarComponent,
@@ -2382,14 +2386,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                                 animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
                             ]),
                         ]),
-                    ], template: "<!-- 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 && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\n                [disabled]=\"!leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        <ap-avatar\n            size=\"24\"\n            [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n            [network]=\"$any(leaf().network)\"\n            [showInitials]=\"initial()\" />\n\n        <span\n            #alias\n            class=\"caption\">\n            {{ leaf().alias }}\n        </span>\n\n        <a\n            class=\"standalone only-button\"\n            role=\"button\"\n            [attr.aria-label]=\"'Select only ' + leaf().alias\"\n            [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n            (keydown.space)=\"selectOnly($event)\"\n            (keydown.enter)=\"selectOnly($event)\"\n            (click)=\"clickOnSelectOnly($event)\">\n            {{ navSelectorLeafPresenter.texts().only }}\n        </a>\n\n        <div class=\"end-actions\">\n            @if (leaf().actionsDisplayable) {\n                <ap-symbol\n                    class=\"actions-menu\"\n                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    size=\"sm\"\n                    symbolId=\"more\"\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}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{-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-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
+                    ], template: "<!-- 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 && leaf().detailsDisplayable\"\n        [class.details-displayable]=\"leaf().detailsDisplayable\"\n        [apTreeNodeAccessibility]=\"leaf()\"\n        (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n        (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n        (focusin)=\"focused.set(true)\"\n        (focusout)=\"focused.set(false)\"\n        (click)=\"onClick($event)\">\n        @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n            <ap-checkbox\n                [name]=\"leaf().uid\"\n                [checked]=\"leaf().selected\"\n                [aria-label]=\"leaf().alias\"\n                [disabled]=\"!leaf().selectable\"\n                (click)=\"eventStopper($event)\"\n                (change)=\"onCheckboxToggle()\" />\n        }\n        <ap-avatar\n            size=\"24\"\n            [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n            [network]=\"$any(leaf().network)\"\n            [showInitials]=\"initial()\" />\n\n        @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\n                        class=\"start-dot\"\n                        [style.background-color]=\"leaf().startDotColor\"></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                    [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n                    size=\"sm\"\n                    symbolId=\"more\"\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}: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{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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .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(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafPresenter }] });
 
 class NavSelectorGroupPresenter {
     navSelectorState;
-    expanded = computed(() => this.navSelectorState.expanded());
-    texts = computed(() => this.navSelectorState.texts());
-    isMultipleModeEnabled = computed(() => this.navSelectorState.isMultipleModeEnabled());
+    expanded = computed(() => this.navSelectorState.expanded(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    texts = computed(() => this.navSelectorState.texts(), ...(ngDevMode ? [{ debugName: "texts" }] : []));
+    isMultipleModeEnabled = computed(() => this.navSelectorState.isMultipleModeEnabled(), ...(ngDevMode ? [{ debugName: "isMultipleModeEnabled" }] : []));
     constructor(navSelectorState) {
         this.navSelectorState = navSelectorState;
     }
@@ -2405,26 +2409,26 @@ class NavSelectorGroupPresenter {
     unfold(group) {
         this.navSelectorState.unfold(group);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupPresenter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorGroupPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorGroupPresenter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupPresenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorGroupPresenter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: NavSelectorState }] });
 
 class NavSelectorGroupComponent {
     el;
     navSelectorGroupPresenter;
-    group = input.required();
+    group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
     actionClicked = output();
-    foldSymbol = computed(() => (this.group().folded ? 'chevron-down' : 'chevron-up'));
-    aliasEl = viewChild('alias');
+    foldSymbol = computed(() => (this.group().folded ? 'chevron-down' : 'chevron-up'), ...(ngDevMode ? [{ debugName: "foldSymbol" }] : []));
+    aliasEl = viewChild('alias', ...(ngDevMode ? [{ debugName: "aliasEl" }] : []));
     aliasBoundedClientRect = signal({
         offsetWidth: 0,
         offsetHeight: 0,
         scrollWidth: 0,
         scrollHeight: 0,
-    });
+    }, ...(ngDevMode ? [{ debugName: "aliasBoundedClientRect" }] : []));
     tooltipContent = computed(() => {
         const content = [];
         const el = this.aliasBoundedClientRect();
@@ -2435,14 +2439,14 @@ class NavSelectorGroupComponent {
             content.push(this.navSelectorGroupPresenter.texts().groupTokenInvalid);
         }
         return content.join('<br>');
-    });
-    tooltipDisabled = computed(() => !this.tooltipContent().length);
-    foldedWithDelay = signal(true);
-    animationState = computed(() => (this.group().folded ? 'collapsed' : 'expanded'));
+    }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
+    tooltipDisabled = computed(() => !this.tooltipContent().length, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : []));
+    foldedWithDelay = signal(true, ...(ngDevMode ? [{ debugName: "foldedWithDelay" }] : []));
+    animationState = computed(() => (this.group().folded ? 'collapsed' : 'expanded'), ...(ngDevMode ? [{ debugName: "animationState" }] : []));
     constructor(el, navSelectorGroupPresenter) {
         this.el = el;
         this.navSelectorGroupPresenter = navSelectorGroupPresenter;
-        afterRender(() => untracked(() => {
+        afterEveryRender(() => untracked(() => {
             const maxHeight = this.computeMaxHeight();
             if (this.maxHeight() !== maxHeight) {
                 this.maxHeight.set(maxHeight);
@@ -2461,7 +2465,7 @@ class NavSelectorGroupComponent {
             });
         });
     }
-    maxHeight = signal('0px');
+    maxHeight = signal('0px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
     onKeydownSpaceOrEnter(event) {
         event.stopImmediatePropagation();
         // Prevent to toggle folding when focus is on the checkbox
@@ -2515,8 +2519,8 @@ class NavSelectorGroupComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorGroupPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, 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"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
+    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"] }, { 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)
              */
@@ -2537,9 +2541,9 @@ class NavSelectorGroupComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], imports: [
+            args: [{ selector: 'ap-nav-selector-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], imports: [
                         SymbolComponent,
                         CounterComponent,
                         NavSelectorLeafComponent,
@@ -2575,7 +2579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
 
 class NavSelectorCategoryPresenter {
     navSelectorState;
-    expanded = computed(() => this.navSelectorState.expanded());
+    expanded = computed(() => this.navSelectorState.expanded(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     constructor(navSelectorState) {
         this.navSelectorState = navSelectorState;
     }
@@ -2591,40 +2595,40 @@ class NavSelectorCategoryPresenter {
         event.stopImmediatePropagation();
         this.navSelectorState.unfold(category);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryPresenter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorCategoryPresenter, deps: [{ token: NavSelectorState }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorCategoryPresenter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryPresenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorCategoryPresenter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: NavSelectorState }] });
 
 class NavSelectorCategoryComponent {
     el;
     navSelectorCategoryPresenter;
-    category = input.required();
+    category = input.required(...(ngDevMode ? [{ debugName: "category" }] : []));
     actionClicked = output();
-    foldSymbol = computed(() => (this.category().folded ? 'chevron-down' : 'chevron-up'));
-    foldedWithDelay = signal(true);
-    animationState = computed(() => (this.category().folded ? 'collapsed' : 'expanded'));
-    aliasEl = viewChild('alias');
+    foldSymbol = computed(() => (this.category().folded ? 'chevron-down' : 'chevron-up'), ...(ngDevMode ? [{ debugName: "foldSymbol" }] : []));
+    foldedWithDelay = signal(true, ...(ngDevMode ? [{ debugName: "foldedWithDelay" }] : []));
+    animationState = computed(() => (this.category().folded ? 'collapsed' : 'expanded'), ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    aliasEl = viewChild('alias', ...(ngDevMode ? [{ debugName: "aliasEl" }] : []));
     aliasBoundedClientRect = signal({
         offsetWidth: 0,
         offsetHeight: 0,
         scrollWidth: 0,
         scrollHeight: 0,
-    });
+    }, ...(ngDevMode ? [{ debugName: "aliasBoundedClientRect" }] : []));
     tooltipContent = computed(() => {
         const el = this.aliasBoundedClientRect();
         if (!this.navSelectorCategoryPresenter.expanded() || el.offsetWidth < el.scrollWidth || el.offsetHeight < el.scrollHeight) {
             return this.category().alias;
         }
         return '';
-    });
-    tooltipDisabled = computed(() => !this.tooltipContent().length);
+    }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
+    tooltipDisabled = computed(() => !this.tooltipContent().length, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : []));
     constructor(el, navSelectorCategoryPresenter) {
         this.el = el;
         this.navSelectorCategoryPresenter = navSelectorCategoryPresenter;
-        afterRender(() => untracked(() => {
+        afterEveryRender(() => untracked(() => {
             const maxHeight = this.computeMaxHeight();
             if (this.maxHeight() !== maxHeight) {
                 this.maxHeight.set(maxHeight);
@@ -2643,7 +2647,7 @@ class NavSelectorCategoryComponent {
             });
         });
     }
-    maxHeight = signal('0px');
+    maxHeight = signal('0px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
     computeMaxHeight() {
         let maxHeight = this.el.nativeElement.clientHeight;
         if (this.category().folded) {
@@ -2666,8 +2670,8 @@ class NavSelectorCategoryComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorCategoryPresenter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { listeners: { "keydown.arrowLeft": "navSelectorCategoryPresenter.fold($event, this.category())", "keydown.arrowRight": "navSelectorCategoryPresenter.unfold($event, this.category())" }, properties: { "class.minified": "!navSelectorCategoryPresenter.expanded()" } }, providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorCategoryPresenter.expanded()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <span\n            #alias\n            class=\"caption\">\n            {{ category().alias }}\n        </span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [symbolId]=\"foldSymbol()\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @if (category().children.length === 0) {\n                    @if (category().emptyStateTitle) {\n                        <div class=\"empty-state\">\n                            {{ category().emptyStateTitle }}\n                        </div>\n                    }\n                } @else {\n                    @for (child of category().children; track child.uid) {\n                        @if (!child.hidden) {\n                            <div\n                                class=\"entry\"\n                                [class.folder]=\"child.type === 'GROUP'\">\n                                @if (child.type === 'LEAF') {\n                                    <ap-nav-selector-leaf\n                                        [leaf]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                } @else if (child.type === 'GROUP') {\n                                    <ap-nav-selector-group\n                                        [group]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTreeNodeAccessibility]=\"category()\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <div class=\"name-container\">\n            <span class=\"caption\">{{ category().alias }}</span>\n        </div>\n\n        <div class=\"toggle\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"foldSymbol()\" />\n        </div>\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\n                            @if (child.type === 'LEAF') {\n                                <ap-nav-selector-leaf\n                                    [leaf]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            } @else if (child.type === 'GROUP') {\n                                <ap-nav-selector-group\n                                    [group]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            }\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .children-container .empty-state{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;color:var(--ref-color-grey-80);padding:var(--ref-spacing-xxs)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{-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(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorCategoryComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorCategoryPresenter }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { listeners: { "keydown.arrowLeft": "navSelectorCategoryPresenter.fold($event, this.category())", "keydown.arrowRight": "navSelectorCategoryPresenter.unfold($event, this.category())" }, properties: { "class.minified": "!navSelectorCategoryPresenter.expanded()" } }, providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorCategoryPresenter.expanded()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\">\n        <span\n            #alias\n            class=\"caption\">\n            {{ category().alias }}\n        </span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [symbolId]=\"foldSymbol()\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @if (category().children.length === 0) {\n                    @if (category().emptyStateTitle) {\n                        <div class=\"empty-state\">\n                            {{ category().emptyStateTitle }}\n                        </div>\n                    }\n                } @else {\n                    @for (child of category().children; track child.uid) {\n                        @if (!child.hidden) {\n                            <div\n                                class=\"entry\"\n                                [class.folder]=\"child.type === 'GROUP'\">\n                                @if (child.type === 'LEAF') {\n                                    <ap-nav-selector-leaf\n                                        [leaf]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                } @else if (child.type === 'GROUP') {\n                                    <ap-nav-selector-group\n                                        [group]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTreeNodeAccessibility]=\"category()\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\">\n        <div class=\"name-container\">\n            <span class=\"caption\">{{ category().alias }}</span>\n        </div>\n\n        <div class=\"toggle\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"foldSymbol()\" />\n        </div>\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\n                            @if (child.type === 'LEAF') {\n                                <ap-nav-selector-leaf\n                                    [leaf]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            } @else if (child.type === 'GROUP') {\n                                <ap-nav-selector-group\n                                    [group]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            }\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .children-container .empty-state{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;color:var(--ref-color-grey-80);padding:var(--ref-spacing-xxs)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{-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(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], animations: [
             /**
              * Overflow hidden is put only during the animation and on the collapsed state because if it is put on the expanded state then children’s border will be cut (hover / focus)
              */
@@ -2688,9 +2692,9 @@ class NavSelectorCategoryComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector-category', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, TreeNodeAccessibilityDirective, TooltipDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
+            args: [{ selector: 'ap-nav-selector-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, TreeNodeAccessibilityDirective, TooltipDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
                         '[class.minified]': '!navSelectorCategoryPresenter.expanded()',
                         '(keydown.arrowLeft)': 'navSelectorCategoryPresenter.fold($event, this.category())',
                         '(keydown.arrowRight)': 'navSelectorCategoryPresenter.unfold($event, this.category())',
@@ -2713,7 +2717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                                 animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}' }), style({ overflow: 'hidden', maxHeight: 0 })])),
                             ]),
                         ]),
-                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorCategoryPresenter.expanded()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <span\n            #alias\n            class=\"caption\">\n            {{ category().alias }}\n        </span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [symbolId]=\"foldSymbol()\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @if (category().children.length === 0) {\n                    @if (category().emptyStateTitle) {\n                        <div class=\"empty-state\">\n                            {{ category().emptyStateTitle }}\n                        </div>\n                    }\n                } @else {\n                    @for (child of category().children; track child.uid) {\n                        @if (!child.hidden) {\n                            <div\n                                class=\"entry\"\n                                [class.folder]=\"child.type === 'GROUP'\">\n                                @if (child.type === 'LEAF') {\n                                    <ap-nav-selector-leaf\n                                        [leaf]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                } @else if (child.type === 'GROUP') {\n                                    <ap-nav-selector-group\n                                        [group]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTreeNodeAccessibility]=\"category()\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n        <div class=\"name-container\">\n            <span class=\"caption\">{{ category().alias }}</span>\n        </div>\n\n        <div class=\"toggle\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"foldSymbol()\" />\n        </div>\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\n                            @if (child.type === 'LEAF') {\n                                <ap-nav-selector-leaf\n                                    [leaf]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            } @else if (child.type === 'GROUP') {\n                                <ap-nav-selector-group\n                                    [group]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            }\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .children-container .empty-state{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;color:var(--ref-color-grey-80);padding:var(--ref-spacing-xxs)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{-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(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"] }]
+                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorCategoryPresenter.expanded()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        [apTreeNodeAccessibility]=\"category()\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\">\n        <span\n            #alias\n            class=\"caption\">\n            {{ category().alias }}\n        </span>\n\n        <ap-symbol\n            class=\"folding-button\"\n            size=\"sm\"\n            [symbolId]=\"foldSymbol()\" />\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @if (category().children.length === 0) {\n                    @if (category().emptyStateTitle) {\n                        <div class=\"empty-state\">\n                            {{ category().emptyStateTitle }}\n                        </div>\n                    }\n                } @else {\n                    @for (child of category().children; track child.uid) {\n                        @if (!child.hidden) {\n                            <div\n                                class=\"entry\"\n                                [class.folder]=\"child.type === 'GROUP'\">\n                                @if (child.type === 'LEAF') {\n                                    <ap-nav-selector-leaf\n                                        [leaf]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                } @else if (child.type === 'GROUP') {\n                                    <ap-nav-selector-group\n                                        [group]=\"child\"\n                                        (actionClicked)=\"actionClicked.emit($event)\" />\n                                }\n                            </div>\n                        }\n                    }\n                }\n            </div>\n        }\n    </div>\n} @else {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [apTreeNodeAccessibility]=\"category()\"\n        [apTooltip]=\"tooltipContent()\"\n        [apTooltipDisabled]=\"tooltipDisabled()\"\n        (click)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n        (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\">\n        <div class=\"name-container\">\n            <span class=\"caption\">{{ category().alias }}</span>\n        </div>\n\n        <div class=\"toggle\">\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"foldSymbol()\" />\n        </div>\n    </div>\n\n    <div\n        class=\"children-container\"\n        [@accordion]=\"{\n            value: animationState(),\n            params: {\n                maxHeight: maxHeight(),\n            },\n        }\">\n        @if (!foldedWithDelay()) {\n            <div class=\"children\">\n                @for (child of category().children; track child.uid) {\n                    @if (!child.hidden) {\n                        <div\n                            class=\"entry\"\n                            [class.folder]=\"child.type === 'GROUP'\">\n                            @if (child.type === 'LEAF') {\n                                <ap-nav-selector-leaf\n                                    [leaf]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            } @else if (child.type === 'GROUP') {\n                                <ap-nav-selector-group\n                                    [group]=\"child\"\n                                    (actionClicked)=\"actionClicked.emit($event)\" />\n                            }\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .children-container .empty-state{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;color:var(--ref-color-grey-80);padding:var(--ref-spacing-xxs)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{-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(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
 
 const AUTO_MINIFIED_STATE_WIDTH_BREAKPOINT = 1280;
@@ -2724,26 +2728,27 @@ let nextUniqueId = 0;
 class NavSelectorComponent {
     navSelectorState;
     el;
-    navSelectorEntries = input.required();
-    translatedTexts = input.required();
-    multipleModeEnabled = input(false);
-    detailsDisplayedLimit = input(Number.MAX_SAFE_INTEGER);
-    embedded = input(false);
+    navSelectorEntries = input.required(...(ngDevMode ? [{ debugName: "navSelectorEntries" }] : []));
+    translatedTexts = input.required(...(ngDevMode ? [{ debugName: "translatedTexts" }] : []));
+    multipleModeEnabled = input(false, ...(ngDevMode ? [{ debugName: "multipleModeEnabled" }] : []));
+    detailsDisplayedLimit = input(Number.MAX_SAFE_INTEGER, ...(ngDevMode ? [{ debugName: "detailsDisplayedLimit" }] : []));
+    embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
     /**
      * If true, the nav selector will be expanded by default. Even if the width of the screen is smaller than 1280px.
      */
-    forceExpanded = input(false);
-    expandedStateLocalStorageKey = input();
-    selectedEntryUids = model.required();
+    forceExpanded = input(false, ...(ngDevMode ? [{ debugName: "forceExpanded" }] : []));
+    expandedStateLocalStorageKey = input(...(ngDevMode ? [undefined, { debugName: "expandedStateLocalStorageKey" }] : []));
+    selectedEntryUids = model.required(...(ngDevMode ? [{ debugName: "selectedEntryUids" }] : []));
     actionClicked = output();
-    headerProjection = contentChild('header');
-    contentHeaderProjection = contentChild('contentHeader');
-    footerProjection = contentChild('footer');
-    displayFooter = computed(() => this.footerProjection() !== undefined);
-    expansionState = computed(() => (this.navSelectorState.expanded() ? 'expanded' : 'minified'));
+    headerProjection = contentChild('header', ...(ngDevMode ? [{ debugName: "headerProjection" }] : []));
+    contentHeaderProjection = contentChild('contentHeader', ...(ngDevMode ? [{ debugName: "contentHeaderProjection" }] : []));
+    footerProjection = contentChild('footer', ...(ngDevMode ? [{ debugName: "footerProjection" }] : []));
+    displayFooter = computed(() => this.footerProjection() !== undefined, ...(ngDevMode ? [{ debugName: "displayFooter" }] : []));
+    expansionState = computed(() => (this.navSelectorState.expanded() ? 'expanded' : 'minified'), ...(ngDevMode ? [{ debugName: "expansionState" }] : []));
+    // eslint-disable-next-line @angular-eslint/no-output-on-prefix
     onExpansionStateChange = output();
     componentUid = `nav-selector-${nextUniqueId++}`;
-    ready = signal(false);
+    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
     constructor(navSelectorState, el) {
         this.navSelectorState = navSelectorState;
         this.el = el;
@@ -2867,17 +2872,17 @@ class NavSelectorComponent {
             localStorage.setItem(expandedStateLocalStorageKey, this.navSelectorState.expanded().toString());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorComponent, deps: [{ token: NavSelectorState }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()", "@expand": "expansionState()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "contentHeaderProjection", first: true, predicate: ["contentHeader"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav [class.embedded]=\"embedded()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let contentHeaderProjectionNotNull = contentHeaderProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    <div class=\"nav-selector__header\">\n        @if (!embedded()) {\n            @if (navSelectorState.expanded()) {\n                <span class=\"h3\">{{ translatedTexts().title }}</span>\n            }\n\n            <button\n                type=\"button\"\n                class=\"expand-button\"\n                [class.expanded]=\"navSelectorState.expanded()\"\n                (click)=\"clickExpandButton()\">\n                <ap-symbol\n                    size=\"sm\"\n                    [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n            </button>\n        }\n\n        @if (headerProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n\n        @if (navSelectorState.expanded()) {\n            <ap-input-search\n                [id]=\"componentUid + '_search'\"\n                [placeholder]=\"translatedTexts().searchPlaceholder\"\n                [ngModel]=\"navSelectorState.search()\"\n                (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n        } @else {\n            <ap-icon-button\n                (onClick)=\"onMinifiedSearchClicked()\"\n                type=\"stroked\"\n                role=\"search\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        }\n    </div>\n\n    <div\n        class=\"nav-selector__content\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n        role=\"tree\">\n        @if (contentHeaderProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n\n        @for (entry of navSelectorState.entries(); track entry.uid) {\n            @if (!entry.hidden) {\n                <div\n                    class=\"entry\"\n                    [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n                    @if (entry.type === 'LEAF') {\n                        <ap-nav-selector-leaf\n                            [leaf]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'GROUP') {\n                        <ap-nav-selector-group\n                            [group]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'CATEGORY') {\n                        <ap-nav-selector-category\n                            [category]=\"$any(entry)\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    }\n                </div>\n            }\n        }\n        @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n            <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n        }\n    </div>\n\n    @if (displayFooter() && footerProjectionNotNull) {\n        <div class=\"nav-selector__footer\">\n            <ng-container\n                [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        </div>\n    }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorComponent, deps: [{ token: NavSelectorState }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()", "@expand": "expansionState()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "contentHeaderProjection", first: true, predicate: ["contentHeader"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav [class.embedded]=\"embedded()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let contentHeaderProjectionNotNull = contentHeaderProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    <div class=\"nav-selector__header\">\n        @if (!embedded()) {\n            @if (navSelectorState.expanded()) {\n                <span class=\"h3\">{{ translatedTexts().title }}</span>\n            }\n\n            <button\n                type=\"button\"\n                class=\"expand-button\"\n                [class.expanded]=\"navSelectorState.expanded()\"\n                (click)=\"clickExpandButton()\">\n                <ap-symbol\n                    size=\"sm\"\n                    [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n            </button>\n        }\n\n        @if (headerProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n\n        @if (navSelectorState.expanded()) {\n            <ap-input-search\n                [id]=\"componentUid + '_search'\"\n                [placeholder]=\"translatedTexts().searchPlaceholder\"\n                [ngModel]=\"navSelectorState.search()\"\n                (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n        } @else {\n            <ap-icon-button\n                (onClick)=\"onMinifiedSearchClicked()\"\n                type=\"stroked\"\n                role=\"search\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        }\n\n        @if (contentHeaderProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n    </div>\n\n    <div\n        class=\"nav-selector__content\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n        role=\"tree\">\n        @for (entry of navSelectorState.entries(); track entry.uid) {\n            @if (!entry.hidden) {\n                <div\n                    class=\"entry\"\n                    [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n                    @if (entry.type === 'LEAF') {\n                        <ap-nav-selector-leaf\n                            [leaf]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'GROUP') {\n                        <ap-nav-selector-group\n                            [group]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'CATEGORY') {\n                        <ap-nav-selector-category\n                            [category]=\"$any(entry)\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    }\n                </div>\n            }\n        }\n        @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n            <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n        }\n    </div>\n\n    @if (displayFooter() && footerProjectionNotNull) {\n        <div class=\"nav-selector__footer\">\n            <ng-container\n                [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        </div>\n    }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('expand', [
                 transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
                 transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-nav-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'ap-nav-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NavSelectorLeafComponent,
                         NavSelectorGroupComponent,
                         NavSelectorCategoryComponent,
@@ -2899,7 +2904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
                             transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
                         ]),
-                    ], template: "<nav [class.embedded]=\"embedded()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let contentHeaderProjectionNotNull = contentHeaderProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    <div class=\"nav-selector__header\">\n        @if (!embedded()) {\n            @if (navSelectorState.expanded()) {\n                <span class=\"h3\">{{ translatedTexts().title }}</span>\n            }\n\n            <button\n                type=\"button\"\n                class=\"expand-button\"\n                [class.expanded]=\"navSelectorState.expanded()\"\n                (click)=\"clickExpandButton()\">\n                <ap-symbol\n                    size=\"sm\"\n                    [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n            </button>\n        }\n\n        @if (headerProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n\n        @if (navSelectorState.expanded()) {\n            <ap-input-search\n                [id]=\"componentUid + '_search'\"\n                [placeholder]=\"translatedTexts().searchPlaceholder\"\n                [ngModel]=\"navSelectorState.search()\"\n                (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n        } @else {\n            <ap-icon-button\n                (onClick)=\"onMinifiedSearchClicked()\"\n                type=\"stroked\"\n                role=\"search\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        }\n    </div>\n\n    <div\n        class=\"nav-selector__content\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n        role=\"tree\">\n        @if (contentHeaderProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n\n        @for (entry of navSelectorState.entries(); track entry.uid) {\n            @if (!entry.hidden) {\n                <div\n                    class=\"entry\"\n                    [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n                    @if (entry.type === 'LEAF') {\n                        <ap-nav-selector-leaf\n                            [leaf]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'GROUP') {\n                        <ap-nav-selector-group\n                            [group]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'CATEGORY') {\n                        <ap-nav-selector-category\n                            [category]=\"$any(entry)\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    }\n                </div>\n            }\n        }\n        @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n            <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n        }\n    </div>\n\n    @if (displayFooter() && footerProjectionNotNull) {\n        <div class=\"nav-selector__footer\">\n            <ng-container\n                [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        </div>\n    }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
+                    ], template: "<nav [class.embedded]=\"embedded()\">\n    @let headerProjectionNotNull = headerProjection();\n    @let contentHeaderProjectionNotNull = contentHeaderProjection();\n    @let footerProjectionNotNull = footerProjection();\n\n    <div class=\"nav-selector__header\">\n        @if (!embedded()) {\n            @if (navSelectorState.expanded()) {\n                <span class=\"h3\">{{ translatedTexts().title }}</span>\n            }\n\n            <button\n                type=\"button\"\n                class=\"expand-button\"\n                [class.expanded]=\"navSelectorState.expanded()\"\n                (click)=\"clickExpandButton()\">\n                <ap-symbol\n                    size=\"sm\"\n                    [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n            </button>\n        }\n\n        @if (headerProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"headerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n\n        @if (navSelectorState.expanded()) {\n            <ap-input-search\n                [id]=\"componentUid + '_search'\"\n                [placeholder]=\"translatedTexts().searchPlaceholder\"\n                [ngModel]=\"navSelectorState.search()\"\n                (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n        } @else {\n            <ap-icon-button\n                (onClick)=\"onMinifiedSearchClicked()\"\n                type=\"stroked\"\n                role=\"search\">\n                <ap-symbol symbolId=\"search\" />\n            </ap-icon-button>\n        }\n\n        @if (contentHeaderProjectionNotNull) {\n            <ng-container\n                [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        }\n    </div>\n\n    <div\n        class=\"nav-selector__content\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n        role=\"tree\">\n        @for (entry of navSelectorState.entries(); track entry.uid) {\n            @if (!entry.hidden) {\n                <div\n                    class=\"entry\"\n                    [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n                    @if (entry.type === 'LEAF') {\n                        <ap-nav-selector-leaf\n                            [leaf]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'GROUP') {\n                        <ap-nav-selector-group\n                            [group]=\"entry\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    } @else if (entry.type === 'CATEGORY') {\n                        <ap-nav-selector-category\n                            [category]=\"$any(entry)\"\n                            (actionClicked)=\"actionClicked.emit($event)\" />\n                    }\n                </div>\n            }\n        }\n        @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n            <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n        }\n    </div>\n\n    @if (displayFooter() && footerProjectionNotNull) {\n        <div class=\"nav-selector__footer\">\n            <ng-container\n                [ngTemplateOutlet]=\"footerProjectionNotNull\"\n                [ngTemplateOutletContext]=\"{\n                    expanded: navSelectorState.expanded(),\n                }\" />\n        </div>\n    }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
         }], ctorParameters: () => [{ type: NavSelectorState }, { type: i0.ElementRef }] });
 
 /**