@agorapulse/ui-components 18.0.32 → 18.0.34

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 (10) hide show
  1. package/agorapulse-ui-components-18.0.34.tgz +0 -0
  2. package/esm2022/nav-selector/nav-selector-leaf/nav-selector-leaf.component.mjs +3 -3
  3. package/esm2022/nav-selector/nav-selector-popover/nav-selector-popover-item.component.mjs +24 -6
  4. package/esm2022/nav-selector/nav-selector.mjs +1 -1
  5. package/fesm2022/agorapulse-ui-components-nav-selector.mjs +25 -8
  6. package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
  7. package/nav-selector/nav-selector-popover/nav-selector-popover-item.component.d.ts +3 -1
  8. package/nav-selector/nav-selector.d.ts +6 -2
  9. package/package.json +7 -7
  10. package/agorapulse-ui-components-18.0.32.tgz +0 -0
package/fesm2022/agorapulse-ui-components-nav-selector.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as i1 from '@agorapulse/ui-components/directives';
2
2
  import { BaseButtonDirective } from '@agorapulse/ui-components/directives';
3
+ import { SymbolComponent, withSymbols, apFeatureLock, apErrorFill, apChevronDown, apChevronUp, apFolder, apArrowExpand, apArrowReduce, apSearch } from '@agorapulse/ui-symbol';
3
4
  import * as i0 from '@angular/core';
4
5
  import { input, inject, Component, afterRender, Directive, effect, untracked, ChangeDetectionStrategy, signal, computed, Injectable, contentChildren, output, viewChild, afterNextRender, model, contentChild } from '@angular/core';
5
6
  import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
6
7
  import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
7
- import { SymbolComponent, withSymbols, apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apFolder, apArrowExpand, apArrowReduce, apSearch } from '@agorapulse/ui-symbol';
8
8
  import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
9
9
  import { NgTemplateOutlet } from '@angular/common';
10
10
  import * as i2 from '@angular/forms';
@@ -18,11 +18,13 @@ import { apMore } from '@agorapulse/ui-symbol/icons';
18
18
  class NavSelectorPopoverItemComponent {
19
19
  selected = input(false);
20
20
  disabled = input(false);
21
+ locked = input(false);
22
+ id = input('');
21
23
  name = input.required();
22
24
  ariaLabel = input(undefined);
23
25
  baseButtonDirective = inject(BaseButtonDirective, { self: true });
24
26
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
25
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.9", type: NavSelectorPopoverItemComponent, isStandalone: true, selector: "ap-nav-selector-popover-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()", "class.disabled": "disabled()" } }, hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `
27
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorPopoverItemComponent, isStandalone: true, selector: "ap-nav-selector-popover-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, locked: { classPropertyName: "locked", publicName: "locked", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.selected": "selected()", "class.disabled": "disabled()", "class.locked": "locked()" } }, providers: [withSymbols(apFeatureLock)], hostDirectives: [{ directive: i1.BaseButtonDirective }], ngImport: i0, template: `
26
28
  <button
27
29
  #buttonElement
28
30
  type="button"
@@ -30,12 +32,19 @@ class NavSelectorPopoverItemComponent {
30
32
  [disabled]="disabled()"
31
33
  [name]="name()"
32
34
  [attr.data-test]="baseButtonDirective.hostDataTest ?? name()"
33
- [attr.id]="baseButtonDirective.hostId"
35
+ [attr.id]="id()"
34
36
  [attr.aria-label]="ariaLabel() || null"
35
37
  [attr.aria-disabled]="disabled()?.toString()">
36
38
  <ng-content />
39
+
40
+ @if (locked()) {
41
+ <ap-symbol
42
+ symbolId="feature-lock"
43
+ color="purple"
44
+ size="sm" />
45
+ }
37
46
  </button>
38
- `, isInline: true, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);background:none;border:none;color:var(--ref-color-grey-100);overflow:hidden;text-overflow:ellipsis;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}:host button{all:unset;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);flex-grow:1}:host button:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).nav-selector-popover__item--active{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}:host:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled{cursor:auto}\n"] });
47
+ `, isInline: true, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);background:none;border:none;color:var(--ref-color-grey-100);overflow:hidden;text-overflow:ellipsis;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}:host button{all:unset;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);flex-grow:1;display:flex;justify-content:space-between}:host button:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).nav-selector-popover__item--active{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}:host:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled:not(.locked){cursor:auto}:host.locked:hover{background:var(--ref-color-purple-10)}:host.locked:active{background:var(--ref-color-purple-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }] });
39
48
  }
40
49
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorPopoverItemComponent, decorators: [{
41
50
  type: Component,
@@ -47,15 +56,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
47
56
  [disabled]="disabled()"
48
57
  [name]="name()"
49
58
  [attr.data-test]="baseButtonDirective.hostDataTest ?? name()"
50
- [attr.id]="baseButtonDirective.hostId"
59
+ [attr.id]="id()"
51
60
  [attr.aria-label]="ariaLabel() || null"
52
61
  [attr.aria-disabled]="disabled()?.toString()">
53
62
  <ng-content />
63
+
64
+ @if (locked()) {
65
+ <ap-symbol
66
+ symbolId="feature-lock"
67
+ color="purple"
68
+ size="sm" />
69
+ }
54
70
  </button>
55
71
  `, host: {
56
72
  '[class.selected]': 'selected()',
57
73
  '[class.disabled]': 'disabled()',
58
- }, styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);background:none;border:none;color:var(--ref-color-grey-100);overflow:hidden;text-overflow:ellipsis;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}:host button{all:unset;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);flex-grow:1}:host button:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).nav-selector-popover__item--active{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}:host:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled{cursor:auto}\n"] }]
74
+ '[class.locked]': 'locked()',
75
+ }, imports: [SymbolComponent], providers: [withSymbols(apFeatureLock)], styles: [":host{width:100%;height:40px;display:flex;flex-wrap:wrap;align-content:center;gap:var(--ref-spacing-xxs);background:none;border:none;color:var(--ref-color-grey-100);overflow:hidden;text-overflow:ellipsis;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}:host button{all:unset;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);flex-grow:1;display:flex;justify-content:space-between}:host button:focus-visible{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled){cursor:pointer}:host:not(.disabled):hover{background-color:var(--ref-color-electric-blue-10)}:host:not(.disabled):active{background-color:var(--ref-color-electric-blue-20)}:host:not(.disabled).nav-selector-popover__item--active{background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-100);font-weight:var(--ref-font-weight-bold)}:host:not(.disabled).selected{background:var(--ref-color-electric-blue-10)}:host.disabled:not(.locked){cursor:auto}:host.locked:hover{background:var(--ref-color-purple-10)}:host.locked:active{background:var(--ref-color-purple-20)}\n"] }]
59
76
  }] });
60
77
 
61
78
  class TreeNodeAccessibilityDirective {
@@ -2291,7 +2308,7 @@ class NavSelectorLeafComponent {
2291
2308
  }
2292
2309
  }
2293
2310
  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 });
2294
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@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)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @if (leaf().actionsDisplayable) {\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 leaf().actions; track action) {\n <ap-nav-selector-popover-item\n item\n [disabled]=\"action.status === 'disabled'\"\n [name]=\"action.name\"\n (click)=\"onActionClicked(action)\">\n <ap-nav-selector-leaf-action [action]=\"action\" />\n </ap-nav-selector-popover-item>\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)=\"clickOnToggleFolding($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.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{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:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible 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)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "name", "ariaLabel"] }, { kind: "component", type: NavSelectorLeafActionComponent, selector: "ap-nav-selector-leaf-action", inputs: ["action"] }], animations: [
2311
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@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)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @if (leaf().actionsDisplayable) {\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 leaf().actions; track action) {\n <ap-nav-selector-popover-item\n item\n [id]=\"action.id\"\n [locked]=\"action.status === 'locked'\"\n [disabled]=\"action.status === 'disabled'\"\n [name]=\"action.name\"\n (click)=\"onActionClicked(action)\">\n <ap-nav-selector-leaf-action [action]=\"action\" />\n </ap-nav-selector-popover-item>\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)=\"clickOnToggleFolding($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.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{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:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible 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)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "locked", "id", "name", "ariaLabel"] }, { kind: "component", type: NavSelectorLeafActionComponent, selector: "ap-nav-selector-leaf-action", inputs: ["action"] }], animations: [
2295
2312
  /**
2296
2313
  * 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)
2297
2314
  */
@@ -2352,7 +2369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
2352
2369
  animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
2353
2370
  ]),
2354
2371
  ]),
2355
- ], 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)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @if (leaf().actionsDisplayable) {\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 leaf().actions; track action) {\n <ap-nav-selector-popover-item\n item\n [disabled]=\"action.status === 'disabled'\"\n [name]=\"action.name\"\n (click)=\"onActionClicked(action)\">\n <ap-nav-selector-leaf-action [action]=\"action\" />\n </ap-nav-selector-popover-item>\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)=\"clickOnToggleFolding($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.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{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:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible 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)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
2372
+ ], 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)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @if (leaf().actionsDisplayable) {\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 leaf().actions; track action) {\n <ap-nav-selector-popover-item\n item\n [id]=\"action.id\"\n [locked]=\"action.status === 'locked'\"\n [disabled]=\"action.status === 'disabled'\"\n [name]=\"action.name\"\n (click)=\"onActionClicked(action)\">\n <ap-nav-selector-leaf-action [action]=\"action\" />\n </ap-nav-selector-popover-item>\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)=\"clickOnToggleFolding($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.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .caption{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:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible 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)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
2356
2373
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafPresenter }] });
2357
2374
 
2358
2375
  class NavSelectorGroupPresenter {