@agorapulse/ui-components 20.1.10 → 20.1.11
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-20.1.11.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +10 -4
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/nav-selector/index.d.ts +19 -1
- package/package.json +1 -1
- package/agorapulse-ui-components-20.1.10.tgz +0 -0
|
Binary file
|
|
@@ -1164,6 +1164,7 @@ class NavSelectorBuilder {
|
|
|
1164
1164
|
},
|
|
1165
1165
|
folded: node.folded,
|
|
1166
1166
|
emptyStateTitle: node.emptyStateTitle,
|
|
1167
|
+
emptyStateAction: node.emptyStateAction,
|
|
1167
1168
|
type: node.type,
|
|
1168
1169
|
};
|
|
1169
1170
|
}
|
|
@@ -2662,6 +2663,7 @@ class NavSelectorCategoryComponent {
|
|
|
2662
2663
|
el;
|
|
2663
2664
|
navSelectorCategoryPresenter;
|
|
2664
2665
|
category = input.required(...(ngDevMode ? [{ debugName: "category" }] : []));
|
|
2666
|
+
emptyStateActionClicked = output();
|
|
2665
2667
|
actionClicked = output();
|
|
2666
2668
|
foldSymbol = computed(() => (this.category().folded ? 'chevron-down' : 'chevron-up'), ...(ngDevMode ? [{ debugName: "foldSymbol" }] : []));
|
|
2667
2669
|
foldedWithDelay = signal(true, ...(ngDevMode ? [{ debugName: "foldedWithDelay" }] : []));
|
|
@@ -2704,6 +2706,9 @@ class NavSelectorCategoryComponent {
|
|
|
2704
2706
|
});
|
|
2705
2707
|
}
|
|
2706
2708
|
maxHeight = signal('0px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
|
|
2709
|
+
onEmptyStateActionClick(name) {
|
|
2710
|
+
this.emptyStateActionClicked.emit({ actionName: name });
|
|
2711
|
+
}
|
|
2707
2712
|
computeMaxHeight() {
|
|
2708
2713
|
let maxHeight = this.el.nativeElement.clientHeight;
|
|
2709
2714
|
if (this.category().folded) {
|
|
@@ -2727,7 +2732,7 @@ class NavSelectorCategoryComponent {
|
|
|
2727
2732
|
}
|
|
2728
2733
|
}
|
|
2729
2734
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorCategoryComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorCategoryPresenter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2730
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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, category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, 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, category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, 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: [
|
|
2735
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorCategoryComponent, isStandalone: true, selector: "ap-nav-selector-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { emptyStateActionClicked: "emptyStateActionClicked", 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, category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, 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 <div class=\"empty-state\">\n @if (category().emptyStateTitle) {\n <div class=\"empty-state__title\">\n {{ category().emptyStateTitle }}\n </div>\n }\n @if (category().emptyStateAction; as emptyStateAction) {\n <a\n [attr.id]=\"emptyStateAction?.id\"\n class=\"standalone\"\n (click)=\"onEmptyStateActionClick(emptyStateAction.name)\">\n @if (emptyStateAction?.symbolId; as symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"/>\n }\n {{ emptyStateAction.title }}\n </a>\n }\n </div>\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, category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, 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{display:flex;padding:0 var(--ref-spacing-xxs) var(--ref-spacing-xxs) var(--ref-spacing-xxs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs)}:host .children-container .empty-state__title{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;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 .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: [
|
|
2731
2736
|
/**
|
|
2732
2737
|
* 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)
|
|
2733
2738
|
*/
|
|
@@ -2773,7 +2778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2773
2778
|
animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}' }), style({ overflow: 'hidden', maxHeight: 0 })])),
|
|
2774
2779
|
]),
|
|
2775
2780
|
]),
|
|
2776
|
-
], 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, category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, 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
|
|
2781
|
+
], 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, category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n (click)=\"navSelectorCategoryPresenter.toggleFolding($event, 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 <div class=\"empty-state\">\n @if (category().emptyStateTitle) {\n <div class=\"empty-state__title\">\n {{ category().emptyStateTitle }}\n </div>\n }\n @if (category().emptyStateAction; as emptyStateAction) {\n <a\n [attr.id]=\"emptyStateAction?.id\"\n class=\"standalone\"\n (click)=\"onEmptyStateActionClick(emptyStateAction.name)\">\n @if (emptyStateAction?.symbolId; as symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"/>\n }\n {{ emptyStateAction.title }}\n </a>\n }\n </div>\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, category())\"\n (keydown.space)=\"navSelectorCategoryPresenter.toggleFolding($event, category())\"\n (keydown.enter)=\"navSelectorCategoryPresenter.toggleFolding($event, 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{display:flex;padding:0 var(--ref-spacing-xxs) var(--ref-spacing-xxs) var(--ref-spacing-xxs);flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xxs)}:host .children-container .empty-state__title{font-size:var(--ref-font-size-xs);font-weight:var(--ref-font-weight-regular);font-style:italic;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 .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"] }]
|
|
2777
2782
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
|
|
2778
2783
|
|
|
2779
2784
|
const AUTO_MINIFIED_STATE_WIDTH_BREAKPOINT = 1280;
|
|
@@ -2794,6 +2799,7 @@ class NavSelectorComponent {
|
|
|
2794
2799
|
expandedStateLocalStorageKey = input(...(ngDevMode ? [undefined, { debugName: "expandedStateLocalStorageKey" }] : []));
|
|
2795
2800
|
selectedEntryUids = model.required(...(ngDevMode ? [{ debugName: "selectedEntryUids" }] : []));
|
|
2796
2801
|
actionClicked = output();
|
|
2802
|
+
emptyStateActionClicked = output();
|
|
2797
2803
|
headerProjection = contentChild('header', ...(ngDevMode ? [{ debugName: "headerProjection" }] : []));
|
|
2798
2804
|
contentHeaderProjection = contentChild('contentHeader', ...(ngDevMode ? [{ debugName: "contentHeaderProjection" }] : []));
|
|
2799
2805
|
footerProjection = contentChild('footer', ...(ngDevMode ? [{ debugName: "footerProjection" }] : []));
|
|
@@ -2942,7 +2948,7 @@ class NavSelectorComponent {
|
|
|
2942
2948
|
}
|
|
2943
2949
|
}
|
|
2944
2950
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: [
|
|
2951
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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", emptyStateActionClicked: "emptyStateActionClicked", 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\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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 (emptyStateActionClicked)=\"emptyStateActionClicked.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: ["emptyStateActionClicked", "actionClicked"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: [
|
|
2946
2952
|
trigger('expand', [
|
|
2947
2953
|
transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
|
|
2948
2954
|
transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
|
|
@@ -2973,7 +2979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2973
2979
|
transition('expanded => minified', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: EXPANDED_STATE_WIDTH }), style({ width: '100px' }), style({ width: MINIFIED_STATE_WIDTH })]))),
|
|
2974
2980
|
transition('minified => expanded', animate(EXPAND_ANIMATION_TIMINGS, keyframes([style({ width: MINIFIED_STATE_WIDTH }), style({ width: '50%' }), style({ width: '100%' })]))),
|
|
2975
2981
|
]),
|
|
2976
|
-
], 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\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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)\"
|
|
2982
|
+
], 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\n @if (contentHeaderProjectionNotNull) {\n <ng-container\n [ngTemplateOutlet]=\"contentHeaderProjectionNotNull\"\n [ngTemplateOutletContext]=\"{\n expanded: navSelectorState.expanded(),\n }\" />\n }\n </div>\n\n <div\n class=\"nav-selector__content\"\n role=\"tree\"\n [attr.aria-multiselectable]=\"navSelectorState.isMultipleModeEnabled()\">\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 (emptyStateActionClicked)=\"emptyStateActionClicked.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"] }]
|
|
2977
2983
|
}], ctorParameters: () => [] });
|
|
2978
2984
|
|
|
2979
2985
|
/**
|