@agorapulse/ui-components 18.0.17 → 18.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/agorapulse-ui-components-18.0.19.tgz +0 -0
  2. package/esm2022/avatar/avatar.component.mjs +2 -2
  3. package/esm2022/button/button.component.mjs +5 -4
  4. package/esm2022/checkbox/checkbox.component.mjs +3 -3
  5. package/esm2022/icon-button/icon-button.component.mjs +4 -4
  6. package/esm2022/infobox/infobox.component.mjs +4 -18
  7. package/esm2022/nav-selector/nav-selector-category/nav-selector-category.component.mjs +4 -5
  8. package/esm2022/nav-selector/nav-selector-group/nav-selector-group.component.mjs +3 -3
  9. package/esm2022/nav-selector/nav-selector-leaf/nav-selector-leaf.component.mjs +4 -5
  10. package/esm2022/nav-selector/nav-selector-leaf-detail/nav-selector-leaf-detail.component.mjs +3 -3
  11. package/esm2022/nav-selector/nav-selector-popover/nav-selector-popover.component.mjs +7 -3
  12. package/esm2022/nav-selector/nav-selector.component.mjs +33 -8
  13. package/esm2022/nav-selector/nav-selector.mjs +1 -1
  14. package/esm2022/nav-selector/utils/nav-selector.builder.mjs +2 -1
  15. package/esm2022/nav-selector/utils/nav-selector.folding.mjs +3 -3
  16. package/esm2022/nav-selector/utils/nav-selector.single-select.mjs +17 -18
  17. package/esm2022/radio/radio.component.mjs +3 -3
  18. package/esm2022/split-button/split-button.component.mjs +4 -4
  19. package/esm2022/tag/tag.component.mjs +3 -3
  20. package/fesm2022/agorapulse-ui-components-avatar.mjs +1 -1
  21. package/fesm2022/agorapulse-ui-components-avatar.mjs.map +1 -1
  22. package/fesm2022/agorapulse-ui-components-button.mjs +4 -3
  23. package/fesm2022/agorapulse-ui-components-button.mjs.map +1 -1
  24. package/fesm2022/agorapulse-ui-components-checkbox.mjs +2 -2
  25. package/fesm2022/agorapulse-ui-components-checkbox.mjs.map +1 -1
  26. package/fesm2022/agorapulse-ui-components-icon-button.mjs +3 -3
  27. package/fesm2022/agorapulse-ui-components-icon-button.mjs.map +1 -1
  28. package/fesm2022/agorapulse-ui-components-infobox.mjs +3 -17
  29. package/fesm2022/agorapulse-ui-components-infobox.mjs.map +1 -1
  30. package/fesm2022/agorapulse-ui-components-nav-selector.mjs +66 -39
  31. package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
  32. package/fesm2022/agorapulse-ui-components-radio.mjs +2 -2
  33. package/fesm2022/agorapulse-ui-components-radio.mjs.map +1 -1
  34. package/fesm2022/agorapulse-ui-components-split-button.mjs +3 -3
  35. package/fesm2022/agorapulse-ui-components-split-button.mjs.map +1 -1
  36. package/fesm2022/agorapulse-ui-components-tag.mjs +2 -2
  37. package/fesm2022/agorapulse-ui-components-tag.mjs.map +1 -1
  38. package/infobox/infobox.component.d.ts +1 -7
  39. package/nav-selector/nav-selector-leaf/nav-selector-leaf.component.d.ts +0 -1
  40. package/nav-selector/nav-selector-popover/nav-selector-popover.component.d.ts +1 -0
  41. package/nav-selector/nav-selector.component.d.ts +4 -1
  42. package/nav-selector/nav-selector.d.ts +2 -0
  43. package/package.json +7 -7
  44. package/agorapulse-ui-components-18.0.17.tgz +0 -0
package/fesm2022/agorapulse-ui-components-nav-selector.mjs CHANGED
@@ -4,10 +4,9 @@ import { SymbolComponent, withSymbols, apErrorFill, apFeatureLock, apChevronDown
4
4
  import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
5
5
  import { NgTemplateOutlet } from '@angular/common';
6
6
  import * as i0 from '@angular/core';
7
- import { input, afterRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, Component, HostBinding, contentChildren, viewChild, afterNextRender, model, contentChild } from '@angular/core';
7
+ import { input, afterRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, Component, HostBinding, contentChildren, viewChild, afterNextRender, model, contentChild, output } from '@angular/core';
8
8
  import * as i2 from '@angular/forms';
9
9
  import { FormsModule } from '@angular/forms';
10
- import { EventPluginsModule } from '@tinkoff/ng-event-plugins';
11
10
  import { AvatarComponent } from '@agorapulse/ui-components/avatar';
12
11
  import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
13
12
  import { CounterComponent } from '@agorapulse/ui-components/counter';
@@ -560,6 +559,7 @@ class NavSelectorSingleSelect {
560
559
  },
561
560
  selected: false,
562
561
  folded: !leaf.folded ? false : details.every(detail => !detail.selected),
562
+ detailSelected: details.some(detail => detail.selected),
563
563
  details,
564
564
  };
565
565
  }
@@ -576,6 +576,19 @@ class NavSelectorSingleSelect {
576
576
  };
577
577
  }
578
578
  static selectALeafWithDisplayableDetails(leaf) {
579
+ const details = leaf.details.reduce(({ previousDetailSelected, details }, detail, idx) => {
580
+ const detailSelected = !previousDetailSelected && leaf.detailsDisplayable && !detail.displayError && (idx === 0 || !details[idx - 1].selected);
581
+ details.push({
582
+ ...detail,
583
+ selected: detailSelected,
584
+ focusable: true,
585
+ accessibility: {
586
+ ...detail.accessibility,
587
+ tabIndex: detailSelected ? 0 : -1,
588
+ },
589
+ });
590
+ return { previousDetailSelected: previousDetailSelected || detailSelected, details };
591
+ }, { previousDetailSelected: false, details: [] }).details;
579
592
  return {
580
593
  ...leaf,
581
594
  selected: false,
@@ -583,25 +596,10 @@ class NavSelectorSingleSelect {
583
596
  ...leaf.accessibility,
584
597
  tabIndex: -1,
585
598
  },
586
- counterDisplayable: true,
587
599
  displayCounter: false,
588
600
  folded: !leaf.detailsDisplayable,
589
- details: leaf.details.reduce(({ previousDetailSelected, details }, detail, idx) => {
590
- const detailSelected = !previousDetailSelected &&
591
- leaf.detailsDisplayable &&
592
- !detail.displayError &&
593
- (idx === 0 || !details[idx - 1].selected);
594
- details.push({
595
- ...detail,
596
- selected: detailSelected,
597
- focusable: true,
598
- accessibility: {
599
- ...detail.accessibility,
600
- tabIndex: detailSelected ? 0 : -1,
601
- },
602
- });
603
- return { previousDetailSelected: previousDetailSelected || detailSelected, details };
604
- }, { previousDetailSelected: false, details: [] }).details,
601
+ detailSelected: details.some(detail => detail.selected),
602
+ details,
605
603
  };
606
604
  }
607
605
  static selectALeafWithoutDetails(leaf, entryUid) {
@@ -846,6 +844,7 @@ class NavSelectorBuilder {
846
844
  : this.isLeafLogicValid(leaf, LeafLogics.FEATURE_LOCKED, LeafLogics.TOKEN_INVALID, LeafLogics.COUNTER),
847
845
  detailsDisplayable,
848
846
  details: leaf.details.map(detail => this.buildLeafDetail(detail, level + 1, focusable && !folded)),
847
+ detailSelected: false,
849
848
  type: 'LEAF',
850
849
  viewMoreDisplayable,
851
850
  viewMoreDisplayed: viewMoreDisplayable,
@@ -1109,7 +1108,7 @@ class NavSelectorFolding {
1109
1108
  }
1110
1109
  return {
1111
1110
  ...entry,
1112
- children: this.toggleEntryFolding(entry.children, entryUid, minified, parentFolded || entry.folded),
1111
+ children: this.toggleEntryFolding(entry.children, entryUid, multipleMode, minified, parentFolded || entry.folded),
1113
1112
  };
1114
1113
  }
1115
1114
  if (isInternalNavSelectorEntryALeaf(entry)) {
@@ -1234,7 +1233,7 @@ class NavSelectorFolding {
1234
1233
  }
1235
1234
  return {
1236
1235
  ...leaf,
1237
- displayCounter: true,
1236
+ displayCounter: leaf.counterDisplayable,
1238
1237
  folded: true,
1239
1238
  details: leaf.details.map(detail => ({ ...detail, focusable: false })),
1240
1239
  };
@@ -1693,7 +1692,7 @@ class NavSelectorLeafDetailComponent {
1693
1692
  this.navSelectorLeafDetailPresenter.onLeafDetailClicked(this.detail());
1694
1693
  }
1695
1694
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, deps: [{ token: NavSelectorLeafDetailPresenter }], target: i0.ɵɵFactoryTarget.Component });
1696
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailComponent, isStandalone: true, selector: "ap-nav-selector-leaf-detail", inputs: { detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class.selected": "detail().selected", "class.embedded": "embedded()", "class.disabled": "detail().displayError" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ detail().counter }}\n </ap-counter>\n}\n@if (detail().displayError) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1}:host.embedded{padding:0}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1695
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailComponent, isStandalone: true, selector: "ap-nav-selector-leaf-detail", inputs: { detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class.selected": "detail().selected", "class.embedded": "embedded()", "class.disabled": "detail().displayError" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ detail().counter }}\n </ap-counter>\n}\n@if (detail().displayError) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1}:host.embedded{padding:0}:host.embedded .caption{font-size:var(--ref-font-size-sm)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1697
1696
  }
1698
1697
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, decorators: [{
1699
1698
  type: Component,
@@ -1710,7 +1709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
1710
1709
  // Alias the input of the directive to detail the input detail will be used in the directive and in the component as well
1711
1710
  inputs: ['apTreeNodeAccessibility: detail'],
1712
1711
  },
1713
- ], template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ detail().counter }}\n </ap-counter>\n}\n@if (detail().displayError) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1}:host.embedded{padding:0}:host 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"] }]
1712
+ ], template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ detail().counter }}\n </ap-counter>\n}\n@if (detail().displayError) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1}:host.embedded{padding:0}:host.embedded .caption{font-size:var(--ref-font-size-sm)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"] }]
1714
1713
  }], ctorParameters: () => [{ type: NavSelectorLeafDetailPresenter }] });
1715
1714
 
1716
1715
  class NavSelectorLeafDetailsPresenter {
@@ -1883,6 +1882,10 @@ class NavSelectorPopoverComponent {
1883
1882
  this.computePosition(parentEl);
1884
1883
  }
1885
1884
  }
1885
+ onTitleCLicked(event) {
1886
+ // Click on title should not close the popover
1887
+ event.stopImmediatePropagation();
1888
+ }
1886
1889
  onClick(event) {
1887
1890
  // Prevent click to be caught from element behind the popover (real bug)
1888
1891
  event.stopImmediatePropagation();
@@ -1957,7 +1960,7 @@ class NavSelectorPopoverComponent {
1957
1960
  }
1958
1961
  }
1959
1962
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1960
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorPopoverComponent, isStandalone: true, selector: "ap-nav-selector-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, popoverTitle: { classPropertyName: "popoverTitle", publicName: "popoverTitle", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "window:wheel": "onAnyScroll()", "window:focusin": "onFocusChanged($event)", "window:click": "onAnyClick($event)" }, properties: { "style.top.px": "position().top", "style.left.px": "position().left" } }, queries: [{ propertyName: "items", predicate: ["item"], isSignal: true }], ngImport: i0, template: "@if (displayed()) {\n <div class=\"nav-selector-popover\">\n @if (popoverTitle()) {\n <div class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n }\n\n @let itemsNotNull = items();\n\n @if (itemsNotNull?.length) {\n @for (item of itemsNotNull; track item) {\n <ap-nav-selector-popover-item>\n <ng-container [ngTemplateOutlet]=\"item\"/>\n </ap-nav-selector-popover-item>\n }\n } @else {\n <ng-content select=\"[item]\"/>\n }\n </div>\n}\n", styles: [":host{position:fixed;z-index: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{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm) var(--ref-spacing-xxxs);text-align:left;color:var(--ref-color-grey-100);font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1963
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorPopoverComponent, isStandalone: true, selector: "ap-nav-selector-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, popoverTitle: { classPropertyName: "popoverTitle", publicName: "popoverTitle", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "window:wheel": "onAnyScroll()", "window:focusin": "onFocusChanged($event)", "window:click": "onAnyClick($event)" }, properties: { "style.top.px": "position().top", "style.left.px": "position().left" } }, queries: [{ propertyName: "items", predicate: ["item"], isSignal: true }], ngImport: i0, template: "@if (displayed()) {\n <div class=\"nav-selector-popover\">\n @if (popoverTitle()) {\n <div (click)=\"onTitleCLicked($event)\" class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n }\n\n @let itemsNotNull = items();\n\n @if (itemsNotNull?.length) {\n @for (item of itemsNotNull; track item) {\n <ap-nav-selector-popover-item>\n <ng-container [ngTemplateOutlet]=\"item\"/>\n </ap-nav-selector-popover-item>\n }\n } @else {\n <ng-content select=\"[item]\"/>\n }\n </div>\n}\n", styles: [":host{position:fixed;z-index:1000}:host .nav-selector-popover{min-width:225px;padding:var(--ref-spacing-xxs) 0;background:var(--ref-color-white);border-radius:var(--ref-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326}:host .nav-selector-popover__title{cursor:auto;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm) var(--ref-spacing-xxxs);text-align:left;color:var(--ref-color-grey-100);font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-bold)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1961
1964
  }
1962
1965
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverComponent, decorators: [{
1963
1966
  type: Component,
@@ -1968,7 +1971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
1968
1971
  '(window:wheel)': 'onAnyScroll()',
1969
1972
  '(window:focusin)': 'onFocusChanged($event)',
1970
1973
  '(window:click)': 'onAnyClick($event)',
1971
- }, imports: [NgTemplateOutlet, NavSelectorPopoverItemComponent], template: "@if (displayed()) {\n <div class=\"nav-selector-popover\">\n @if (popoverTitle()) {\n <div class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n }\n\n @let itemsNotNull = items();\n\n @if (itemsNotNull?.length) {\n @for (item of itemsNotNull; track item) {\n <ap-nav-selector-popover-item>\n <ng-container [ngTemplateOutlet]=\"item\"/>\n </ap-nav-selector-popover-item>\n }\n } @else {\n <ng-content select=\"[item]\"/>\n }\n </div>\n}\n", styles: [":host{position:fixed;z-index: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{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"] }]
1974
+ }, imports: [NgTemplateOutlet, NavSelectorPopoverItemComponent], template: "@if (displayed()) {\n <div class=\"nav-selector-popover\">\n @if (popoverTitle()) {\n <div (click)=\"onTitleCLicked($event)\" class=\"nav-selector-popover__title\">{{ popoverTitle() }}</div>\n }\n\n @let itemsNotNull = items();\n\n @if (itemsNotNull?.length) {\n @for (item of itemsNotNull; track item) {\n <ap-nav-selector-popover-item>\n <ng-container [ngTemplateOutlet]=\"item\"/>\n </ap-nav-selector-popover-item>\n }\n } @else {\n <ng-content select=\"[item]\"/>\n }\n </div>\n}\n", styles: [":host{position:fixed;z-index:1000}:host .nav-selector-popover{min-width:225px;padding:var(--ref-spacing-xxs) 0;background:var(--ref-color-white);border-radius:var(--ref-border-radius-sm);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326}:host .nav-selector-popover__title{cursor:auto;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm) var(--ref-spacing-xxxs);text-align:left;color:var(--ref-color-grey-100);font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-bold)}\n"] }]
1972
1975
  }], ctorParameters: () => [{ type: i0.ElementRef }] });
1973
1976
 
1974
1977
  class NavSelectorLeafPresenter {
@@ -2010,7 +2013,6 @@ class NavSelectorLeafComponent {
2010
2013
  initial = computed(() => this.leaf().alias[0].toUpperCase());
2011
2014
  foldSymbol = computed(() => (this.leaf().folded ? 'chevron-down' : 'chevron-up'));
2012
2015
  focused = signal(false);
2013
- detailSelected = computed(() => this.leaf().details.some(({ selected }) => selected));
2014
2016
  aliasEl = viewChild('alias');
2015
2017
  aliasBoundedClientRect = signal({
2016
2018
  offsetWidth: 0,
@@ -2028,7 +2030,7 @@ class NavSelectorLeafComponent {
2028
2030
  if (disableReason) {
2029
2031
  content.push(disableReason);
2030
2032
  }
2031
- if (this.navSelectorLeafPresenter.isMultipleModeEnabled()) {
2033
+ if (this.navSelectorLeafPresenter.isMultipleModeEnabled() || !this.navSelectorLeafPresenter.expanded()) {
2032
2034
  if (this.leaf().displayFeatureLocked) {
2033
2035
  content.push(this.navSelectorLeafPresenter.texts().featureLocked);
2034
2036
  }
@@ -2111,7 +2113,7 @@ class NavSelectorLeafComponent {
2111
2113
  this.navSelectorLeafPresenter.unfold(this.leaf());
2112
2114
  }
2113
2115
  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 });
2114
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"selectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n @if (actionProjection?.length) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n [apNavSelectorPopoverTrigger]=\"popover\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n <ap-nav-selector-popover\n #popover\n placement=\"bottom_start\">\n @for (action of actionProjection; track action) {\n <ng-template #item>\n <ng-container\n [ngTemplateOutlet]=\"action\"\n [ngTemplateOutletContext]=\"{\n uid: leaf().uid\n }\" />\n </ng-template>\n }\n </ap-nav-selector-popover>\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || detailSelected()\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\"\n placement=\"right\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item item [selected]=\"detail.selected\" [class.disabled]=\"detail.displayError\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected"] }], animations: [
2116
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"selectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n @if (actionProjection?.length) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n [apNavSelectorPopoverTrigger]=\"popover\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n <ap-nav-selector-popover\n #popover\n placement=\"bottom_start\">\n @for (action of actionProjection; track action) {\n <ng-template #item>\n <ng-container\n [ngTemplateOutlet]=\"action\"\n [ngTemplateOutletContext]=\"{\n uid: leaf().uid\n }\" />\n </ng-template>\n }\n </ap-nav-selector-popover>\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || leaf().detailSelected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\"\n placement=\"right\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item item [selected]=\"detail.selected\" [class.disabled]=\"detail.displayError\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected"] }], animations: [
2115
2117
  /**
2116
2118
  * 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)
2117
2119
  */
@@ -2172,7 +2174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
2172
2174
  animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
2173
2175
  ]),
2174
2176
  ]),
2175
- ], template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"selectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n @if (actionProjection?.length) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n [apNavSelectorPopoverTrigger]=\"popover\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n <ap-nav-selector-popover\n #popover\n placement=\"bottom_start\">\n @for (action of actionProjection; track action) {\n <ng-template #item>\n <ng-container\n [ngTemplateOutlet]=\"action\"\n [ngTemplateOutletContext]=\"{\n uid: leaf().uid\n }\" />\n </ng-template>\n }\n </ap-nav-selector-popover>\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || detailSelected()\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\"\n placement=\"right\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item item [selected]=\"detail.selected\" [class.disabled]=\"detail.displayError\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
2177
+ ], template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"selectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n @if (actionProjection?.length) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n [apNavSelectorPopoverTrigger]=\"popover\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n <ap-nav-selector-popover\n #popover\n placement=\"bottom_start\">\n @for (action of actionProjection; track action) {\n <ng-template #item>\n <ng-container\n [ngTemplateOutlet]=\"action\"\n [ngTemplateOutletContext]=\"{\n uid: leaf().uid\n }\" />\n </ng-template>\n }\n </ap-nav-selector-popover>\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || leaf().detailSelected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\"\n placement=\"right\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item item [selected]=\"detail.selected\" [class.disabled]=\"detail.displayError\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within ap-counter,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within .folding-button,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
2176
2178
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafPresenter }] });
2177
2179
 
2178
2180
  class NavSelectorGroupPresenter {
@@ -2289,7 +2291,7 @@ class NavSelectorGroupComponent {
2289
2291
  this.navSelectorGroupPresenter.unfold(this.group());
2290
2292
  }
2291
2293
  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 });
2292
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorGroupPresenter.expanded()" } }, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\"\n (click)=\"toggleFolding($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <ap-symbol\n symbolId=\"folder\"\n size=\"sm\" />\n\n <span\n #alias\n class=\"caption\">\n {{ group().alias }}\n </span>\n\n @if (group().displayTokenInvalid) {\n <ap-symbol\n symbolId=\"error_fill\"\n size=\"sm\" />\n }\n\n @if (group().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ group().counter }}\n </ap-counter>\n }\n\n <ap-symbol\n size=\"sm\"\n class=\"folding-button\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [class.token-invalid]=\"group().displayTokenInvalid\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <div class=\"picture-url-sample-container\">\n <div class=\"picture-url-sample\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"16\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n\n <div class=\"status\">\n @if (group().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ group().counter }}\n </ap-counter>\n }\n </div>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
2294
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorGroupPresenter.expanded()" } }, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\"\n (click)=\"toggleFolding($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <ap-symbol\n symbolId=\"folder\"\n size=\"sm\" />\n\n <span\n #alias\n class=\"caption\">\n {{ group().alias }}\n </span>\n\n @if (group().displayTokenInvalid) {\n <ap-symbol\n symbolId=\"error_fill\"\n size=\"sm\" />\n }\n\n @if (group().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ group().counter }}\n </ap-counter>\n }\n\n <ap-symbol\n size=\"sm\"\n class=\"folding-button\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [class.token-invalid]=\"group().displayTokenInvalid\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <div class=\"picture-url-sample-container\">\n <div class=\"picture-url-sample\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"16\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n\n <div class=\"status\">\n @if (group().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ group().counter }}\n </ap-counter>\n }\n </div>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px;background-color:var(--ref-color-white);border-radius:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "notif"] }, { kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
2293
2295
  /**
2294
2296
  * 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)
2295
2297
  */
@@ -2343,7 +2345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
2343
2345
  animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}', overflow: 'hidden' }), style({ maxHeight: 0, overflow: 'hidden' })])),
2344
2346
  ]),
2345
2347
  ]),
2346
- ], template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\"\n (click)=\"toggleFolding($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <ap-symbol\n symbolId=\"folder\"\n size=\"sm\" />\n\n <span\n #alias\n class=\"caption\">\n {{ group().alias }}\n </span>\n\n @if (group().displayTokenInvalid) {\n <ap-symbol\n symbolId=\"error_fill\"\n size=\"sm\" />\n }\n\n @if (group().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ group().counter }}\n </ap-counter>\n }\n\n <ap-symbol\n size=\"sm\"\n class=\"folding-button\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [class.token-invalid]=\"group().displayTokenInvalid\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <div class=\"picture-url-sample-container\">\n <div class=\"picture-url-sample\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"16\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n\n <div class=\"status\">\n @if (group().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ group().counter }}\n </ap-counter>\n }\n </div>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px}\n"] }]
2348
+ ], template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\"\n (click)=\"toggleFolding($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <ap-symbol\n symbolId=\"folder\"\n size=\"sm\" />\n\n <span\n #alias\n class=\"caption\">\n {{ group().alias }}\n </span>\n\n @if (group().displayTokenInvalid) {\n <ap-symbol\n symbolId=\"error_fill\"\n size=\"sm\" />\n }\n\n @if (group().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ group().counter }}\n </ap-counter>\n }\n\n <ap-symbol\n size=\"sm\"\n class=\"folding-button\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [class.token-invalid]=\"group().displayTokenInvalid\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <div class=\"picture-url-sample-container\">\n <div class=\"picture-url-sample\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"16\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n\n <div class=\"status\">\n @if (group().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ group().counter }}\n </ap-counter>\n }\n </div>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative;justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px;background-color:var(--ref-color-white);border-radius:100%}\n"] }]
2347
2349
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorGroupPresenter }] });
2348
2350
 
2349
2351
  class NavSelectorCategoryPresenter {
@@ -2397,7 +2399,7 @@ class NavSelectorCategoryComponent {
2397
2399
  }
2398
2400
  maxHeight = signal('0px');
2399
2401
  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 });
2400
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "navSelectorCategoryPresenter.fold($event, this.category())", "keydown.arrowRight": "navSelectorCategoryPresenter.unfold($event, this.category())" }, properties: { "class.minified": "!navSelectorCategoryPresenter.expanded()" } }, providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], ngImport: i0, template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <span class=\"caption\">{{ category().alias }}</span>\n\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <div class=\"name-container\">\n <span class=\"caption\">{{ category().alias }}</span>\n <span>.</span>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .content:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus .name-container{display:none}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "ngmodule", type: EventPluginsModule }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
2402
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "navSelectorCategoryPresenter.fold($event, this.category())", "keydown.arrowRight": "navSelectorCategoryPresenter.unfold($event, this.category())" }, properties: { "class.minified": "!navSelectorCategoryPresenter.expanded()" } }, providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], ngImport: i0, template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <span class=\"caption\">{{ category().alias }}</span>\n\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <div class=\"name-container\">\n <span class=\"caption\">{{ category().alias }}</span>\n <span>.</span>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
2401
2403
  /**
2402
2404
  * 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)
2403
2405
  */
@@ -2420,7 +2422,7 @@ class NavSelectorCategoryComponent {
2420
2422
  }
2421
2423
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryComponent, decorators: [{
2422
2424
  type: Component,
2423
- args: [{ selector: 'ap-nav-selector-category', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, EventPluginsModule, TreeNodeAccessibilityDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
2425
+ args: [{ selector: 'ap-nav-selector-category', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, TreeNodeAccessibilityDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
2424
2426
  '[class.minified]': '!navSelectorCategoryPresenter.expanded()',
2425
2427
  '(keydown.arrowLeft)': 'navSelectorCategoryPresenter.fold($event, this.category())',
2426
2428
  '(keydown.arrowRight)': 'navSelectorCategoryPresenter.unfold($event, this.category())',
@@ -2443,7 +2445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
2443
2445
  animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}' }), style({ overflow: 'hidden', maxHeight: 0 })])),
2444
2446
  ]),
2445
2447
  ]),
2446
- ], template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <span class=\"caption\">{{ category().alias }}</span>\n\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <div class=\"name-container\">\n <span class=\"caption\">{{ category().alias }}</span>\n <span>.</span>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .content:focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus .name-container{display:none}\n"] }]
2448
+ ], template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <span class=\"caption\">{{ category().alias }}</span>\n\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n [apTreeNodeAccessibility]=\"category()\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <div class=\"name-container\">\n <span class=\"caption\">{{ category().alias }}</span>\n <span>.</span>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"] }]
2447
2449
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
2448
2450
 
2449
2451
  let nextUniqueId = 0;
@@ -2465,6 +2467,7 @@ class NavSelectorComponent {
2465
2467
  displayFooter = computed(() => this.footerProjection() !== undefined);
2466
2468
  leafActionProjection = contentChildren('leafAction');
2467
2469
  expansionState = computed(() => (this.navSelectorState.expanded() ? 'expanded' : 'minified'));
2470
+ onExpansionStateChange = output();
2468
2471
  componentUid = `nav-selector-${nextUniqueId++}`;
2469
2472
  constructor(navSelectorState, el) {
2470
2473
  this.navSelectorState = navSelectorState;
@@ -2480,6 +2483,9 @@ class NavSelectorComponent {
2480
2483
  this.navSelectorState.toggleExpanded();
2481
2484
  }
2482
2485
  });
2486
+ effect(() => {
2487
+ this.onExpansionStateChange.emit({ expanded: this.navSelectorState.expanded() });
2488
+ });
2483
2489
  effect(() => {
2484
2490
  const multipleModeEnabled = this.multipleModeEnabled();
2485
2491
  const newEntries = this.navSelectorEntries();
@@ -2524,14 +2530,36 @@ class NavSelectorComponent {
2524
2530
  if (this.el.nativeElement.querySelector('.nav-selector__content').contains(document.activeElement)) {
2525
2531
  event.stopImmediatePropagation();
2526
2532
  this.navSelectorState.onArrowDown();
2527
- setTimeout(() => this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus());
2533
+ setTimeout(() => {
2534
+ try {
2535
+ this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus();
2536
+ }
2537
+ catch (e) {
2538
+ // If the focus fails it mean we do not have an entry with tabindex 0, so we will not be able to focus any entry anymore.
2539
+ // Force reset in this case by rebuilding the entries and resetting the focus.
2540
+ console.error('[Nav selector] Failed to focus the next entry, resetting...', e);
2541
+ this.navSelectorState.updateEntries(this.navSelectorEntries(), this.selectedEntryUids(), this.detailsDisplayedLimit());
2542
+ this.navSelectorState.entries.update(entries => NavSelectorAccessibility.resetFocus(entries));
2543
+ }
2544
+ });
2528
2545
  }
2529
2546
  }
2530
2547
  onArrowUp(event) {
2531
2548
  if (this.el.nativeElement.querySelector('.nav-selector__content').contains(document.activeElement)) {
2532
2549
  event.stopImmediatePropagation();
2533
2550
  this.navSelectorState.onArrowUp();
2534
- setTimeout(() => this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus());
2551
+ setTimeout(() => {
2552
+ try {
2553
+ this.el.nativeElement.querySelector('[role="treeitem"][tabindex="0"]').focus();
2554
+ }
2555
+ catch (e) {
2556
+ // If the focus fails it mean we do not have an entry with tabindex 0, so we will not be able to focus any entry anymore.
2557
+ // Force reset in this case by rebuilding the entries and resetting the focus.
2558
+ console.error('[Nav selector] Failed to focus the previous entry, resetting...', e);
2559
+ this.navSelectorState.updateEntries(this.navSelectorEntries(), this.selectedEntryUids(), this.detailsDisplayedLimit());
2560
+ this.navSelectorState.entries.update(entries => NavSelectorAccessibility.resetFocus(entries));
2561
+ }
2562
+ });
2535
2563
  }
2536
2564
  }
2537
2565
  onWindowResize() {
@@ -2540,7 +2568,7 @@ class NavSelectorComponent {
2540
2568
  }
2541
2569
  }
2542
2570
  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 });
2543
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "leafActionProjection", predicate: ["leafAction"], isSignal: true }], ngImport: i0, template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n @if (navSelectorState.expandedAfterDelay()) {\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n <button\n type=\"button\"\n class=\"expand-button expanded\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-reduce\" />\n </button>\n }\n\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n class=\"nav-selector-search\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-expand\" />\n </button>\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-icon-button (onClick)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n </div>\n\n <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;height:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;width:100%;max-width:224px;min-width:224px}@media only screen and (min-device-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto}:host .nav-selector__content .entry{padding:var(--ref-spacing-xxs);align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry+.entry{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: EventPluginsModule }], animations: [
2571
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "leafActionProjection", predicate: ["leafAction"], isSignal: true }], ngImport: i0, template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n @if (navSelectorState.expandedAfterDelay()) {\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n <button\n type=\"button\"\n class=\"expand-button expanded\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-reduce\" />\n </button>\n }\n\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n class=\"nav-selector-search\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-expand\" />\n </button>\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-icon-button (onClick)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n </div>\n\n <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
2544
2572
  trigger('expand', [
2545
2573
  state('expanded', style({ width: '100%' })),
2546
2574
  state('minified', style({ width: '64px' })),
@@ -2562,7 +2590,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
2562
2590
  SymbolComponent,
2563
2591
  IconButtonComponent,
2564
2592
  NgTemplateOutlet,
2565
- EventPluginsModule,
2566
2593
  ], providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], host: {
2567
2594
  '[class.minified]': '!navSelectorState.expanded()',
2568
2595
  '[class.embedded]': 'embedded()',
@@ -2579,7 +2606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
2579
2606
  // Force animation to do not be with 100% instantly
2580
2607
  keyframes([style({ width: '64px' }), style({ width: '50%' }), style({ width: '100%' })]))),
2581
2608
  ]),
2582
- ], template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n @if (navSelectorState.expandedAfterDelay()) {\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n <button\n type=\"button\"\n class=\"expand-button expanded\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-reduce\" />\n </button>\n }\n\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n class=\"nav-selector-search\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-expand\" />\n </button>\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-icon-button (onClick)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n </div>\n\n <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;height:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;width:100%;max-width:224px;min-width:224px}@media only screen and (min-device-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto}:host .nav-selector__content .entry{padding:var(--ref-spacing-xxs);align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry+.entry{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
2609
+ ], template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n @if (navSelectorState.expandedAfterDelay()) {\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n <button\n type=\"button\"\n class=\"expand-button expanded\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-reduce\" />\n </button>\n }\n\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n class=\"nav-selector-search\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-expand\" />\n </button>\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-icon-button (onClick)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n </div>\n\n <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
2583
2610
  }], ctorParameters: () => [{ type: NavSelectorState }, { type: i0.ElementRef }] });
2584
2611
 
2585
2612
  /**