@agorapulse/ui-components 18.1.10 → 18.1.12
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.1.12.tgz +0 -0
- package/esm2022/nav-selector/nav-selector-category/nav-selector-category.component.mjs +4 -4
- package/esm2022/nav-selector/nav-selector-group/nav-selector-group.component.mjs +4 -4
- package/esm2022/nav-selector/nav-selector-leaf/nav-selector-leaf.component.mjs +2 -2
- package/esm2022/nav-selector/nav-selector.component.mjs +4 -3
- package/esm2022/nav-selector/nav-selector.state.mjs +4 -6
- package/esm2022/nav-selector/testing/agorapulse-ui-components-nav-selector-testing.mjs +5 -0
- package/esm2022/nav-selector/testing/nav-selector-entry.mock.mjs +91 -0
- package/esm2022/nav-selector/testing/public_api.mjs +2 -0
- package/fesm2022/agorapulse-ui-components-nav-selector-testing.mjs +97 -0
- package/fesm2022/agorapulse-ui-components-nav-selector-testing.mjs.map +1 -0
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +13 -14
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/nav-selector/nav-selector.component.d.ts +2 -1
- package/nav-selector/nav-selector.state.d.ts +0 -1
- package/nav-selector/testing/index.d.ts +5 -0
- package/nav-selector/testing/nav-selector-entry.mock.d.ts +67 -0
- package/nav-selector/testing/public_api.d.ts +1 -0
- package/package.json +7 -1
- package/agorapulse-ui-components-18.1.10.tgz +0 -0
|
@@ -1655,7 +1655,6 @@ class NavSelectorState {
|
|
|
1655
1655
|
viewMore: '',
|
|
1656
1656
|
viewLess: '',
|
|
1657
1657
|
});
|
|
1658
|
-
lastSelectedUids = signal([]);
|
|
1659
1658
|
isMultipleModeEnabled = this.multipleModeEnabled;
|
|
1660
1659
|
search = signal('');
|
|
1661
1660
|
noResults = computed(() => this.entries().every(({ hidden }) => hidden));
|
|
@@ -1757,13 +1756,12 @@ class NavSelectorState {
|
|
|
1757
1756
|
}
|
|
1758
1757
|
onSelectionChange(uids) {
|
|
1759
1758
|
// Avoid infinite loop if you put unexisting uids as select will generate the same entries but with different reference
|
|
1760
|
-
if (JSON.stringify(uids) === JSON.stringify(this.
|
|
1759
|
+
if (JSON.stringify(uids) === JSON.stringify(this.previousSelectedUids)) {
|
|
1761
1760
|
return;
|
|
1762
1761
|
}
|
|
1763
|
-
this.lastSelectedUids.set(uids);
|
|
1764
1762
|
const selectedUids = this.collectSelectedUids(this.entries());
|
|
1765
|
-
const uidToSelect = uids.filter(uid => selectedUids.
|
|
1766
|
-
const uidToUnselect = selectedUids.filter(uid => uids.
|
|
1763
|
+
const uidToSelect = uids.filter(uid => !selectedUids.includes(uid));
|
|
1764
|
+
const uidToUnselect = selectedUids.filter(uid => !uids.includes(uid));
|
|
1767
1765
|
if (!uidToSelect.length && !uidToUnselect.length) {
|
|
1768
1766
|
return;
|
|
1769
1767
|
}
|
|
@@ -2197,7 +2195,7 @@ class NavSelectorLeafComponent {
|
|
|
2197
2195
|
return content.join('<br>');
|
|
2198
2196
|
});
|
|
2199
2197
|
tooltipDisabled = computed(() => !this.tooltipContent().length || this.leaf().detailsDisplayable);
|
|
2200
|
-
foldedWithDelay = signal(
|
|
2198
|
+
foldedWithDelay = signal(true);
|
|
2201
2199
|
network = computed(() => (this.leaf().network ? this.leaf().network : undefined));
|
|
2202
2200
|
leafActions = computed(() => {
|
|
2203
2201
|
return this.leaf().actions.map(action => ({
|
|
@@ -2439,7 +2437,7 @@ class NavSelectorGroupComponent {
|
|
|
2439
2437
|
return content.join('<br>');
|
|
2440
2438
|
});
|
|
2441
2439
|
tooltipDisabled = computed(() => !this.tooltipContent().length);
|
|
2442
|
-
foldedWithDelay = signal(
|
|
2440
|
+
foldedWithDelay = signal(true);
|
|
2443
2441
|
animationState = computed(() => (this.group().folded ? 'collapsed' : 'expanded'));
|
|
2444
2442
|
constructor(el, navSelectorGroupPresenter) {
|
|
2445
2443
|
this.el = el;
|
|
@@ -2518,7 +2516,7 @@ class NavSelectorGroupComponent {
|
|
|
2518
2516
|
}
|
|
2519
2517
|
}
|
|
2520
2518
|
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 });
|
|
2521
|
-
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 } }, outputs: { actionClicked: "actionClicked" }, 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.expanded()) {\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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\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 <div class=\"avatars\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"24\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n </div>\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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\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{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--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}:host .avatars{display:flex;width:24px;height:24px;transform:scale(.5);gap:var(--ref-spacing-xxxs);align-content:center;justify-content:center}:host .avatars:has(:nth-child(3)){display:grid;grid-template-columns:1fr 1fr}: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"], outputs: ["actionClicked"] }, { 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: [
|
|
2519
|
+
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 } }, outputs: { actionClicked: "actionClicked" }, 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: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorGroupPresenter.expanded()) {\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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\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 <div class=\"avatars\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"24\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n </div>\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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\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{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--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}:host .avatars{display:flex;width:24px;height:24px;transform:scale(.5);gap:var(--ref-spacing-xxxs);align-content:center;justify-content:center}:host .avatars:has(:nth-child(3)){display:grid;grid-template-columns:1fr 1fr}: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"], outputs: ["actionClicked"] }, { 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: [
|
|
2522
2520
|
/**
|
|
2523
2521
|
* 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)
|
|
2524
2522
|
*/
|
|
@@ -2572,7 +2570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
2572
2570
|
animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}', overflow: 'hidden' }), style({ maxHeight: 0, overflow: 'hidden' })])),
|
|
2573
2571
|
]),
|
|
2574
2572
|
]),
|
|
2575
|
-
], template: "@if (navSelectorGroupPresenter.expanded()) {\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()
|
|
2573
|
+
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorGroupPresenter.expanded()) {\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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\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 <div class=\"avatars\">\n @for (pictureUrlSample of group().childrenPictureUrlSample; track pictureUrlSample) {\n <ap-avatar\n class=\"avatar-sample\"\n [size]=\"24\"\n [profilePicture]=\"pictureUrlSample.url ?? undefined\"\n [showInitials]=\"pictureUrlSample.initial\" />\n }\n </div>\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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\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{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--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}:host .avatars{display:flex;width:24px;height:24px;transform:scale(.5);gap:var(--ref-spacing-xxxs);align-content:center;justify-content:center}:host .avatars:has(:nth-child(3)){display:grid;grid-template-columns:1fr 1fr}: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"] }]
|
|
2576
2574
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorGroupPresenter }] });
|
|
2577
2575
|
|
|
2578
2576
|
class NavSelectorCategoryPresenter {
|
|
@@ -2606,7 +2604,7 @@ class NavSelectorCategoryComponent {
|
|
|
2606
2604
|
category = input.required();
|
|
2607
2605
|
actionClicked = output();
|
|
2608
2606
|
foldSymbol = computed(() => (this.category().folded ? 'chevron-down' : 'chevron-up'));
|
|
2609
|
-
foldedWithDelay = signal(
|
|
2607
|
+
foldedWithDelay = signal(true);
|
|
2610
2608
|
animationState = computed(() => (this.category().folded ? 'collapsed' : 'expanded'));
|
|
2611
2609
|
aliasEl = viewChild('alias');
|
|
2612
2610
|
aliasBoundedClientRect = signal({
|
|
@@ -2669,7 +2667,7 @@ class NavSelectorCategoryComponent {
|
|
|
2669
2667
|
}
|
|
2670
2668
|
}
|
|
2671
2669
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NavSelectorCategoryComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorCategoryPresenter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2672
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { listeners: { "keydown.arrowLeft": "navSelectorCategoryPresenter.fold($event, this.category())", "keydown.arrowRight": "navSelectorCategoryPresenter.unfold($event, this.category())" }, properties: { "class.minified": "!navSelectorCategoryPresenter.expanded()" } }, providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (navSelectorCategoryPresenter.expanded()) {\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()
|
|
2670
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { listeners: { "keydown.arrowLeft": "navSelectorCategoryPresenter.fold($event, this.category())", "keydown.arrowRight": "navSelectorCategoryPresenter.unfold($event, this.category())" }, properties: { "class.minified": "!navSelectorCategoryPresenter.expanded()" } }, providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorCategoryPresenter.expanded()) {\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 @if (category().children.length === 0) {\n @if (category().emptyStateTitle) {\n <div class=\"empty-state\">\n {{ category().emptyStateTitle }}\n </div>\n }\n } @else {\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n }\n </div>\n }\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTreeNodeAccessibility]=\"category()\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, 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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .children-container .empty-state{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;color:var(--ref-color-grey-80);padding:var(--ref-spacing-xxs)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], animations: [
|
|
2673
2671
|
/**
|
|
2674
2672
|
* 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)
|
|
2675
2673
|
*/
|
|
@@ -2715,7 +2713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
2715
2713
|
animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}' }), style({ overflow: 'hidden', maxHeight: 0 })])),
|
|
2716
2714
|
]),
|
|
2717
2715
|
]),
|
|
2718
|
-
], template: "@if (navSelectorCategoryPresenter.expanded()) {\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()
|
|
2716
|
+
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorCategoryPresenter.expanded()) {\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 @if (category().children.length === 0) {\n @if (category().emptyStateTitle) {\n <div class=\"empty-state\">\n {{ category().emptyStateTitle }}\n </div>\n }\n } @else {\n @for (child of category().children; track child.uid) {\n @if (!child.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"child.type === 'GROUP'\">\n @if (child.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n }\n </div>\n }\n }\n }\n </div>\n }\n </div>\n} @else {\n <div\n class=\"content\"\n apTooltipPosition=\"right\"\n [apTreeNodeAccessibility]=\"category()\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, 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\n [leaf]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (child.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"child\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n }\n </div>\n }\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:flex;align-items:center;flex-shrink:0;align-self:stretch;flex-direction:column}:host .children-container{align-self:stretch}:host .children-container .empty-state{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;color:var(--ref-color-grey-80);padding:var(--ref-spacing-xxs)}:host .folding-button{display:flex;width:16px;height:16px;justify-content:center;align-items:center;flex-shrink:0}:host .content{padding:0 var(--ref-spacing-xxs);display:flex;height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch;cursor:pointer}:host .content:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .content:active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .content:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--sys-text-style-h4-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md)}:host .children{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch}:host .children .entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;margin-left:calc(-1 * var(--ref-spacing-xxs));margin-right:calc(-1 * var(--ref-spacing-xxs))}:host .children .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .children .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .children .entry.folder:first-child{padding-top:0}:host .children .entry.folder:last-child{border-bottom:none;padding-bottom:0}:host .children .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):first-child:not(:last-child){padding-top:var(--ref-spacing-xxs)}:host .children .entry:not(.folder):last-child:not(:first-child){padding-bottom:var(--ref-spacing-xxs);border-bottom:none}:host .children .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .children .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host.minified .name-container{overflow:hidden;display:flex}:host.minified .name-container span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block}:host.minified .caption{white-space:nowrap}:host.minified .content{position:relative}:host.minified .content .toggle{position:absolute;display:none}:host.minified .content:hover .toggle,:host.minified .content:focus-visible .toggle{inset:0;display:flex;justify-content:center;align-items:center}:host.minified .content:hover .name-container,:host.minified .content:focus-visible .name-container{display:none}\n"] }]
|
|
2719
2717
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
|
|
2720
2718
|
|
|
2721
2719
|
const AUTO_MINIFIED_STATE_WIDTH_BREAKPOINT = 1280;
|
|
@@ -2739,6 +2737,7 @@ class NavSelectorComponent {
|
|
|
2739
2737
|
selectedEntryUids = model.required();
|
|
2740
2738
|
actionClicked = output();
|
|
2741
2739
|
headerProjection = contentChild('header');
|
|
2740
|
+
contentHeaderProjection = contentChild('contentHeader');
|
|
2742
2741
|
footerProjection = contentChild('footer');
|
|
2743
2742
|
displayFooter = computed(() => this.footerProjection() !== undefined);
|
|
2744
2743
|
expansionState = computed(() => (this.navSelectorState.expanded() ? 'expanded' : 'minified'));
|
|
@@ -2869,7 +2868,7 @@ class NavSelectorComponent {
|
|
|
2869
2868
|
}
|
|
2870
2869
|
}
|
|
2871
2870
|
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 });
|
|
2872
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()", "@expand": "expansionState()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav\n [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let footerProjectionNotNull = footerProjection();\n\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n @if (navSelectorState.expanded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n }\n\n <button\n type=\"button\"\n class=\"expand-button\"\n [class.expanded]=\"navSelectorState.expanded()\"\n (click)=\"clickExpandButton()\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n </button>\n }\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n }\n\n @if (navSelectorState.expanded()) {\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n } @else {\n <ap-icon-button\n (onClick)=\"onMinifiedSearchClicked()\"\n type=\"stroked\"\n role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n }\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\n class=\"entry\"\n [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category\n [category]=\"$any(entry)\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded()\n }\" />\n </div>\n }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;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{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
2871
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: NavSelectorComponent, isStandalone: true, selector: "ap-nav-selector", inputs: { navSelectorEntries: { classPropertyName: "navSelectorEntries", publicName: "navSelectorEntries", isSignal: true, isRequired: true, transformFunction: null }, translatedTexts: { classPropertyName: "translatedTexts", publicName: "translatedTexts", isSignal: true, isRequired: true, transformFunction: null }, multipleModeEnabled: { classPropertyName: "multipleModeEnabled", publicName: "multipleModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, detailsDisplayedLimit: { classPropertyName: "detailsDisplayedLimit", publicName: "detailsDisplayedLimit", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, forceExpanded: { classPropertyName: "forceExpanded", publicName: "forceExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedStateLocalStorageKey: { classPropertyName: "expandedStateLocalStorageKey", publicName: "expandedStateLocalStorageKey", isSignal: true, isRequired: false, transformFunction: null }, selectedEntryUids: { classPropertyName: "selectedEntryUids", publicName: "selectedEntryUids", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedEntryUids: "selectedEntryUidsChange", actionClicked: "actionClicked", onExpansionStateChange: "onExpansionStateChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown.arrowDown": "onArrowDown($event)", "keydown.arrowUp": "onArrowUp($event)", "window:resize": "onWindowResize()" }, properties: { "class.minified": "!navSelectorState.expanded()", "class.embedded": "embedded()", "@expand": "expansionState()" } }, providers: [NavSelectorState, withSymbols(apArrowExpand, apArrowReduce, apSearch)], queries: [{ propertyName: "headerProjection", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "contentHeaderProjection", first: true, predicate: ["contentHeader"], descendants: true, isSignal: true }, { propertyName: "footerProjection", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<nav [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let contentHeaderProjectionNotNull = contentHeaderProjection();\n @let footerProjectionNotNull = footerProjection();\n\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n @if (navSelectorState.expanded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n }\n\n <button\n type=\"button\"\n class=\"expand-button\"\n [class.expanded]=\"navSelectorState.expanded()\"\n (click)=\"clickExpandButton()\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n </button>\n }\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @if (navSelectorState.expanded()) {\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n } @else {\n <ap-icon-button\n (onClick)=\"onMinifiedSearchClicked()\"\n type=\"stroked\"\n role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category\n [category]=\"$any(entry)\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n </div>\n }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;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{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: NavSelectorLeafComponent, selector: "ap-nav-selector-leaf", inputs: ["leaf"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorGroupComponent, selector: "ap-nav-selector-group", inputs: ["group"], outputs: ["actionClicked"] }, { kind: "component", type: NavSelectorCategoryComponent, selector: "ap-nav-selector-category", inputs: ["category"], outputs: ["actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
2873
2872
|
trigger('expand', [
|
|
2874
2873
|
transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
|
|
2875
2874
|
transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
|
|
@@ -2900,7 +2899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
2900
2899
|
transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
|
|
2901
2900
|
transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
|
|
2902
2901
|
]),
|
|
2903
|
-
], template: "<nav
|
|
2902
|
+
], template: "<nav [class.embedded]=\"embedded()\">\n @let headerProjectionNotNull = headerProjection();\n @let contentHeaderProjectionNotNull = contentHeaderProjection();\n @let footerProjectionNotNull = footerProjection();\n\n <div class=\"nav-selector__header\">\n @if (!embedded()) {\n @if (navSelectorState.expanded()) {\n <span class=\"h3\">{{ translatedTexts().title }}</span>\n }\n\n <button\n type=\"button\"\n class=\"expand-button\"\n [class.expanded]=\"navSelectorState.expanded()\"\n (click)=\"clickExpandButton()\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"navSelectorState.expanded() ? 'arrow-reduce' : 'arrow-expand'\" />\n </button>\n }\n\n @if (headerProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"headerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @if (navSelectorState.expanded()) {\n <ap-input-search\n [id]=\"componentUid + '_search'\"\n [placeholder]=\"translatedTexts().searchPlaceholder\"\n [ngModel]=\"navSelectorState.search()\"\n (ngModelChange)=\"navSelectorState.search.set($event ?? '')\" />\n } @else {\n <ap-icon-button\n (onClick)=\"onMinifiedSearchClicked()\"\n type=\"stroked\"\n role=\"search\">\n <ap-symbol symbolId=\"search\" />\n </ap-icon-button>\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\"\n role=\"tree\">\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n\n @for (entry of navSelectorState.entries(); track entry.uid) {\n @if (!entry.hidden) {\n <div\n class=\"entry\"\n [class.folder]=\"entry.type === 'GROUP' || entry.type === 'CATEGORY'\">\n @if (entry.type === 'LEAF') {\n <ap-nav-selector-leaf\n [leaf]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'GROUP') {\n <ap-nav-selector-group\n [group]=\"entry\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n } @else if (entry.type === 'CATEGORY') {\n <ap-nav-selector-category\n [category]=\"$any(entry)\"\n (actionClicked)=\"actionClicked.emit($event)\" />\n }\n </div>\n }\n }\n @if (navSelectorState.expanded() && navSelectorState.noResults()) {\n <div class=\"no-result\">{{ translatedTexts().noResults }}</div>\n }\n </div>\n\n @if (displayFooter() && footerProjectionNotNull) {\n <div class=\"nav-selector__footer\">\n <ng-container\n [ngTemplateOutlet]=\"footerProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n </div>\n }\n</nav>\n", styles: [":host,nav{width:224px}@media only screen and (min-width: 1400px){:host:not(.embedded),nav:not(.embedded){width:250px}:host:not(.embedded) .nav-selector__content,nav:not(.embedded) .nav-selector__content{width:250px}}:host{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;flex-grow:1}:host :hover .expand-button.expanded{animation-name:translateExpandButton}:host nav{display:flex;height:100%;flex-grow:1;flex-direction:column;align-items:flex-start;flex-shrink:0;overflow:hidden;background:var(--ref-color-white);transition:width .25s cubic-bezier(.4,0,.3,1)}:host nav:not(.embedded){border-right:1px solid var(--ref-color-grey-10)}:host .nav-selector__header{position:relative;display:flex;padding:var(--ref-spacing-xs) var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs);align-self:stretch;white-space:nowrap;border-bottom:1px solid var(--ref-color-grey-10);background:var(--ref-color-white)}:host .nav-selector__header .h3{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--sys-text-style-h3-size);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}:host .nav-selector__header .expand-button-container{position:absolute;right:0;top:var(--ref-spacing-xs)}:host .nav-selector__header .expand-button{animation-duration:70ms;animation-timing-function:cubic-bezier(0,0,.2,1);animation-fill-mode:forwards;animation-name:translateHideButton;display:flex;width:24px;height:24px;justify-content:center;align-items:center;background:var(--ref-color-grey-bg);border-top:1px solid var(--ref-color-grey-20);border-right:none;border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm);cursor:pointer}@keyframes translateHideButton{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes translateExpandButton{0%{transform:translate(100%)}to{transform:translate(0)}}:host .nav-selector__header .expand-button.expanded{position:absolute;right:0;top:12px;transform:translate(100%)}:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-reduce],:host .nav-selector__header .expand-button ap-symbol[symbol-id=arrow-expand]{color:var(--ref-color-grey-80)}:host .nav-selector__header .expand-button:focus-visible{border-radius:var(--ref-border-radius-sm) 0px 0px var(--ref-border-radius-sm);border-top:1px solid var(--ref-color-grey-20);border-bottom:1px solid var(--ref-color-grey-20);border-left:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-10);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector__header .expand-button:focus-visible.expanded{animation-name:translateExpandButton}:host .nav-selector__header .expand-button:hover{background-color:var(--ref-color-grey-10)}:host .nav-selector__header .expand-button:active{background-color:var(--ref-color-grey-20)}:host .nav-selector__content{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;width:224px;overflow-y:scroll;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.3,1)}:host .nav-selector__content .entry{align-self:stretch;display:flex;flex-direction:column}:host .nav-selector__content .entry.folder{padding:var(--ref-spacing-xxs);border-bottom:1px solid var(--sys-border-color-default)}:host .nav-selector__content .entry.folder+.entry:not(.folder){padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder){padding-left:var(--ref-spacing-xxs);padding-right:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):first-child{padding-top:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):last-child{padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder):has(+.entry.folder){padding-bottom:var(--ref-spacing-xxs)}:host .nav-selector__content .entry:not(.folder)+.entry.folder{border-top:1px solid var(--sys-border-color-default)}:host .nav-selector__content .no-result{display:flex;padding:var(--ref-spacing-sm);flex-direction:column;align-items:flex-start;flex:1 0 0;align-self:stretch;color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:italic;font-weight:400;line-height:var(--ref-font-line-height-sm)}:host .nav-selector__footer{display:flex;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{width:64px}:host.minified nav{width:64px}:host.minified nav .nav-selector__header{align-items:center}:host.minified nav .nav-selector__header .expand-button{animation-name:none;border-radius:var(--ref-border-radius-sm);border:1px solid var(--ref-color-grey-20);background:var(--ref-color-grey-bg)}:host.minified nav .nav-selector__content{width:64px}:host.minified nav .nav-selector__content .entry{padding:var(--ref-spacing-xxxs)}:host.minified nav .nav-selector__footer{padding:var(--ref-spacing-xs) var(--ref-spacing-xxxs)}\n"] }]
|
|
2904
2903
|
}], ctorParameters: () => [{ type: NavSelectorState }, { type: i0.ElementRef }] });
|
|
2905
2904
|
|
|
2906
2905
|
/**
|