@agorapulse/ui-components 18.0.36 → 18.0.38

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 (15) hide show
  1. package/agorapulse-ui-components-18.0.38.tgz +0 -0
  2. package/esm2022/nav-selector/nav-selector-category/nav-selector-category.component.mjs +17 -6
  3. package/esm2022/nav-selector/nav-selector-group/nav-selector-group.component.mjs +17 -6
  4. package/esm2022/nav-selector/nav-selector-leaf/nav-selector-leaf.component.mjs +15 -6
  5. package/esm2022/nav-selector/nav-selector-leaf-detail/nav-selector-leaf-detail.component.mjs +3 -3
  6. package/esm2022/nav-selector/nav-selector.component.mjs +3 -3
  7. package/esm2022/nav-selector/utils/leaf.utils.mjs +16 -1
  8. package/fesm2022/agorapulse-ui-components-nav-selector.mjs +61 -17
  9. package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
  10. package/nav-selector/nav-selector-category/nav-selector-category.component.d.ts +1 -0
  11. package/nav-selector/nav-selector-group/nav-selector-group.component.d.ts +1 -0
  12. package/nav-selector/nav-selector-leaf/nav-selector-leaf.component.d.ts +1 -0
  13. package/nav-selector/utils/leaf.utils.d.ts +1 -0
  14. package/package.json +7 -7
  15. package/agorapulse-ui-components-18.0.36.tgz +0 -0
package/fesm2022/agorapulse-ui-components-nav-selector.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i1 from '@agorapulse/ui-components/directives';
2
2
  import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
3
3
  import { SymbolComponent, withSymbols, apFeatureLock, apErrorFill, apChevronDown, apChevronUp, apFolder, apArrowExpand, apArrowReduce, apSearch } from '@agorapulse/ui-symbol';
4
4
  import * as i0 from '@angular/core';
5
- import { input, inject, Component, afterRender, Directive, effect, untracked, ChangeDetectionStrategy, signal, computed, Injectable, contentChildren, output, viewChild, afterNextRender, model, contentChild } from '@angular/core';
5
+ import { input, inject, Component, afterRender, Directive, effect, untracked, ChangeDetectionStrategy, signal, computed, Injectable, contentChildren, output, viewChild, model, contentChild, afterNextRender } from '@angular/core';
6
6
  import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
7
7
  import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
8
8
  import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
@@ -396,6 +396,21 @@ const computeFolded = (entry, children) => {
396
396
  (isInternalNavSelectorEntryANode(child) && !child.folded) ||
397
397
  (isInternalNavSelectorEntryAGroup(child) && child.undeterminedSelection));
398
398
  };
399
+ const computeNumberOfDisplayableChildrenOnUnfold = (entry) => {
400
+ if (isInternalNavSelectorEntryANode(entry)) {
401
+ const nbChildren = entry.children.length;
402
+ const nbDisplayableChildrenOfUnfoldedChild = entry.children
403
+ .filter(child => !child.folded)
404
+ .reduce((acc, child) => {
405
+ return acc + computeNumberOfDisplayableChildrenOnUnfold(child);
406
+ }, 0);
407
+ return nbDisplayableChildrenOfUnfoldedChild + nbChildren;
408
+ }
409
+ if (isInternalNavSelectorEntryALeaf(entry)) {
410
+ return entry.details.length;
411
+ }
412
+ return 0;
413
+ };
399
414
 
400
415
  /**
401
416
  * Class to handle the folding and unfolding of nav selector entries.
@@ -1868,7 +1883,7 @@ class NavSelectorLeafDetailComponent {
1868
1883
  }
1869
1884
  }
1870
1885
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, deps: [{ token: NavSelectorLeafDetailPresenter }], target: i0.ɵɵFactoryTarget.Component });
1871
- 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", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1886
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailComponent, isStandalone: true, selector: "ap-nav-selector-leaf-detail", inputs: { detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class.selected": "detail().selected", "class.embedded": "embedded()", "class.disabled": "detail().displayError" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ detail().counter }}\n </ap-counter>\n}\n@if (detail().displayError) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1;overflow:hidden}:host.embedded{padding:0}:host.embedded .caption{font-size:var(--ref-font-size-sm)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1872
1887
  }
1873
1888
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, decorators: [{
1874
1889
  type: Component,
@@ -1885,7 +1900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
1885
1900
  // Alias the input of the directive to detail the input detail will be used in the directive and in the component as well
1886
1901
  inputs: ['apTreeNodeAccessibility: detail'],
1887
1902
  },
1888
- ], 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"] }]
1903
+ ], template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ detail().counter }}\n </ap-counter>\n}\n@if (detail().displayError) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1;overflow:hidden}:host.embedded{padding:0}:host.embedded .caption{font-size:var(--ref-font-size-sm)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"] }]
1889
1904
  }], ctorParameters: () => [{ type: NavSelectorLeafDetailPresenter }] });
1890
1905
 
1891
1906
  class NavSelectorLeafDetailsPresenter {
@@ -2207,11 +2222,13 @@ class NavSelectorLeafComponent {
2207
2222
  constructor(el, navSelectorLeafPresenter) {
2208
2223
  this.el = el;
2209
2224
  this.navSelectorLeafPresenter = navSelectorLeafPresenter;
2210
- afterNextRender(() => {
2211
- this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.leaf().details.length}px`);
2225
+ afterRender(() => untracked(() => {
2226
+ const newMaxHeight = this.computeMaxHeight();
2227
+ if (this.maxHeight() !== newMaxHeight) {
2228
+ this.maxHeight.set(newMaxHeight);
2229
+ }
2212
2230
  this.updateAliasBoundedClientRect();
2213
- });
2214
- afterRender(() => untracked(() => this.updateAliasBoundedClientRect()));
2231
+ }));
2215
2232
  effect(() => {
2216
2233
  const folded = this.leaf().folded;
2217
2234
  untracked(() => {
@@ -2293,6 +2310,13 @@ class NavSelectorLeafComponent {
2293
2310
  actionName: action.name,
2294
2311
  });
2295
2312
  }
2313
+ computeMaxHeight() {
2314
+ let maxHeight = this.el.nativeElement.clientHeight;
2315
+ if (this.leaf().folded) {
2316
+ maxHeight = this.el.nativeElement.clientHeight * this.leaf().details.length;
2317
+ }
2318
+ return `${maxHeight}px`;
2319
+ }
2296
2320
  updateAliasBoundedClientRect() {
2297
2321
  const el = this.aliasEl()?.nativeElement;
2298
2322
  if (el) {
@@ -2430,11 +2454,13 @@ class NavSelectorGroupComponent {
2430
2454
  constructor(el, navSelectorGroupPresenter) {
2431
2455
  this.el = el;
2432
2456
  this.navSelectorGroupPresenter = navSelectorGroupPresenter;
2433
- afterNextRender(() => {
2434
- this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.group().children.length}px`);
2457
+ afterRender(() => untracked(() => {
2458
+ const maxHeight = this.computeMaxHeight();
2459
+ if (this.maxHeight() !== maxHeight) {
2460
+ this.maxHeight.set(maxHeight);
2461
+ }
2435
2462
  this.updateAliasBoundedClientRect();
2436
- });
2437
- afterRender(() => untracked(() => this.updateAliasBoundedClientRect()));
2463
+ }));
2438
2464
  effect(() => {
2439
2465
  const folded = this.group().folded;
2440
2466
  untracked(() => {
@@ -2479,6 +2505,14 @@ class NavSelectorGroupComponent {
2479
2505
  event.stopImmediatePropagation();
2480
2506
  this.navSelectorGroupPresenter.unfold(this.group());
2481
2507
  }
2508
+ computeMaxHeight() {
2509
+ let maxHeight = this.el.nativeElement.clientHeight;
2510
+ if (this.group().folded) {
2511
+ const numberOfDisplayableChildren = computeNumberOfDisplayableChildrenOnUnfold(this.group());
2512
+ maxHeight = this.el.nativeElement.clientHeight * numberOfDisplayableChildren;
2513
+ }
2514
+ return `${maxHeight}px`;
2515
+ }
2482
2516
  updateAliasBoundedClientRect() {
2483
2517
  const el = this.aliasEl()?.nativeElement;
2484
2518
  if (el) {
@@ -2603,11 +2637,13 @@ class NavSelectorCategoryComponent {
2603
2637
  constructor(el, navSelectorCategoryPresenter) {
2604
2638
  this.el = el;
2605
2639
  this.navSelectorCategoryPresenter = navSelectorCategoryPresenter;
2606
- afterNextRender(() => {
2607
- this.maxHeight.set(`${this.el.nativeElement.clientHeight * this.category().children.length}px`);
2640
+ afterRender(() => untracked(() => {
2641
+ const maxHeight = this.computeMaxHeight();
2642
+ if (this.maxHeight() !== maxHeight) {
2643
+ this.maxHeight.set(maxHeight);
2644
+ }
2608
2645
  this.updateAliasBoundedClientRect();
2609
- });
2610
- afterRender(() => untracked(() => this.updateAliasBoundedClientRect()));
2646
+ }));
2611
2647
  effect(() => {
2612
2648
  const folded = this.category().folded;
2613
2649
  untracked(() => {
@@ -2621,6 +2657,14 @@ class NavSelectorCategoryComponent {
2621
2657
  });
2622
2658
  }
2623
2659
  maxHeight = signal('0px');
2660
+ computeMaxHeight() {
2661
+ let maxHeight = this.el.nativeElement.clientHeight;
2662
+ if (this.category().folded) {
2663
+ const numberOfDisplayableChildren = computeNumberOfDisplayableChildrenOnUnfold(this.category());
2664
+ maxHeight = this.el.nativeElement.clientHeight * numberOfDisplayableChildren;
2665
+ }
2666
+ return `${maxHeight}px`;
2667
+ }
2624
2668
  updateAliasBoundedClientRect() {
2625
2669
  const el = this.aliasEl()?.nativeElement;
2626
2670
  if (el) {
@@ -2833,7 +2877,7 @@ class NavSelectorComponent {
2833
2877
  }
2834
2878
  }
2835
2879
  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 });
2836
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, 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 }], 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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" (actionClicked)=\"actionClicked.emit($event)\"/>\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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:min(224px,100%)}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:min(250px,100%)}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{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-y:scroll}: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"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
2880
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, 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 }], 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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" (actionClicked)=\"actionClicked.emit($event)\"/>\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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:min(224px,100%)}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:min(250px,100%)}:host:not(.embedded) .nav-selector__content{max-width:calc(250px - var(--ref-spacing-sm) - 4px)}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__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-y:scroll;overflow-x:hidden}: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"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
2837
2881
  trigger('expand', [
2838
2882
  state('expanded', style({ width: '100%' })),
2839
2883
  state('minified', style({ width: '64px' })),
@@ -2871,7 +2915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
2871
2915
  // Force animation to do not be with 100% instantly
2872
2916
  keyframes([style({ width: '64px' }), style({ width: '50%' }), style({ width: '100%' })]))),
2873
2917
  ]),
2874
- ], 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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" (actionClicked)=\"actionClicked.emit($event)\"/>\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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:min(224px,100%)}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:min(250px,100%)}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{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-y:scroll}: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"] }]
2918
+ ], 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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" (actionClicked)=\"actionClicked.emit($event)\"/>\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)=\"clickExpandButton()\">\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\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" (actionClicked)=\"actionClicked.emit($event)\"/>\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:min(224px,100%)}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:min(250px,100%)}:host:not(.embedded) .nav-selector__content{max-width:calc(250px - var(--ref-spacing-sm) - 4px)}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__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-y:scroll;overflow-x:hidden}: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"] }]
2875
2919
  }], ctorParameters: () => [{ type: NavSelectorState }, { type: i0.ElementRef }] });
2876
2920
 
2877
2921
  /**