@agorapulse/ui-components 18.0.26 → 18.0.27
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.
- package/agorapulse-ui-components-18.0.27.tgz +0 -0
- package/counter/counter.component.d.ts +7 -11
- package/esm2022/counter/counter.component.mjs +26 -53
- package/esm2022/nav-selector/nav-selector-group/nav-selector-group.component.mjs +2 -2
- package/esm2022/nav-selector/nav-selector-leaf/nav-selector-leaf.component.mjs +2 -2
- package/esm2022/nav-selector/nav-selector-leaf-detail/nav-selector-leaf-detail.component.mjs +2 -2
- package/esm2022/nav-selector/nav-selector.component.mjs +44 -20
- package/esm2022/nav-selector/nav-selector.state.mjs +6 -1
- package/fesm2022/agorapulse-ui-components-counter.mjs +25 -52
- package/fesm2022/agorapulse-ui-components-counter.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +51 -22
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/nav-selector/nav-selector.component.d.ts +7 -3
- package/nav-selector/nav-selector.state.d.ts +1 -0
- package/package.json +1 -1
- package/agorapulse-ui-components-18.0.26.tgz +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-counter.mjs","sources":["../../../libs/ui-components/counter/src/counter.component.ts","../../../libs/ui-components/counter/src/
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-counter.mjs","sources":["../../../libs/ui-components/counter/src/counter.component.ts","../../../libs/ui-components/counter/src/agorapulse-ui-components-counter.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nexport type CounterColor = 'blue' | 'orange' | 'grey';\nexport type CounterSize = 'big' | 'normal';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-counter',\n standalone: true,\n template: '<ng-content />',\n styleUrls: ['./counter.component.scss'],\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'hostClasses()',\n '[attr.role]': 'role()',\n },\n})\nexport class CounterComponent {\n color = input<CounterColor>('orange');\n size = input<CounterSize>('normal');\n notif = input(false, { transform: booleanAttribute });\n background = input(true, { transform: booleanAttribute });\n role = input('marquee');\n\n protected hostClasses = computed(() => {\n const classes: string[] = [];\n\n if (!this.notif()) {\n classes.push(this.color(), this.size());\n } else {\n classes.push('notif');\n }\n\n if (this.background()) {\n classes.push('bg');\n }\n\n return classes;\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAiBa,gBAAgB,CAAA;AACzB,IAAA,KAAK,GAAG,KAAK,CAAe,QAAQ,CAAC;AACrC,IAAA,IAAI,GAAG,KAAK,CAAc,QAAQ,CAAC;IACnC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACrD,UAAU,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACzD,IAAA,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;AAEb,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;QAClC,MAAM,OAAO,GAAa,EAAE;AAE5B,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;AACf,YAAA,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;aACpC;AACH,YAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;AAGzB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACnB,YAAA,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGtB,QAAA,OAAO,OAAO;AAClB,KAAC,CAAC;uGArBO,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,8vBARf,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,svDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQjB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAZ5B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,YAAY,EACV,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,gBAAgB,EAEX,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAC/B,IAAA,EAAA;AACF,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,aAAa,EAAE,QAAQ;AAC1B,qBAAA,EAAA,MAAA,EAAA,CAAA,svDAAA,CAAA,EAAA;;;ACfL;;AAEG;;;;"}
|
|
@@ -1712,6 +1712,11 @@ class NavSelectorState {
|
|
|
1712
1712
|
this.expandedAfterDelay.set(this.expanded());
|
|
1713
1713
|
this.entries.update(entries => NavSelectorAccessibility.resetFocus(NavSelectorMinifying.minify(entries, this.multipleModeEnabled())));
|
|
1714
1714
|
}
|
|
1715
|
+
forceExpand() {
|
|
1716
|
+
this.expanded.set(true);
|
|
1717
|
+
this.expandedAfterDelay.set(this.expanded());
|
|
1718
|
+
this.entries.update(entries => NavSelectorAccessibility.resetFocus(NavSelectorMinifying.expand(entries, this.multipleModeEnabled())));
|
|
1719
|
+
}
|
|
1715
1720
|
onSelectionChange(uids) {
|
|
1716
1721
|
// Avoid infinite loop if you put unexisting uids as select will generate the same entries but with different reference
|
|
1717
1722
|
if (JSON.stringify(uids) === JSON.stringify(this.lastSelectedUids())) {
|
|
@@ -1820,7 +1825,7 @@ class NavSelectorLeafDetailComponent {
|
|
|
1820
1825
|
}
|
|
1821
1826
|
}
|
|
1822
1827
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, deps: [{ token: NavSelectorLeafDetailPresenter }], target: i0.ɵɵFactoryTarget.Component });
|
|
1823
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafDetailComponent, isStandalone: true, selector: "ap-nav-selector-leaf-detail", inputs: { detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class.selected": "detail().selected", "class.embedded": "embedded()", "class.disabled": "detail().displayError" } }, providers: [withSymbols(apErrorFill), NavSelectorLeafDetailPresenter], hostDirectives: [{ directive: TreeNodeAccessibilityDirective, inputs: ["apTreeNodeAccessibility", "detail"] }], ngImport: i0, template: "<span class=\"caption\">{{ detail().alias }}</span>\n\n@if (detail().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ detail().counter }}\n </ap-counter>\n}\n@if (detail().displayError) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"detail().errorReason\" />\n}\n", styles: [":host{display:flex;height:32px;padding:0 var(--ref-spacing-xxs);align-items:center;gap:var(--ref-spacing-xxs);align-self:stretch;flex-grow:1}:host.embedded{padding:0}:host.embedded .caption{font-size:var(--ref-font-size-sm)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host .caption{flex-grow:1;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;white-space:nowrap;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded){cursor:pointer}:host:not(.disabled):not(.embedded):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host:not(.disabled):not(.embedded):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host:not(.disabled):not(.embedded).selected{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host:not(.disabled):not(.embedded).selected .caption{overflow:hidden;color:var(--ref-color-electric-blue-150);text-overflow:ellipsis;white-space:nowrap;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host:not(.disabled):not(.embedded).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host.disabled .caption{opacity:.5}:host.embedded.selected .caption{color:var(--ref-color-electric-blue-150);font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}\n"], dependencies: [{ kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "
|
|
1828
|
+
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 });
|
|
1824
1829
|
}
|
|
1825
1830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorLeafDetailComponent, decorators: [{
|
|
1826
1831
|
type: Component,
|
|
@@ -2254,7 +2259,7 @@ class NavSelectorLeafComponent {
|
|
|
2254
2259
|
}
|
|
2255
2260
|
}
|
|
2256
2261
|
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 });
|
|
2257
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n @if (actionProjection?.length) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n [apNavSelectorPopoverTrigger]=\"popover\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n <ap-nav-selector-popover\n #popover\n placement=\"bottom_start\">\n @for (action of actionProjection; track action) {\n <ng-template #item>\n <ng-container\n [ngTemplateOutlet]=\"action\"\n [ngTemplateOutletContext]=\"{\n uid: leaf().uid\n }\" />\n </ng-template>\n }\n </ap-nav-selector-popover>\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"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", "background", "notif"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "name", "ariaLabel"] }], animations: [
|
|
2262
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorLeafPresenter.expandedAfterDelay()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n @let actionProjection = navSelectorLeafPresenter.leafActionProjection();\n @if (actionProjection?.length) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\"\n [apNavSelectorPopoverTrigger]=\"popover\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: true, keyboard: ['Space', 'Enter'] }\" />\n\n <ap-nav-selector-popover\n #popover\n placement=\"bottom_start\">\n @for (action of actionProjection; track action) {\n <ng-template #item>\n <ng-container\n [ngTemplateOutlet]=\"action\"\n [ngTemplateOutletContext]=\"{\n uid: leaf().uid\n }\" />\n </ng-template>\n }\n </ap-nav-selector-popover>\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "name", "ariaLabel"] }], animations: [
|
|
2258
2263
|
/**
|
|
2259
2264
|
* 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)
|
|
2260
2265
|
*/
|
|
@@ -2439,7 +2444,7 @@ class NavSelectorGroupComponent {
|
|
|
2439
2444
|
}
|
|
2440
2445
|
}
|
|
2441
2446
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorGroupComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorGroupPresenter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorGroupPresenter.expanded()" } }, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\"\n (click)=\"toggleFolding($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <ap-symbol\n symbolId=\"folder\"\n size=\"sm\" />\n\n <span\n #alias\n class=\"caption\">\n {{ group().alias }}\n </span>\n\n @if (group().displayTokenInvalid) {\n <ap-symbol\n symbolId=\"error_fill\"\n size=\"sm\" />\n }\n\n @if (group().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ group().counter }}\n </ap-counter>\n }\n\n <ap-symbol\n size=\"sm\"\n class=\"folding-button\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [class.token-invalid]=\"group().displayTokenInvalid\"\n [class.multiple-mode]=\"navSelectorGroupPresenter.isMultipleModeEnabled()\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <div class=\"picture-url-sample-container\">\n <div class=\"picture-url-sample\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"16\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n\n <div class=\"status\">\n @if (group().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ group().counter }}\n </ap-counter>\n }\n </div>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative}:host.minified .content:not(.multiple-mode){justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px;background-color:var(--ref-color-white);border-radius:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "background", "
|
|
2447
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorGroupComponent, isStandalone: true, selector: "ap-nav-selector-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorGroupPresenter.expanded()" } }, providers: [withSymbols(apFolder, apErrorFill, apChevronDown, apChevronUp), NavSelectorGroupPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorGroupPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\"\n (click)=\"toggleFolding($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <ap-symbol\n symbolId=\"folder\"\n size=\"sm\" />\n\n <span\n #alias\n class=\"caption\">\n {{ group().alias }}\n </span>\n\n @if (group().displayTokenInvalid) {\n <ap-symbol\n symbolId=\"error_fill\"\n size=\"sm\" />\n }\n\n @if (group().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ group().counter }}\n </ap-counter>\n }\n\n <ap-symbol\n size=\"sm\"\n class=\"folding-button\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [class.token-invalid]=\"group().displayTokenInvalid\"\n [class.multiple-mode]=\"navSelectorGroupPresenter.isMultipleModeEnabled()\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"group()\"\n (click)=\"toggleFolding($event)\"\n (keydown.space)=\"onKeydownSpaceOrEnter($event)\"\n (keydown.enter)=\"onKeydownSpaceOrEnter($event)\">\n @if (navSelectorGroupPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"group().uid\"\n [checked]=\"group().selected\"\n [disabled]=\"!group().selectable\"\n [indeterminate]=\"group().undeterminedSelection\"\n (click)=\"eventStopper($event)\"\n (change)=\"onGroupSelected()\" />\n }\n\n <div class=\"picture-url-sample-container\">\n <div class=\"picture-url-sample\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"16\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n\n <div class=\"status\">\n @if (group().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ group().counter }}\n </ap-counter>\n }\n </div>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of group().children; track child.uid) {\n @if (!child.hidden) {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=folder]{color:var(--ref-color-grey-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .picture-url-sample-container{position:relative;width:26px}:host .picture-url-sample{display:flex;width:26px;align-items:center;align-content:center;gap:2px;flex-wrap:wrap}:host .avatar-sample{width:12px;height:12px;min-width:12px;max-width:12px;min-height:12px;max-height:12px;--ap-avatar-online-icon-size: 6px;--ap-avatar-symbol-size: 8px;--ap-avatar-network-size: 8px;--ap-avatar-size: 12px;border:.75px solid var(--ref-color-grey-10);box-shadow:none}:host .avatar-sample ::ng-deep img{height:12px;width:12px}:host.minified .content{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs);position:relative}:host.minified .content:not(.multiple-mode){justify-content:center}:host.minified .content .toggle{display:none}:host.minified .content .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{width:26px;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .picture-url-sample,:host.minified .content:focus-visible .picture-url-sample{display:none}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host.minified .status{position:absolute;right:-12px;top:-2px;background-color:var(--ref-color-white);border-radius:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }], animations: [
|
|
2443
2448
|
/**
|
|
2444
2449
|
* 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)
|
|
2445
2450
|
*/
|
|
@@ -2629,6 +2634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
2629
2634
|
], template: "@if (navSelectorCategoryPresenter.expandedAfterDelay()) {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"category()\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <span\n #alias\n class=\"caption\">\n {{ category().alias }}\n </span>\n\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTreeNodeAccessibility]=\"category()\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, this.category())\">\n <div class=\"name-container\">\n <span class=\"caption\">{{ category().alias }}</span>\n </div>\n\n <div class=\"toggle\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"foldSymbol()\" />\n </div>\n </div>\n\n <div\n class=\"children-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight()\n }\n }\">\n @if (!foldedWithDelay()) {\n <div class=\"children\">\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"child\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"child\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"] }]
|
|
2630
2635
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
|
|
2631
2636
|
|
|
2637
|
+
const AUTO_MINIFY_WIDTH_BREAKPOINT = 1280;
|
|
2632
2638
|
let nextUniqueId = 0;
|
|
2633
2639
|
class NavSelectorComponent {
|
|
2634
2640
|
navSelectorState;
|
|
@@ -2642,6 +2648,7 @@ class NavSelectorComponent {
|
|
|
2642
2648
|
* If true, the nav selector will be expanded by default. Even if the width of the screen is smaller than 1280px.
|
|
2643
2649
|
*/
|
|
2644
2650
|
forceExpanded = input(false);
|
|
2651
|
+
expandedStateLocalStorageKey = input();
|
|
2645
2652
|
selectedEntryUids = model.required();
|
|
2646
2653
|
headerProjection = contentChild('header');
|
|
2647
2654
|
footerProjection = contentChild('footer');
|
|
@@ -2664,22 +2671,9 @@ class NavSelectorComponent {
|
|
|
2664
2671
|
this.ready.set(true);
|
|
2665
2672
|
});
|
|
2666
2673
|
effect(() => {
|
|
2667
|
-
|
|
2674
|
+
const expanded = this.navSelectorState.expanded();
|
|
2675
|
+
this.onExpansionStateChange.emit({ expanded });
|
|
2668
2676
|
});
|
|
2669
|
-
const minifyOnStartEffect = effect(() => {
|
|
2670
|
-
const ready = this.ready();
|
|
2671
|
-
const embedded = this.embedded();
|
|
2672
|
-
const forceExpanded = this.forceExpanded();
|
|
2673
|
-
const entries = this.navSelectorState.entries();
|
|
2674
|
-
untracked(() => {
|
|
2675
|
-
if (ready && entries.length) {
|
|
2676
|
-
if (!embedded && !forceExpanded && document.body.clientWidth < 1200) {
|
|
2677
|
-
this.navSelectorState.forceMinify();
|
|
2678
|
-
}
|
|
2679
|
-
minifyOnStartEffect.destroy();
|
|
2680
|
-
}
|
|
2681
|
-
});
|
|
2682
|
-
}, { manualCleanup: true });
|
|
2683
2677
|
effect(() => {
|
|
2684
2678
|
const multipleModeEnabled = this.multipleModeEnabled();
|
|
2685
2679
|
const newEntries = this.navSelectorEntries();
|
|
@@ -2716,6 +2710,9 @@ class NavSelectorComponent {
|
|
|
2716
2710
|
untracked(() => this.navSelectorState.updateTexts(translatedTexts));
|
|
2717
2711
|
});
|
|
2718
2712
|
}
|
|
2713
|
+
ngOnInit() {
|
|
2714
|
+
this.initializeExpandedState();
|
|
2715
|
+
}
|
|
2719
2716
|
onMinifiedSearchClicked() {
|
|
2720
2717
|
this.navSelectorState.toggleExpanded();
|
|
2721
2718
|
setTimeout(() => this.el.nativeElement.querySelector('input').focus());
|
|
@@ -2757,12 +2754,44 @@ class NavSelectorComponent {
|
|
|
2757
2754
|
}
|
|
2758
2755
|
}
|
|
2759
2756
|
onWindowResize() {
|
|
2760
|
-
if (
|
|
2761
|
-
this.navSelectorState.
|
|
2757
|
+
if (!this.embedded() && !this.forceExpanded()) {
|
|
2758
|
+
if (this.navSelectorState.expanded() && window.innerWidth < AUTO_MINIFY_WIDTH_BREAKPOINT) {
|
|
2759
|
+
this.navSelectorState.forceMinify();
|
|
2760
|
+
}
|
|
2761
|
+
else if (!this.navSelectorState.expanded() && window.innerWidth >= AUTO_MINIFY_WIDTH_BREAKPOINT) {
|
|
2762
|
+
const expandedStateLocalStorageKey = this.expandedStateLocalStorageKey();
|
|
2763
|
+
if (!expandedStateLocalStorageKey || !localStorage.getItem(expandedStateLocalStorageKey)) {
|
|
2764
|
+
this.navSelectorState.forceExpand();
|
|
2765
|
+
}
|
|
2766
|
+
}
|
|
2767
|
+
}
|
|
2768
|
+
}
|
|
2769
|
+
initializeExpandedState() {
|
|
2770
|
+
if (!this.embedded() && !this.forceExpanded()) {
|
|
2771
|
+
// If the expanded state is stored in local storage, we need to initialize the expanded state accordingly
|
|
2772
|
+
const expandedStateLocalStorageKey = this.expandedStateLocalStorageKey();
|
|
2773
|
+
if (expandedStateLocalStorageKey && localStorage.getItem(expandedStateLocalStorageKey)) {
|
|
2774
|
+
if (localStorage.getItem(expandedStateLocalStorageKey) === 'true') {
|
|
2775
|
+
this.navSelectorState.forceExpand();
|
|
2776
|
+
}
|
|
2777
|
+
else {
|
|
2778
|
+
this.navSelectorState.forceMinify();
|
|
2779
|
+
}
|
|
2780
|
+
}
|
|
2781
|
+
else {
|
|
2782
|
+
this.onWindowResize();
|
|
2783
|
+
}
|
|
2784
|
+
}
|
|
2785
|
+
}
|
|
2786
|
+
clickExpandButton() {
|
|
2787
|
+
this.navSelectorState.toggleExpanded();
|
|
2788
|
+
const expandedStateLocalStorageKey = this.expandedStateLocalStorageKey();
|
|
2789
|
+
if (expandedStateLocalStorageKey) {
|
|
2790
|
+
localStorage.setItem(expandedStateLocalStorageKey, this.navSelectorState.expanded().toString());
|
|
2762
2791
|
}
|
|
2763
2792
|
}
|
|
2764
2793
|
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 });
|
|
2765
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "leafActionProjection", predicate: ["leafAction"], isSignal: true }], ngImport: i0, template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n @if (navSelectorState.expandedAfterDelay()) {\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n <button\n type=\"button\"\n class=\"expand-button expanded\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-reduce\" />\n </button>\n }\n\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n class=\"nav-selector-search\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-expand\" />\n </button>\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-icon-button (onClick)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n </div>\n\n <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-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;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto;scrollbar-gutter:stable both-edges}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
2794
|
+
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", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "leafActionProjection", predicate: ["leafAction"], isSignal: true }], ngImport: i0, template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n @if (navSelectorState.expandedAfterDelay()) {\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n <button\n type=\"button\"\n class=\"expand-button expanded\"\n (click)=\"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\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"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\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;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:250px}}: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;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto;scrollbar-gutter:stable both-edges}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;padding:var(--ref-spacing-xs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;border-top:1px solid var(--sys-border-color-default);background:var(--ref-color-white)}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs) var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
2766
2795
|
trigger('expand', [
|
|
2767
2796
|
state('expanded', style({ width: '100%' })),
|
|
2768
2797
|
state('minified', style({ width: '64px' })),
|
|
@@ -2800,7 +2829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
2800
2829
|
// Force animation to do not be with 100% instantly
|
|
2801
2830
|
keyframes([style({ width: '64px' }), style({ width: '50%' }), style({ width: '100%' })]))),
|
|
2802
2831
|
]),
|
|
2803
|
-
], template: "<nav [@expand]=\"expansionState()\" [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n @if (navSelectorState.expandedAfterDelay()) {\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n\n <button\n type=\"button\"\n class=\"expand-button expanded\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-reduce\" />\n </button>\n }\n\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n class=\"nav-selector-search\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"navSelectorState.toggleExpanded()\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"arrow-expand\" />\n </button>\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n <ap-icon-button (onClick)=\"onMinifiedSearchClicked()\" type=\"stroked\" role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n </div>\n\n <div class=\"nav-selector__content\" role=\"tree\" [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div class=\"entry\" [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf [leaf]=\"entry\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1;width:100%;max-width:224px;min-width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded){max-width:250px;min-width:250px}}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;width:100%;flex-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;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto;scrollbar-gutter:stable both-edges}: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"] }]
|
|
2832
|
+
], 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\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"$any(entry)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n } @else {\n <div class=\"nav-selector__header\">\n <button\n type=\"button\"\n class=\"expand-button\"\n (click)=\"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\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group [group]=\"entry\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category [category]=\"entry\" />\n }\n </div>\n }\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;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:250px}}: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;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__header .nav-selector-search{width:100%}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;overflow:auto;scrollbar-gutter:stable both-edges}: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"] }]
|
|
2804
2833
|
}], ctorParameters: () => [{ type: NavSelectorState }, { type: i0.ElementRef }] });
|
|
2805
2834
|
|
|
2806
2835
|
/**
|