@agorapulse/ui-components 20.2.3 → 20.2.7
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.
|
Binary file
|
|
@@ -16,7 +16,7 @@ import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
|
|
|
16
16
|
import { CounterComponent } from '@agorapulse/ui-components/counter';
|
|
17
17
|
import { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
|
|
18
18
|
import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
|
|
19
|
-
import { apMore } from '@agorapulse/ui-symbol/icons';
|
|
19
|
+
import { apMore, apFeatureLock as apFeatureLock$1, apPlus } from '@agorapulse/ui-symbol/icons';
|
|
20
20
|
|
|
21
21
|
class NavSelectorPopoverItemComponent {
|
|
22
22
|
selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
@@ -2733,7 +2733,7 @@ class NavSelectorCategoryComponent {
|
|
|
2733
2733
|
}
|
|
2734
2734
|
}
|
|
2735
2735
|
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 });
|
|
2736
|
-
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: [
|
|
2736
|
+
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, apFeatureLock$1, apPlus), 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 @if (emptyStateAction?.featureLocked) {\n <ap-symbol\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\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: [
|
|
2737
2737
|
/**
|
|
2738
2738
|
* 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)
|
|
2739
2739
|
*/
|
|
@@ -2756,7 +2756,7 @@ class NavSelectorCategoryComponent {
|
|
|
2756
2756
|
}
|
|
2757
2757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorCategoryComponent, decorators: [{
|
|
2758
2758
|
type: Component,
|
|
2759
|
-
args: [{ selector: 'ap-nav-selector-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, TreeNodeAccessibilityDirective, TooltipDirective], providers: [withSymbols(apChevronDown, apChevronUp), NavSelectorCategoryPresenter], host: {
|
|
2759
|
+
args: [{ selector: 'ap-nav-selector-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NavSelectorLeafComponent, SymbolComponent, NavSelectorGroupComponent, TreeNodeAccessibilityDirective, TooltipDirective], providers: [withSymbols(apChevronDown, apChevronUp, apFeatureLock$1, apPlus), NavSelectorCategoryPresenter], host: {
|
|
2760
2760
|
'[class.minified]': '!navSelectorCategoryPresenter.expanded()',
|
|
2761
2761
|
'(keydown.arrowLeft)': 'navSelectorCategoryPresenter.fold($event, this.category())',
|
|
2762
2762
|
'(keydown.arrowRight)': 'navSelectorCategoryPresenter.unfold($event, this.category())',
|
|
@@ -2779,7 +2779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2779
2779
|
animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ maxHeight: '{{maxHeight}}' }), style({ overflow: 'hidden', maxHeight: 0 })])),
|
|
2780
2780
|
]),
|
|
2781
2781
|
]),
|
|
2782
|
-
], 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"] }]
|
|
2782
|
+
], 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 @if (emptyStateAction?.featureLocked) {\n <ap-symbol\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\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"] }]
|
|
2783
2783
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorCategoryPresenter }] });
|
|
2784
2784
|
|
|
2785
2785
|
const AUTO_MINIFIED_STATE_WIDTH_BREAKPOINT = 1280;
|