@agorapulse/ui-components 22.0.29 → 22.0.30

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

@@ -19,6 +19,7 @@ import { apMore, apFeatureLock as apFeatureLock$1, apPlus } from '@agorapulse/ui
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
 import { CounterComponent } from '@agorapulse/ui-components/counter';
 import { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
+import { FilterDropdownButtonComponent } from '@agorapulse/ui-components/filter-dropdown';
 
 class NavSelectorPopoverItemComponent {
     selected = input(false, /* @ts-ignore */
@@ -200,6 +201,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { apNavSelectorPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "apNavSelectorPopoverTrigger", required: true }] }], apNavSelectorPopoverTriggerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "apNavSelectorPopoverTriggerMode", required: false }] }], apNavSelectorPopoverDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "apNavSelectorPopoverDisabled", required: false }] }] } });
 
+/**
+ * Create a Record of key/value pairs from an array of objects
+ * @param array
+ * @param key attribute of the object to use as key
+ */
+const associateBy = (array, key) => array.reduce((previousValue, currentValue) => {
+    previousValue[`${currentValue[key]}`] = currentValue;
+    return previousValue;
+}, {});
+const isInternalNavSelectorEntryALeafFocusable = (leaf, { parentFolded, multipleMode }) => {
+    if (parentFolded) {
+        return false;
+    }
+    if (multipleMode) {
+        return !leaf.disabled && !leaf.displayTokenInvalid && !leaf.displayFeatureLocked;
+    }
+    return !leaf.disabled;
+};
+const computeFolded = (entry, children) => {
+    // If the entry is not folded, we keep it unfolded
+    if (!entry.folded) {
+        return false;
+    }
+    return !children.some(child => (isInternalNavSelectorEntryALeaf(child) && (child.selected || !child.folded)) ||
+        (isInternalNavSelectorEntryANode(child) && !child.folded) ||
+        (isInternalNavSelectorEntryAGroup(child) && child.undeterminedSelection));
+};
+const computeNumberOfDisplayableChildrenOnUnfold = (entry) => {
+    if (isInternalNavSelectorEntryANode(entry)) {
+        const nbChildren = entry.children.length;
+        const nbDisplayableChildrenOfUnfoldedChild = entry.children
+            .filter(child => !child.folded)
+            .reduce((acc, child) => {
+            return acc + computeNumberOfDisplayableChildrenOnUnfold(child);
+        }, 0);
+        return nbDisplayableChildrenOfUnfoldedChild + nbChildren;
+    }
+    if (isInternalNavSelectorEntryALeaf(entry)) {
+        return entry.details.length;
+    }
+    return 0;
+};
+const computeSelectableUids = (entries) => {
+    return entries.flatMap(entry => computeSelectableUidsByEntry(entry));
+};
+const computeSelectableUidsByEntry = (entry) => {
+    if (isInternalNavSelectorEntryALeaf(entry)) {
+        // Disabled leafs can now be selected programmatically
+        return [entry.uid, ...entry.details.filter(detail => !detail.hidden).map(detail => detail.uid)];
+    }
+    if (isInternalNavSelectorEntryANode(entry)) {
+        return [entry.uid, ...entry.children.flatMap(child => computeSelectableUidsByEntry(child))];
+    }
+    return [];
+};
+const computeVisibleUids = (entries) => {
+    return entries.flatMap(entry => computeVisibleUidsByEntry(entry));
+};
+const computeVisibleUidsByEntry = (entry) => {
+    if (entry.hidden) {
+        return [];
+    }
+    if (isInternalNavSelectorEntryALeaf(entry)) {
+        return [entry.uid, ...entry.details.filter(detail => !detail.hidden).map(detail => detail.uid)];
+    }
+    if (isInternalNavSelectorEntryANode(entry)) {
+        return entry.children.flatMap(child => computeVisibleUidsByEntry(child));
+    }
+    // Fallback for unexpected entry types (should never be reached)
+    return [];
+};
+const getLeaves = (entries) => {
+    return entries.flatMap(entry => {
+        if (isInternalNavSelectorEntryALeaf(entry)) {
+            return [entry];
+        }
+        if (isInternalNavSelectorEntryAGroup(entry)) {
+            return entry.children;
+        }
+        if (isInternalNavSelectorEntryACategory(entry)) {
+            return getLeaves(entry.children);
+        }
+        return [];
+    });
+};
+
 /**
  * NavSelectorAccessibility is a utility class that provides methods to manage the accessibility and the focusability of nav selector entries.
  */
@@ -332,13 +419,18 @@ class NavSelectorAccessibility {
      */
     static flatten(entries) {
         return entries.flatMap(entry => {
+            // The accessibility object is cloned as well: the focus helpers below assign tabIndex in place, and
+            // sharing it with the source entries would retroactively change every previously returned tree.
             if (isInternalNavSelectorEntryAGroup(entry) || isInternalNavSelectorEntryACategory(entry)) {
-                return [{ ...entry, children: [] }, ...this.flatten(entry.children)];
+                return [{ ...entry, accessibility: { ...entry.accessibility }, children: [] }, ...this.flatten(entry.children)];
             }
             if (isInternalNavSelectorEntryALeaf(entry)) {
-                return [{ ...entry, details: [] }, ...entry.details.map(detail => ({ ...detail }))];
+                return [
+                    { ...entry, accessibility: { ...entry.accessibility }, details: [] },
+                    ...entry.details.map(detail => ({ ...detail, accessibility: { ...detail.accessibility } })),
+                ];
             }
-            return [{ ...entry }];
+            return [{ ...entry, accessibility: { ...entry.accessibility } }];
         });
     }
     /**
@@ -378,78 +470,6 @@ class NavSelectorAccessibility {
     }
 }
 
-/**
- * Create a Record of key/value pairs from an array of objects
- * @param array
- * @param key attribute of the object to use as key
- */
-const associateBy = (array, key) => array.reduce((previousValue, currentValue) => {
-    previousValue[`${currentValue[key]}`] = currentValue;
-    return previousValue;
-}, {});
-const isInternalNavSelectorEntryALeafFocusable = (leaf, { parentFolded, multipleMode }) => {
-    if (parentFolded) {
-        return false;
-    }
-    if (multipleMode) {
-        return !leaf.disabled && !leaf.displayTokenInvalid && !leaf.displayFeatureLocked;
-    }
-    return !leaf.disabled;
-};
-const computeFolded = (entry, children) => {
-    // If the entry is not folded, we keep it unfolded
-    if (!entry.folded) {
-        return false;
-    }
-    return !children.some(child => (isInternalNavSelectorEntryALeaf(child) && (child.selected || !child.folded)) ||
-        (isInternalNavSelectorEntryANode(child) && !child.folded) ||
-        (isInternalNavSelectorEntryAGroup(child) && child.undeterminedSelection));
-};
-const computeNumberOfDisplayableChildrenOnUnfold = (entry) => {
-    if (isInternalNavSelectorEntryANode(entry)) {
-        const nbChildren = entry.children.length;
-        const nbDisplayableChildrenOfUnfoldedChild = entry.children
-            .filter(child => !child.folded)
-            .reduce((acc, child) => {
-            return acc + computeNumberOfDisplayableChildrenOnUnfold(child);
-        }, 0);
-        return nbDisplayableChildrenOfUnfoldedChild + nbChildren;
-    }
-    if (isInternalNavSelectorEntryALeaf(entry)) {
-        return entry.details.length;
-    }
-    return 0;
-};
-const computeSelectableUids = (entries) => {
-    return entries.flatMap(entry => computeSelectableUidsByEntry(entry));
-};
-const computeSelectableUidsByEntry = (entry) => {
-    if (isInternalNavSelectorEntryALeaf(entry)) {
-        // Disabled leafs can now be selected programmatically
-        return [entry.uid, ...entry.details.filter(detail => !detail.hidden).map(detail => detail.uid)];
-    }
-    if (isInternalNavSelectorEntryANode(entry)) {
-        return [entry.uid, ...entry.children.flatMap(child => computeSelectableUidsByEntry(child))];
-    }
-    return [];
-};
-const computeVisibleUids = (entries) => {
-    return entries.flatMap(entry => computeVisibleUidsByEntry(entry));
-};
-const computeVisibleUidsByEntry = (entry) => {
-    if (entry.hidden) {
-        return [];
-    }
-    if (isInternalNavSelectorEntryALeaf(entry)) {
-        return [entry.uid, ...entry.details.filter(detail => !detail.hidden).map(detail => detail.uid)];
-    }
-    if (isInternalNavSelectorEntryANode(entry)) {
-        return entry.children.flatMap(child => computeVisibleUidsByEntry(child));
-    }
-    // Fallback for unexpected entry types (should never be reached)
-    return [];
-};
-
 /**
  * Class to handle the folding and unfolding of nav selector entries.
  */
@@ -1124,6 +1144,7 @@ class NavSelectorBuilder {
             detailsDisplayable,
             details: leaf.details.map(detail => this.buildLeafDetail(detail, level + 1, focusable && !folded)),
             detailSelected: false,
+            tags: leaf.tags,
             type: 'LEAF',
             viewMoreDisplayable,
             viewMoreDisplayed: viewMoreDisplayable,
@@ -1196,40 +1217,56 @@ class NavSelectorBuilder {
  */
 class NavSelectorFilter {
     /**
-     * Filters the entries based on the search string
+     * Filters the entries based on the search string and the filtered tags.
      *
      * The search string is normalized and lowercase and trimmed.
      *
-     * If a category matches the search string, all its children are unfolded, marked as focusable, and not hidden.
-     *
-     * If a group matches the search string, the group is unfolded and all its children are unfolded, marked as focusable, and not hidden.
-     *
-     * If a leaf matches the search string, it is marked as not hidden and focusable.
+     * The search picks a scope, the tags filter inside it: when a category or a group matches the search string, every
+     * entry it holds inherits that match, and only the tags keep filtering underneath. A leaf is therefore displayed
+     * when the search is satisfied, by its own alias or by one of its parents, and when it carries one of the filtered
+     * tags. Categories and groups carry no tag of their own, so they are displayed for the leaves they still hold and
+     * hidden once all of them are.
      *
-     * Else the entry marked as hidden and not focusable.
+     * Displayed nodes are unfolded and marked as focusable, hidden entries are marked as not focusable.
      *
      * It also determines whenever counter and token invalid should be displayed on groups and leaves.
      *
      * @param entries The entries to filter.
-     * @param search The search string.
+     * @param criteria all criteria to apply.
      * @param multipleMode to update the focusable state of leaves correctly.
      * @returns The filtered entries.
      */
-    static filter(entries, search, multipleMode) {
-        const formattedSearch = this.cleanValue(search);
-        if (!formattedSearch) {
+    static filter(entries, criteria, multipleMode) {
+        const formattedSearch = this.cleanValue(criteria.search);
+        const shouldFilterByTags = Object.values(criteria.tags).some(tags => tags.length > 0);
+        if (!formattedSearch && !shouldFilterByTags) {
             return this.resetState(entries);
         }
-        return this.filterEntries(entries, formattedSearch, multipleMode);
+        const tags = Object.entries(criteria.tags).reduce((acc, [key, values]) => {
+            // A tag name selected with no value filters nothing, keeping it would hide every leaf.
+            if (!values.length) {
+                return acc;
+            }
+            const castKey = key;
+            const tagValues = (acc[castKey] ??= {});
+            values.forEach(value => (tagValues[value] = true));
+            return acc;
+        }, {});
+        return this.filterEntries(entries, { search: formattedSearch, tags }, multipleMode);
     }
-    static filterEntries(entries, formattedSearch, multipleMode) {
+    static filterEntries(entries, formattedCriteria, multipleMode, searchSatisfiedByAncestor = false) {
         const newEntries = entries.map(entry => {
-            if (this.matches(entry.alias, formattedSearch)) {
-                return this.recursivelyUnfoldEntry(entry, multipleMode);
-            }
+            // Matching the search opens a scope: descendants inherit the match and only the tags filter underneath.
+            const searchSatisfied = searchSatisfiedByAncestor || this.searchSatisfiedBy(entry, formattedCriteria);
             if (isInternalNavSelectorEntryANode(entry)) {
-                const children = this.filterEntries(entry.children, formattedSearch, multipleMode);
-                if (children.every(({ hidden }) => hidden)) {
+                // A node carries no tag of its own, so it is kept for the entries it still holds. An empty node has
+                // none to speak for it: it is kept when it satisfies the search itself, and dropped as soon as tags
+                // are filtered, having none.
+                const children = this.filterEntries(entry.children, formattedCriteria, multipleMode, searchSatisfied);
+                const displayable = children.length
+                    ? children.some(({ hidden }) => !hidden)
+                    : searchSatisfied && !this.tagsFiltered(formattedCriteria);
+                if (!displayable) {
                     return {
                         ...entry,
                         children,
@@ -1248,6 +1285,9 @@ class NavSelectorFilter {
                 };
             }
             if (isInternalNavSelectorEntryALeaf(entry)) {
+                if (searchSatisfied && this.tagsSatisfiedBy(entry, formattedCriteria)) {
+                    return this.displayLeaf(entry, multipleMode);
+                }
                 return {
                     ...entry,
                     focusable: false,
@@ -1258,54 +1298,51 @@ class NavSelectorFilter {
                     })),
                 };
             }
-            return {
-                ...entry,
-                focusable: false,
-                hidden: true,
-            };
+            return searchSatisfied
+                ? entry
+                : {
+                    ...entry,
+                    focusable: false,
+                    hidden: true,
+                };
         });
         return NavSelectorAccessibility.resetFocus(newEntries);
     }
-    static recursivelyUnfoldEntry(entry, multipleMode) {
-        if (isInternalNavSelectorEntryAGroup(entry)) {
-            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child, multipleMode));
-            return {
-                ...entry,
-                hidden: false,
-                folded: false,
-                focusable: true,
-                children,
-                displayCounter: false,
-                displayTokenInvalid: false,
-            };
-        }
-        else if (isInternalNavSelectorEntryALeaf(entry)) {
-            const leafFocusable = isInternalNavSelectorEntryALeafFocusable(entry, { parentFolded: false, multipleMode });
-            return {
-                ...entry,
-                hidden: false,
-                focusable: leafFocusable,
-                displayCounter: entry.folded && entry.counterDisplayable,
-                details: entry.details.map(detail => ({
-                    ...detail,
-                    focusable: !entry.folded,
-                })),
-            };
-        }
-        else if (isInternalNavSelectorEntryACategory(entry)) {
-            const children = entry.children.map(child => this.recursivelyUnfoldEntry(child, multipleMode));
-            return {
-                ...entry,
-                focusable: true,
-                folded: false,
-                hidden: false,
-                children,
-            };
+    /**
+     * Displays a leaf that satisfies every criterion, its details following the leaf own folded state.
+     */
+    static displayLeaf(leaf, multipleMode) {
+        return {
+            ...leaf,
+            hidden: false,
+            focusable: isInternalNavSelectorEntryALeafFocusable(leaf, { parentFolded: false, multipleMode }),
+            displayCounter: leaf.folded && leaf.counterDisplayable,
+            details: leaf.details.map(detail => ({
+                ...detail,
+                focusable: !leaf.folded,
+            })),
+        };
+    }
+    /**
+     * Whether the entry satisfies the search by its own alias. An inactive search is satisfied by every entry.
+     */
+    static searchSatisfiedBy(entry, formattedCriteria) {
+        return !formattedCriteria.search || this.cleanValue(entry.alias).includes(formattedCriteria.search);
+    }
+    /**
+     * Whether the leaf carries at least one of the filtered tag values. Inactive tag criteria are satisfied by every leaf.
+     */
+    static tagsSatisfiedBy(leaf, formattedCriteria) {
+        if (!this.tagsFiltered(formattedCriteria)) {
+            return true;
         }
-        return entry;
+        return Object.entries(leaf.tags).some(([key, tags]) => tags.some(tag => (formattedCriteria.tags[key] ?? {})[tag]));
     }
-    static matches(alias, formattedSearch) {
-        return this.cleanValue(alias).includes(formattedSearch);
+    /**
+     * Whether at least one tag value is being filtered on.
+     */
+    static tagsFiltered(formattedCriteria) {
+        return Object.keys(formattedCriteria.tags).length > 0;
     }
     static cleanValue(value) {
         return value.trim().normalize('NFKC').toLowerCase();
@@ -1814,8 +1851,18 @@ class NavSelectorState {
         noResults: '',
         viewMore: '',
         viewLess: '',
+        filter: '',
+        clearFilters: '',
+        applyFilters: '',
+        tagNames: { attributes: '' },
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_texts" }] : /* istanbul ignore next */ []));
+    tagsFilterDisplayed = computed(() => {
+        return getLeaves(this.entries()).some(leaf => Object.values(leaf.tags).some(tag => Object.values(tag).length > 0));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tagsFilterDisplayed" }] : /* istanbul ignore next */ []));
+    tagsFilters = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tagsFilters" }] : /* istanbul ignore next */ []));
     isMultipleModeEnabled = this.multipleModeEnabled;
     search = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
@@ -1861,9 +1908,9 @@ class NavSelectorState {
             });
         });
         effect(() => {
-            const search = this.search();
+            const criteria = { search: this.search(), tags: this.tagsFilters() };
             untracked(() => {
-                this._entries.update(entries => NavSelectorFilter.filter(entries, search, this.multipleModeEnabled()));
+                this._entries.update(entries => NavSelectorFilter.filter(entries, criteria, this.multipleModeEnabled()));
             });
         });
     }
@@ -1890,7 +1937,7 @@ class NavSelectorState {
             const previouslySelectedUids = this.collectSelectedUids(oldEntries);
             const mergeEntries = NavSelectorMerger.mergeInternalNavSelectorEntries(newEntries, oldEntries);
             const unfoldedEntries = this.unfoldParentsOfNewlySelectedEntries(mergeEntries, previouslySelectedUids);
-            return NavSelectorFilter.filter(unfoldedEntries, this.search(), this.multipleModeEnabled());
+            return NavSelectorFilter.filter(unfoldedEntries, { search: this.search(), tags: this.tagsFilters() }, this.multipleModeEnabled());
         });
     }
     /**
@@ -2054,6 +2101,12 @@ class NavSelectorState {
             minified: !this.expanded(),
         };
     }
+    filterTags(tags) {
+        this.tagsFilters.set(tags);
+    }
+    clearFilterTags() {
+        this.tagsFilters.set({});
+    }
     fold(entry) {
         this._entries.update(entries => NavSelectorFolding.fold(entries, entry.uid, this.getFoldingOptions()));
     }
@@ -3071,6 +3124,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorCategoryPresenter.expanded()) {\n    <div\n        class=\"content\"\n        apTooltipPosition=\"right\"\n        [attr.data-test]=\"dataTestId()\"\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        @if (category().avatarDisplayed) {\n            @if (category().avatarPictureUrlDisplayed) {\n                <ap-avatar\n                    size=\"16\"\n                    [showInitials]=\"true\"\n                    [username]=\"category().alias\"\n                    [profilePicture]=\"category().avatarPictureUrl\"\n                    [rounded]=\"category().avatarRounded\" />\n            } @else {\n                <ap-symbol\n                    size=\"sm\"\n                    color=\"grey-blue\"\n                    [symbolId]=\"category().avatarSymbolId\" />\n            }\n        }\n\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                    <div class=\"empty-state\">\n                        @if (category().emptyStateTitle) {\n                            <div class=\"empty-state__title\">\n                                {{ category().emptyStateTitle }}\n                            </div>\n                        }\n                        @if (category().emptyStateAction; as emptyStateAction) {\n                            <a\n                                class=\"standalone\"\n                                [attr.id]=\"emptyStateAction?.id\"\n                                (click)=\"onEmptyStateActionClick(emptyStateAction.name)\">\n                                @if (emptyStateAction?.symbolId; as symbolId) {\n                                    <ap-symbol\n                                        size=\"sm\"\n                                        [symbolId]=\"symbolId\" />\n                                }\n                                {{ emptyStateAction.title }}\n                                @if (emptyStateAction?.featureLocked) {\n                                    <ap-symbol\n                                        size=\"sm\"\n                                        color=\"purple\"\n                                        symbolId=\"feature-lock\" />\n                                }\n                            </a>\n                        }\n                    </div>\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{display:flex;padding:0 var(--ref-spacing-xxs) var(--ref-spacing-xxs) var(--ref-spacing-xxs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs)}:host .children-container .empty-state__title{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;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 .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 }], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], emptyStateActionClicked: [{ type: i0.Output, args: ["emptyStateActionClicked"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], aliasEl: [{ type: i0.ViewChild, args: ['alias', { isSignal: true }] }] } });
 
+class NavSelectorTagsFilterComponent {
+    state = inject(NavSelectorState);
+    filterButtonText = computed(() => this.state.texts().filter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterButtonText" }] : /* istanbul ignore next */ []));
+    clearFiltersText = computed(() => this.state.texts().clearFilters, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearFiltersText" }] : /* istanbul ignore next */ []));
+    applyFiltersText = computed(() => this.state.texts().applyFilters, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyFiltersText" }] : /* istanbul ignore next */ []));
+    value = computed(() => Object.entries(this.state.tagsFilters()).reduce((previousValue, [key, values]) => {
+        previousValue[key] = {
+            filterType: 'checkbox',
+            selected: values,
+        };
+        return previousValue;
+    }, {}), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    uniqueTagValuesByTagName = computed(() => {
+        return getLeaves(this.state.entries())
+            .map(({ tags }) => tags)
+            .reduce((previousValue, currentValue) => {
+            Object.entries(currentValue).forEach(([tagName, tagValues]) => {
+                if (!previousValue[tagName]) {
+                    previousValue[tagName] = {};
+                }
+                for (const tagValue of tagValues) {
+                    previousValue[tagName][tagValue] = true;
+                }
+            });
+            return previousValue;
+        }, {});
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uniqueTagValuesByTagName" }] : /* istanbul ignore next */ []));
+    groups = computed(() => {
+        const tagNames = this.state.texts().tagNames;
+        return Object.entries(this.uniqueTagValuesByTagName()).map(([tagName, tagValues]) => ({
+            key: tagName,
+            // Tags come from consumer data, so a tag name outside NavSelectorLeafTags may turn up untranslated at
+            // runtime. Showing it raw is poor, but better than showing nothing at all.
+            title: tagNames[tagName] ?? tagName,
+            expanded: false,
+            filterType: 'checkbox',
+            items: Object.keys(tagValues).map(value => ({ label: value, name: value })),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    onApplyFilters(dropdownOutput) {
+        this.state.filterTags(Object.entries(dropdownOutput).reduce((previousValue, [key, dropdownValues]) => {
+            previousValue[key] = dropdownValues.selected;
+            return previousValue;
+        }, {}));
+    }
+    onClearFilters() {
+        this.state.clearFilterTags();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavSelectorTagsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: NavSelectorTagsFilterComponent, isStandalone: true, selector: "ap-nav-selector-tags-filter", ngImport: i0, template: `
+        <ap-filter-dropdown-button
+            [buttonFilterText]="filterButtonText()"
+            [clearFilterText]="clearFiltersText()"
+            [applyFiltersText]="applyFiltersText()"
+            [groups]="groups()"
+            [closable]="false"
+            [value]="value()"
+            [needApplyButton]="true"
+            (clearFilters)="onClearFilters()"
+            (applyFilters)="onApplyFilters($event)" />
+    `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: FilterDropdownButtonComponent, selector: "ap-filter-dropdown-button", inputs: ["buttonFilterText", "groups", "value", "savedValue", "needApplyButton", "needClearButton", "closable", "expandOnOpen", "presetsFeatureLocked", "savePresetsMode", "editingPresetsMode", "showBackdrop", "disabled", "defaultPosition", "panelClass", "saveNewPresetsText", "saveAsNewPresetText", "savePresetText", "updateExistingPresetText", "resetFilterText", "applyFiltersText", "clearFilterText"], outputs: ["opened", "closed", "presetsLockedClicked", "saveNewPresets", "updatePresets", "applyFilters", "clearFilters", "resetFilters", "lockedFeatureClicked", "filterDropdownGroupLockedClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavSelectorTagsFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-nav-selector-tags-filter', template: `
+        <ap-filter-dropdown-button
+            [buttonFilterText]="filterButtonText()"
+            [clearFilterText]="clearFiltersText()"
+            [applyFiltersText]="applyFiltersText()"
+            [groups]="groups()"
+            [closable]="false"
+            [value]="value()"
+            [needApplyButton]="true"
+            (clearFilters)="onClearFilters()"
+            (applyFilters)="onApplyFilters($event)" />
+    `, imports: [FilterDropdownButtonComponent] }]
+        }] });
+
 const AUTO_MINIFIED_STATE_WIDTH_BREAKPOINT = 1280;
 const EXPAND_ANIMATION_TIMINGS = '250ms cubic-bezier(.4, 0, .3, 1)';
 const EXPANDED_STATE_WIDTH = '224px';
@@ -3262,7 +3399,7 @@ class NavSelectorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, style: { classPropertyName: "style", publicName: "style", 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", emptyStateActionClicked: "emptyStateActionClicked", onExpansionStateChange: "onExpansionStateChange", visibleAccountsChange: "visibleAccountsChange" }, 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                type=\"stroked\"\n                role=\"search\"\n                (onClick)=\"onMinifiedSearchClicked()\">\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        role=\"tree\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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                            (emptyStateActionClicked)=\"emptyStateActionClicked.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 ap-input-search{width:100%}@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{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{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}: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.expanded{animation-name:translateExpandButton}: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: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:auto;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;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)}\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: ["emptyStateActionClicked", "actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, style: { classPropertyName: "style", publicName: "style", 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", emptyStateActionClicked: "emptyStateActionClicked", onExpansionStateChange: "onExpansionStateChange", visibleAccountsChange: "visibleAccountsChange" }, 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\n            @if (navSelectorState.tagsFilterDisplayed()) {\n                <ap-nav-selector-tags-filter />\n            }\n        } @else {\n            <ap-icon-button\n                type=\"stroked\"\n                role=\"search\"\n                (onClick)=\"onMinifiedSearchClicked()\">\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        role=\"tree\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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                            (emptyStateActionClicked)=\"emptyStateActionClicked.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 ap-input-search{width:100%}@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{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{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}: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.expanded{animation-name:translateExpandButton}: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: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:auto;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;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)}\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: ["emptyStateActionClicked", "actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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"] }, { kind: "component", type: NavSelectorTagsFilterComponent, selector: "ap-nav-selector-tags-filter" }], 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%' })]))),
@@ -3280,6 +3417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         SymbolComponent,
                         IconButtonComponent,
                         NgTemplateOutlet,
+                        NavSelectorTagsFilterComponent,
                     ], providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], host: {
                         '[class.minified]': '!navSelectorState.expanded()',
                         '[class.embedded]': 'embedded()',
@@ -3293,7 +3431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", 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                type=\"stroked\"\n                role=\"search\"\n                (onClick)=\"onMinifiedSearchClicked()\">\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        role=\"tree\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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                            (emptyStateActionClicked)=\"emptyStateActionClicked.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 ap-input-search{width:100%}@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{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{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}: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.expanded{animation-name:translateExpandButton}: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: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:auto;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;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)}\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\n            @if (navSelectorState.tagsFilterDisplayed()) {\n                <ap-nav-selector-tags-filter />\n            }\n        } @else {\n            <ap-icon-button\n                type=\"stroked\"\n                role=\"search\"\n                (onClick)=\"onMinifiedSearchClicked()\">\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        role=\"tree\"\n        [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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                            (emptyStateActionClicked)=\"emptyStateActionClicked.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 ap-input-search{width:100%}@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{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button{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}: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.expanded{animation-name:translateExpandButton}: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: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:auto;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;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)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { navSelectorEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "navSelectorEntries", required: true }] }], translatedTexts: [{ type: i0.Input, args: [{ isSignal: true, alias: "translatedTexts", required: true }] }], multipleModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "multipleModeEnabled", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], detailsDisplayedLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailsDisplayedLimit", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], forceExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceExpanded", required: false }] }], expandedStateLocalStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedStateLocalStorageKey", required: false }] }], selectedEntryUids: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntryUids", required: true }] }, { type: i0.Output, args: ["selectedEntryUidsChange"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], emptyStateActionClicked: [{ type: i0.Output, args: ["emptyStateActionClicked"] }], headerProjection: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], contentHeaderProjection: [{ type: i0.ContentChild, args: ['contentHeader', { isSignal: true }] }], footerProjection: [{ type: i0.ContentChild, args: ['footer', { isSignal: true }] }], onExpansionStateChange: [{ type: i0.Output, args: ["onExpansionStateChange"] }], visibleAccountsChange: [{ type: i0.Output, args: ["visibleAccountsChange"] }] } });
 
 /**